diff options
Diffstat (limited to 'webapp/components/post_view')
-rw-r--r-- | webapp/components/post_view/components/post.jsx | 31 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_body.jsx | 33 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_info.jsx | 21 |
3 files changed, 51 insertions, 34 deletions
diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx index 6633bd9b9..0a4840050 100644 --- a/webapp/components/post_view/components/post.jsx +++ b/webapp/components/post_view/components/post.jsx @@ -104,6 +104,11 @@ export default class Post extends React.Component { type = 'Comment'; } + let hideControls = ''; + if (post.state === Constants.POST_DELETED || post.state === Constants.POST_FAILED) { + hideControls = 'post--hide-controls'; + } + const commentCount = this.props.commentCount; let rootUser; @@ -113,13 +118,6 @@ export default class Post extends React.Component { rootUser = 'other--root'; } - let postType = ''; - if (type !== 'Post') { - postType = 'post--comment'; - } else if (commentCount > 0) { - postType = 'post--root'; - } - let currentUserCss = ''; if (this.props.currentUser.id === post.user_id && !post.props.from_webhook && !PostUtils.isSystemMessage(post)) { currentUserCss = 'current--user'; @@ -142,9 +140,22 @@ export default class Post extends React.Component { shouldHighlightClass = 'post--highlight'; } + let postType = ''; + if (type !== 'Post') { + postType = 'post--comment'; + } else if (commentCount > 0) { + postType = 'post--root'; + sameUserClass = ''; + rootUser = ''; + } + let systemMessageClass = ''; if (PostUtils.isSystemMessage(post)) { systemMessageClass = 'post--system'; + sameUserClass = ''; + currentUserCss = ''; + postType = ''; + rootUser = ''; } let profilePic = ( @@ -170,18 +181,20 @@ export default class Post extends React.Component { } let compactClass = ''; + let profilePicContainer = (<div className='post__img'>{profilePic}</div>); if (this.props.compactDisplay) { compactClass = 'post--compact'; + profilePicContainer = ''; } return ( <div> <div id={'post_' + post.id} - className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass} + className={'post ' + sameUserClass + ' ' + compactClass + ' ' + rootUser + ' ' + postType + ' ' + currentUserCss + ' ' + shouldHighlightClass + ' ' + systemMessageClass + ' ' + hideControls} > <div className={'post__content ' + centerClass}> - <div className='post__img'>{profilePic}</div> + {profilePicContainer} <div> <PostHeader ref='header' diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx index 561860b65..a98c92017 100644 --- a/webapp/components/post_view/components/post_body.jsx +++ b/webapp/components/post_view/components/post_body.jsx @@ -4,6 +4,7 @@ import FileAttachmentList from 'components/file_attachment_list.jsx'; import UserStore from 'stores/user_store.jsx'; import * as Utils from 'utils/utils.jsx'; +import * as GlobalActions from 'actions/global_actions.jsx'; import Constants from 'utils/constants.jsx'; import * as TextFormatting from 'utils/text_formatting.jsx'; import PostBodyAdditionalContent from './post_body_additional_content.jsx'; @@ -16,6 +17,11 @@ import loadingGif from 'images/load.gif'; import React from 'react'; export default class PostBody extends React.Component { + constructor(props) { + super(props); + + this.removePost = this.removePost.bind(this); + } shouldComponentUpdate(nextProps) { if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) { return true; @@ -44,6 +50,10 @@ export default class PostBody extends React.Component { return false; } + removePost() { + GlobalActions.emitRemovePost(this.props.post); + } + render() { const post = this.props.post; const filenames = this.props.post.filenames; @@ -144,12 +154,27 @@ export default class PostBody extends React.Component { } let message; + let removeButton; if (this.props.post.state === Constants.POST_DELETED) { + removeButton = ( + <a + href='#' + className='post__remove theme' + type='button' + onClick={this.removePost} + > + {'×'} + </a> + ); + message = ( - <FormattedMessage - id='post_body.deleted' - defaultMessage='(message deleted)' - /> + <p> + <FormattedMessage + id='post_body.deleted' + defaultMessage='(message deleted)' + /> + {removeButton} + </p> ); } else { message = ( diff --git a/webapp/components/post_view/components/post_info.jsx b/webapp/components/post_view/components/post_info.jsx index 2a5ea6395..76d4df1cc 100644 --- a/webapp/components/post_view/components/post_info.jsx +++ b/webapp/components/post_view/components/post_info.jsx @@ -20,7 +20,6 @@ export default class PostInfo extends React.Component { this.dropdownPosition = this.dropdownPosition.bind(this); this.handlePermalink = this.handlePermalink.bind(this); - this.removePost = this.removePost.bind(this); } dropdownPosition(e) { var position = $('#post-list').height() - $(e.target).offset().top; @@ -165,25 +164,6 @@ export default class PostInfo extends React.Component { GlobalActions.showGetPostLinkModal(this.props.post); } - removePost() { - GlobalActions.emitRemovePost(this.props.post); - } - createRemovePostButton(post) { - if (!Utils.isPostEphemeral(post)) { - return null; - } - - return ( - <a - href='#' - className='post__remove theme' - type='button' - onClick={this.removePost} - > - {'×'} - </a> - ); - } render() { var post = this.props.post; var comments = ''; @@ -232,7 +212,6 @@ export default class PostInfo extends React.Component { {dropdown} </div> {comments} - {this.createRemovePostButton(post)} </li> </ul> ); |