diff options
author | Joram Wilander <jwawilander@gmail.com> | 2016-09-13 12:02:37 -0400 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2016-09-13 09:02:37 -0700 |
commit | 05af5d14b8d07b010c70750ae1ac5ddf22c120a7 (patch) | |
tree | ba27990d0ff3b5810895435b98882598bc0a8356 | |
parent | 2031873cb1a7dcb46c4127bc86f2ad9bf4d3b293 (diff) | |
download | chat-05af5d14b8d07b010c70750ae1ac5ddf22c120a7.tar.gz chat-05af5d14b8d07b010c70750ae1ac5ddf22c120a7.tar.bz2 chat-05af5d14b8d07b010c70750ae1ac5ddf22c120a7.zip |
Highlight comment bar for comments considered mentions (#3938)
-rw-r--r-- | webapp/components/post_view/components/post.jsx | 2 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_body.jsx | 14 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_header.jsx | 2 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_info.jsx | 8 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_list.jsx | 39 | ||||
-rw-r--r-- | webapp/sass/layout/_post.scss | 5 | ||||
-rw-r--r-- | webapp/utils/utils.jsx | 6 |
7 files changed, 40 insertions, 36 deletions
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index e9019bf38..7aa0c028e 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} /> </div> </div> diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx index 8c3b3009f..3295f5bac 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 ( <div> {comment} - <div className='post__body'> + <div className={'post__body ' + mentionHighlightClass}> {messageWithAdditionalContent} {fileAttachmentHolder} </div> @@ -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 27715e5f5..5900c8281 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 { <PostInfo post={post} commentCount={this.props.commentCount} - isCommentMention={this.props.isCommentMention} handleCommentClick={this.props.handleCommentClick} handleDropdownOpened={this.props.handleDropdownOpened} allowReply={!isSystemMessage} @@ -92,7 +91,6 @@ PostHeader.propTypes = { user: React.PropTypes.object, currentUser: React.PropTypes.object.isRequired, commentCount: React.PropTypes.number.isRequired, - isCommentMention: React.PropTypes.bool.isRequired, isLastComment: React.PropTypes.bool.isRequired, handleCommentClick: React.PropTypes.func.isRequired, handleDropdownOpened: React.PropTypes.func.isRequired, diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 3c0eb9880..c95a121da 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -250,7 +250,6 @@ export default class PostInfo extends React.Component { var post = this.props.post; var comments = ''; var showCommentClass = ''; - var highlightMentionClass = ''; var commentCountText = this.props.commentCount; const flagIcon = Constants.FLAG_ICON_SVG; @@ -260,15 +259,11 @@ export default class PostInfo extends React.Component { commentCountText = ''; } - if (this.props.isCommentMention) { - highlightMentionClass = ' mention--highlight'; - } - if (post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING && !Utils.isPostEphemeral(post) && this.props.allowReply) { comments = ( <a href='#' - className={'comment-icon__container' + showCommentClass + highlightMentionClass} + className={'comment-icon__container' + showCommentClass} onClick={this.props.handleCommentClick} > <span @@ -386,7 +381,6 @@ PostInfo.defaultProps = { PostInfo.propTypes = { post: React.PropTypes.object.isRequired, commentCount: React.PropTypes.number.isRequired, - isCommentMention: React.PropTypes.bool.isRequired, isLastComment: React.PropTypes.bool.isRequired, allowReply: React.PropTypes.bool.isRequired, handleCommentClick: React.PropTypes.func.isRequired, diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index b008245f6..a05507703 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -253,35 +253,34 @@ export default class PostList extends React.Component { } let commentCount = 0; - let nonOwnCommentsExists = false; let isCommentMention = false; + let lastCommentOnThreadTime = Number.MAX_SAFE_INTEGER; let commentRootId; if (parentPost) { commentRootId = post.root_id; } else { commentRootId = post.id; } - if (commentRootId) { - const commentsNotifyLevel = this.props.currentUser.notify_props.comments || 'never'; - for (const postId in posts) { - if (posts[postId].root_id === commentRootId) { - commentCount += 1; - if (posts[postId].user_id !== this.props.currentUser.id) { - nonOwnCommentsExists = true; - } - if (posts[postId].user_id === this.props.currentUser.id && commentsNotifyLevel === 'any' && !isCommentMention) { - for (const nextPostId in posts) { - if (posts[nextPostId].root_id === commentRootId && posts[nextPostId].user_id !== this.props.currentUser.id && - posts[postId].create_at < posts[nextPostId].create_at) { - isCommentMention = true; - break; - } - } - } + + for (const postId in posts) { + if (posts[postId].root_id === commentRootId) { + commentCount += 1; + if (posts[postId].user_id === userId && (lastCommentOnThreadTime === Number.MAX_SAFE_INTEGER || lastCommentOnThreadTime < posts[postId].create_at)) { + lastCommentOnThreadTime = posts[postId].create_at; } } - if (nonOwnCommentsExists && posts[commentRootId].user_id === this.props.currentUser.id && commentsNotifyLevel !== 'never') { - isCommentMention = true; + } + + if (parentPost && commentRootId) { + const commentsNotifyLevel = this.props.currentUser.notify_props.comments || 'never'; + const notCurrentUser = post.user_id !== userId || (post.props && post.props.from_webhook); + const notViewed = this.props.lastViewed !== 0 && post.create_at > 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 c5901ca0e..41033a67c 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 2780196db..dda1d0986 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 +} |