PLT-3182 - Improving switch channels modal and some minor UI improvements (#3238)

* PLT-3182 - Improving switch channels modal and some minor UI improvements

Enabling link previews

Adding compact layout to RHS

Improving timestamps

* Adding update code for RHS components

webapp/components/channel_switch_modal.jsx

@@ -98,10 +98,12 @@ export default class SwitchChannelModal extends React.Component {
                 </Modal.Header>
 
                 <Modal.Body>
+                    <div className='modal__hint'>
                         <FormattedMessage
                             id='channel_switch_modal.help'
                             defaultMessage='↑↓ to browse, TAB to select, ↵ to confirm, ESC to dismiss'
                         />
+                    </div>
                     <SuggestionBox
                         ref='search'
                         className='form-control focused'
@@ -118,9 +120,9 @@ export default class SwitchChannelModal extends React.Component {
                     />
                 </Modal.Body>
                 <Modal.Footer>
-                    <label className='control-label'>
+                    <div className='modal__error'>
                         {message}
-                    </label>
+                    </div>
                     <button
                         type='button'
                         className='btn btn-default'

webapp/components/post_view/components/post_body_additional_content.jsx

@@ -97,7 +97,6 @@ export default class PostBodyAdditionalContent extends React.Component {
             );
         }
 
-        if (!this.props.compactDisplay) {
         for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) {
             const imageType = Constants.IMAGE_TYPES[i];
             const suffix = link.substring(link.length - (imageType.length + 1));
@@ -110,7 +109,6 @@ export default class PostBodyAdditionalContent extends React.Component {
                 );
             }
         }
-        }
 
         return null;
     }

webapp/components/rhs_comment.jsx

@@ -35,6 +35,9 @@ export default class RhsComment extends React.Component {
         GlobalActions.showGetPostLinkModal(this.props.post);
     }
     shouldComponentUpdate(nextProps) {
+        if (nextProps.compactDisplay !== this.props.compactDisplay) {
+            return true;
+        }
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
         }
@@ -186,6 +189,11 @@ export default class RhsComment extends React.Component {
             );
         }
 
+        let compactClass = '';
+        if (this.props.compactDisplay) {
+            compactClass = 'post--compact';
+        }
+
         var dropdown = this.createDropdown();
 
         var fileAttachment;
@@ -195,12 +203,13 @@ export default class RhsComment extends React.Component {
                     filenames={post.filenames}
                     channelId={post.channel_id}
                     userId={post.user_id}
+                    compactDisplay={this.props.compactDisplay}
                 />
             );
         }
 
         return (
-            <div className={'post ' + currentUserCss}>
+            <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}>
                 <div className='post__content'>
                     <div className='post__img'>
                         <img
@@ -249,5 +258,6 @@ export default class RhsComment extends React.Component {
 RhsComment.propTypes = {
     post: React.PropTypes.object,
     user: React.PropTypes.object.isRequired,
-    currentUser: React.PropTypes.object.isRequired
+    currentUser: React.PropTypes.object.isRequired,
+    compactDisplay: React.PropTypes.bool
 };

webapp/components/rhs_root_post.jsx

@@ -32,6 +32,9 @@ export default class RhsRootPost extends React.Component {
         GlobalActions.showGetPostLinkModal(this.props.post);
     }
     shouldComponentUpdate(nextProps) {
+        if (nextProps.compactDisplay !== this.props.compactDisplay) {
+            return true;
+        }
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
         }
@@ -220,6 +223,11 @@ export default class RhsRootPost extends React.Component {
             );
         }
 
+        let compactClass = '';
+        if (this.props.compactDisplay) {
+            compactClass = 'post--compact';
+        }
+
         const messageWrapper = (
             <div
                 ref='message_holder'
@@ -229,7 +237,7 @@ export default class RhsRootPost extends React.Component {
         );
 
         return (
-            <div className={'post post--root ' + userCss + ' ' + systemMessageClass}>
+            <div className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}>
                 <div className='post-right-channel__name'>{channelName}</div>
                 <div className='post__content'>
                     <div className='post__img'>
@@ -279,5 +287,6 @@ RhsRootPost.propTypes = {
     post: React.PropTypes.object.isRequired,
     user: React.PropTypes.object.isRequired,
     currentUser: React.PropTypes.object.isRequired,
-    commentCount: React.PropTypes.number
+    commentCount: React.PropTypes.number,
+    compactDisplay: React.PropTypes.bool
 };

webapp/components/rhs_thread.jsx

@@ -12,6 +12,7 @@ import RhsHeaderPost from './rhs_header_post.jsx';
 import RootPost from './rhs_root_post.jsx';
 import Comment from './rhs_comment.jsx';
 import Constants from 'utils/constants.jsx';
+const Preferences = Constants.Preferences;
 import FileUploadOverlay from './file_upload_overlay.jsx';
 import Scrollbars from 'react-custom-scrollbars';
 
@@ -50,12 +51,14 @@ export default class RhsThread extends React.Component {
         this.onPostChange = this.onPostChange.bind(this);
         this.onUserChange = this.onUserChange.bind(this);
         this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
+        this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.handleResize = this.handleResize.bind(this);
 
         const state = this.getPosts();
         state.windowWidth = Utils.windowWidth();
         state.windowHeight = Utils.windowHeight();
         state.profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
+        state.compactDisplay = PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT;
 
         this.state = state;
     }
@@ -63,6 +66,7 @@ export default class RhsThread extends React.Component {
         PostStore.addSelectedPostChangeListener(this.onPostChange);
         PostStore.addChangeListener(this.onPostChange);
         PreferenceStore.addChangeListener(this.forceUpdateInfo);
+        PreferenceStore.addChangeListener(this.onPreferenceChange);
         UserStore.addChangeListener(this.onUserChange);
 
         this.scrollToBottom();
@@ -74,6 +78,7 @@ export default class RhsThread extends React.Component {
         PostStore.removeSelectedPostChangeListener(this.onPostChange);
         PostStore.removeChangeListener(this.onPostChange);
         PreferenceStore.removeChangeListener(this.forceUpdateInfo);
+        PreferenceStore.removeChangeListener(this.onPreferenceChange);
         UserStore.removeChangeListener(this.onUserChange);
 
         window.removeEventListener('resize', this.handleResize);
@@ -103,6 +108,10 @@ export default class RhsThread extends React.Component {
             return true;
         }
 
+        if (nextState.compactDisplay !== this.state.compactDisplay) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(nextState.profiles, this.state.profiles)) {
             return true;
         }
@@ -124,6 +133,11 @@ export default class RhsThread extends React.Component {
             windowHeight: Utils.windowHeight()
         });
     }
+    onPreferenceChange() {
+        this.setState({
+            compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+        });
+    }
     onPostChange() {
         if (this.mounted) {
             this.setState(this.getPosts());
@@ -228,6 +242,7 @@ export default class RhsThread extends React.Component {
                                 commentCount={postsArray.length}
                                 user={profile}
                                 currentUser={this.props.currentUser}
+                                compactDisplay={this.state.compactDisplay}
                             />
                             <div className='post-right-comments-container'>
                                 {postsArray.map((comPost) => {
@@ -244,6 +259,7 @@ export default class RhsThread extends React.Component {
                                             post={comPost}
                                             user={p}
                                             currentUser={this.props.currentUser}
+                                            compactDisplay={this.state.compactDisplay}
                                         />
                                     );
                                 })}

webapp/sass/components/_modal.scss

@@ -29,6 +29,21 @@
         }
     }
 
+    .modal__hint {
+        @include opacity(.8);
+        display: block;
+        font-size: .9em;
+        margin: 0 0 10px;
+    }
+
+    .modal__error {
+        color: $red;
+        float: left;
+        font-size: .95em;
+        font-weight: normal;
+        margin-top: 6px;
+    }
+
     .more-table {
         margin: 0;
         table-layout: fixed;

webapp/sass/layout/_post-right.scss

@@ -28,7 +28,7 @@
     .post {
         &.post--root {
             border-bottom: 1px solid #ddd;
-            padding-bottom: 1.2em;
+            padding-bottom: 1em;
 
             .post__body {
                 background: transparent !important;

webapp/sass/layout/_post.scss

@@ -488,6 +488,13 @@ body.ios {
     }
 
     &.post--compact {
+        &.post--thread {
+            .post__header {
+                height: 22px;
+                padding-top: 3px;
+            }
+        }
+
         blockquote {
             display: inline-block;
             font-size: 1em;
@@ -509,10 +516,19 @@ body.ios {
 
         .post__body {
             background: transparent !important;
-            line-height: 1.2;
+            line-height: 1.6;
             margin-top: -1px;
             padding: 3px 0;
 
+            .img-div {
+                max-height: 150px;
+                max-width: 150px;
+            }
+
+            p {
+                line-height: inherit;
+            }
+
             p + p {
                 margin-top: 1em;
             }
@@ -520,6 +536,7 @@ body.ios {
             ol,
             ul {
                 display: inline-block;
+                margin-top: 1px;
                 padding-left: 30px;
             }
         }
@@ -758,7 +775,7 @@ body.ios {
 
         .col__reply {
             position: absolute;
-            right: 10px;
+            right: 0;
             top: 30px;
             white-space: nowrap;
             width: 65px;

webapp/sass/layout/_sidebar-right.scss

@@ -17,7 +17,7 @@
 
     .post {
         .post__content {
-            padding: 0;
+            padding: 0 10px 0 0;
         }
 
         .post__header {

webapp/sass/layout/_webhooks.scss

@@ -36,8 +36,8 @@
     }
 }
 
-
+.post {
-.attachment {
+    .attachment {
         .attachment__content {
             border-radius: 4px;
             border-style: solid;
@@ -87,7 +87,9 @@
         }
 
         .attachment__image {
+            margin-bottom: 1em;
             max-height: 300px;
+            max-width: 500px;
         }
 
         .attachment__author-name {
@@ -116,11 +118,6 @@
             width: 14px;
         }
 
-    .attachment__image {
-        margin-bottom: 1em;
-        max-width: 100%;
-    }
-
         .attachment__thumb-container {
             float: right;
             text-align: right;
@@ -146,4 +143,5 @@
                 }
             }
         }
+    }
 }

webapp/sass/responsive/_mobile.scss

@@ -26,6 +26,10 @@
         }
     }
 
+    .member-select__container {
+        margin-top: 10px;
+    }
+
     .user-popover {
         pointer-events: none;
     }
@@ -51,11 +55,6 @@
     }
 
     .post {
-        &.post--compact {
-
-
-        }
-
         .post__dropdown {
             display: inline-block;
             height: 20px;

webapp/sass/responsive/_tablet.scss

@@ -85,7 +85,8 @@
 
     .post {
         &.post--compact {
-            padding: 5px .5em 0 80px;
+            &:not(.post--thread) {
+                padding: 5px .5em 0 70px;
 
                 .post__link {
                     margin: 4px 0 7px;
@@ -95,7 +96,9 @@
                     font-size: .85em;
                     left: -70px;
                     position: absolute;
-                top: 2px;
+                    text-align: right;
+                    top: 4px;
+                    width: 60px;
                 }
 
                 span {
@@ -108,7 +111,7 @@
 
                 .post__header {
                     float: left;
-                height: 18px;
+                    height: 21px;
                     padding-top: 3px;
 
                     .col__name {
@@ -161,9 +164,24 @@
                     clear: both;
                 }
 
+                .post__body {
+                    width: 100%;
+                }
+
+                .post__content {
+                    padding-right: 85px;
+                }
+            }
+
             &.same--root {
                 &.same--user {
-                    padding-left: 80px;
+                    padding-left: 70px;
+
+                    .post__header {
+                        .col__reply {
+                            top: 4px;
+                        }
+                    }
 
                     .post__img {
                         img {
@@ -194,14 +212,6 @@
                     }
                 }
             }
-
-            .post__body {
-                width: 100%;
-            }
-
-            .post__content {
-                padding-right: 85px;
-            }
         }
 
         &.same--root {

webapp/utils/utils.jsx

@@ -654,7 +654,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay', 'color:' + theme.centerChannelColor, 1);
-        changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1);
+        changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.65), 1);
         changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor, 2);
         changeCss('.app__body .mentions--top, .app__body .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3);