PLT-3418, PLT-2950, PLT-3375, PLT-3382, PLT-3446, PLT-3465: Multiple UI Improvements (#3449)

Improving help text margins

Updating changes for get link and create post files

Fixing icon for select team screen

Fixing styles for select team button

Adding improvements to posts UI

Adding improvement to post layout

Updating changes for post controls

Updating z-index for sidebar--right

Updating help text position

Fixing code for posts

Fixing css for post view

Pushing improvements for posts view

Updating changes for post view

Updating post layout

Fixing system time css

Updating header for system posts

Updating post css

Removing opacity and changing color for system messages

Simplifying root post and system post behaviour

Removing images from compact view

Updating help text for display

Updating embed preview text for advanced option

PLT-3490 - Fixing RHS issue on Edge

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>
         );