diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index e9019bf38b..7aa0c028e0 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -236,7 +236,6 @@ export default class Post extends React.Component { post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} - isCommentMention={this.props.isCommentMention} handleCommentClick={this.handleCommentClick} handleDropdownOpened={this.handleDropdownOpened} isLastComment={this.props.isLastComment} @@ -255,6 +254,7 @@ export default class Post extends React.Component { handleCommentClick={this.handleCommentClick} compactDisplay={this.props.compactDisplay} previewCollapsed={this.props.previewCollapsed} + isCommentMention={this.props.isCommentMention} /> diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx index 8c3b3009fc..3295f5bacd 100644 --- a/webapp/components/post_view/components/post_body.jsx +++ b/webapp/components/post_view/components/post_body.jsx @@ -23,6 +23,10 @@ export default class PostBody extends React.Component { this.removePost = this.removePost.bind(this); } shouldComponentUpdate(nextProps) { + if (nextProps.isCommentMention !== this.props.isCommentMention) { + return true; + } + if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; } @@ -190,10 +194,15 @@ export default class PostBody extends React.Component { ); } + let mentionHighlightClass = ''; + if (this.props.isCommentMention) { + mentionHighlightClass = 'mention-comment'; + } + return (
{comment} -
+
{messageWithAdditionalContent} {fileAttachmentHolder}
@@ -208,5 +217,6 @@ PostBody.propTypes = { retryPost: React.PropTypes.func.isRequired, handleCommentClick: React.PropTypes.func.isRequired, compactDisplay: React.PropTypes.bool, - previewCollapsed: React.PropTypes.string + previewCollapsed: React.PropTypes.string, + isCommentMention: React.PropTypes.bool }; diff --git a/webapp/components/post_view/components/post_header.jsx b/webapp/components/post_view/components/post_header.jsx index 27715e5f5c..5900c82812 100644 --- a/webapp/components/post_view/components/post_header.jsx +++ b/webapp/components/post_view/components/post_header.jsx @@ -64,7 +64,6 @@ export default class PostHeader extends React.Component { this.props.lastViewed; + if (notCurrentUser && notViewed) { + if (commentsNotifyLevel === 'any' && (posts[commentRootId].user_id === userId || post.create_at > lastCommentOnThreadTime)) { + isCommentMention = true; + } else if (commentsNotifyLevel === 'root' && posts[commentRootId].user_id === userId) { + isCommentMention = true; + } } } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index c5901ca0e1..41033a67cb 100644 --- a/webapp/sass/layout/_post.scss +++ b/webapp/sass/layout/_post.scss @@ -681,6 +681,11 @@ body.ios { .post__body { border-left: 4px solid $gray; padding-left: 7px; + + &.mention-comment { + border-left: 4px solid $yellow; + border-color: $yellow; + } } } diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index 2780196db4..dda1d0986a 100644 --- a/webapp/utils/utils.jsx +++ b/webapp/utils/utils.jsx @@ -663,9 +663,7 @@ export function applyTheme(theme) { if (theme.mentionHighlightBg) { changeCss('.app__body .mention--highlight, .app__body .search-highlight', 'background:' + theme.mentionHighlightBg, 1); - } - - if (theme.mentionHighlightBg) { + changeCss('.mention-comment', 'border-color:' + theme.mentionHighlightBg + ' !important', 1); changeCss('.app__body .post.post--highlight', 'background:' + changeOpacity(theme.mentionHighlightBg, 0.5), 1); } @@ -1375,4 +1373,4 @@ export function handleFormattedTextClick(e) { browserHistory.push(linkAttribute.value); } } -} \ No newline at end of file +}