mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Merge pull request #41 from asaadmahmoodspin/master

Просмотр исходного кода 
MM-1253 - Fixing new message and date separator corner case
Этот коммит содержится в:
Corey Hulen
2015-06-25 11:41:33 -04:00
родитель 0537e87a90 e454cf54fa
Коммит d9dfb2cbd1
2 изменённых файлов: 54 добавлений и 44 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

30
web/react/components/post_list.jsx
Просмотреть файл

@@ -125,12 +125,12 @@ module.exports = React.createClass({
$('body').on('mouseenter mouseleave', '.post', function(ev){ $('body').on('mouseenter mouseleave', '.post', function(ev){
if(ev.type === 'mouseenter'){ if(ev.type === 'mouseenter'){
$(this).parent('div').prev('.date-seperator').addClass('hovered--after'); $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after');
$(this).parent('div').next('.date-seperator').addClass('hovered--before'); $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before');
} }
else { else {
$(this).parent('div').prev('.date-seperator').removeClass('hovered--after'); $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after');
$(this).parent('div').next('.date-seperator').removeClass('hovered--before'); $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before');
} }
}); });
@@ -389,7 +389,7 @@ module.exports = React.createClass({
<div className="channel-intro"> <div className="channel-intro">
<h4 className="channel-intro-title">Welcome</h4> <h4 className="channel-intro-title">Welcome</h4>
<p> <p>
{ creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "." { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "."
: "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." } : "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." }
{ channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." } { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." }
<br/> <br/>
@@ -434,9 +434,9 @@ module.exports = React.createClass({
currentPostDay = utils.getDateForUnixTicks(post.create_at); currentPostDay = utils.getDateForUnixTicks(post.create_at);
if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) { if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) {
postCtls.push( postCtls.push(
<div className="date-seperator"> <div className="date-separator">
<hr className="date-seperator__hr" /> <hr className="separator__hr" />
<div className="date-seperator__text">{currentPostDay.toDateString()}</div> <div className="separator__text">{currentPostDay.toDateString()}</div>
</div> </div>
); );
} }
@@ -444,17 +444,13 @@ module.exports = React.createClass({
if (post.create_at > last_viewed && !rendered_last_viewed) { if (post.create_at > last_viewed && !rendered_last_viewed) {
rendered_last_viewed = true; rendered_last_viewed = true;
postCtls.push( postCtls.push(
<div> <div className="new-separator">
<div className="new-seperator"> <hr id="new_message" className="separator__hr" />
<hr id="new_message" className="new-seperator__hr" /> <div className="separator__text">New Messages</div>
<div className="new-seperator__text">New Messages</div> </div>
</div>
{postCtl}
</div>
); );
} else {
postCtls.push(postCtl);
} }
postCtls.push(postCtl);
previousPostDay = utils.getDateForUnixTicks(post.create_at); previousPostDay = utils.getDateForUnixTicks(post.create_at);
} }

68
web/sass-files/sass/partials/_post.scss
Просмотреть файл

@@ -42,49 +42,63 @@ body.ios {
} }
#post-list { #post-list {
.new-seperator { .date-separator, .new-separator {
text-align: center; text-align: center;
padding: 1em 0; height: 2em;
.new-seperator__hr { margin: 0;
border-color: #FFAF53; position: relative;
margin: 0; &:before, &:after {
content: "";
height: 1em;
position: absolute;
left: 0;
width: 100%;
display: none;
} }
.new-seperator__text { &:before {
margin-top: -11px; bottom: 0;
color: #FF8800; }
background: #FFF; &:after {
display: inline-block; top: 0;
padding: 0 1em;
font-weight: normal;
} }
}
.date-seperator {
text-align: center;
margin: 1em 0;
height: 0;
&.hovered--after { &.hovered--after {
margin-bottom: 0; &:before {
padding-bottom: 1em; background: #f6f6f6;
background: #f6f6f6; display: block;
}
} }
&.hovered--before { &.hovered--before {
margin-top: 0; &:after {
padding-top: 1em; background: #f6f6f6;
background: #f6f6f6; display: block;
}
} }
.date-seperator__hr { .separator__hr {
border-color: #ccc; border-color: #ccc;
margin: 0; margin: 0;
position: relative;
z-index: 5;
top: 1em;
} }
.date-seperator__text { .separator__text {
margin-top: -13px; line-height: 2em;
line-height: 24px;
color: #555; color: #555;
background: #FFF; background: #FFF;
display: inline-block; display: inline-block;
padding: 0 1em; padding: 0 1em;
font-weight: 900; font-weight: 900;
@include border-radius(50px); @include border-radius(50px);
position: relative;
z-index: 5;
}
}
.new-separator {
.separator__hr {
border-color: #FFAF53;
}
.separator__text {
color: #F80;
font-weight: normal;
} }
} }
.post-list-holder-by-time { .post-list-holder-by-time {