Multiple UI Improvements (#3804)

* PLT-3834 - Updating Manage members modal for mobile

* PLT-3792 - Making compact view compatible with search and flagged posts RHS

* PLT-3910 - Improving suggestions separator

* PLT-3769 - Enabling markdown headings in compact view

* Updating view members text in en..json

* Removing shouldcomponentupdate from search_results_item.jsx

webapp/components/search_results.jsx

@@ -5,9 +5,11 @@ import $ from 'jquery';
 import ChannelStore from 'stores/channel_store.jsx';
 import SearchStore from 'stores/search_store.jsx';
 import UserStore from 'stores/user_store.jsx';
+import PreferenceStore from 'stores/preference_store.jsx';
 import SearchBox from './search_bar.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
+const Preferences = Constants.Preferences;
 import SearchResultsHeader from './search_results_header.jsx';
 import SearchResultsItem from './search_results_item.jsx';
 
@@ -47,12 +49,14 @@ export default class SearchResults extends React.Component {
         this.onChange = this.onChange.bind(this);
         this.onUserChange = this.onUserChange.bind(this);
         this.resize = this.resize.bind(this);
+        this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.handleResize = this.handleResize.bind(this);
 
         const state = getStateFromStores();
         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;
     }
 
@@ -60,6 +64,7 @@ export default class SearchResults extends React.Component {
         this.mounted = true;
         SearchStore.addSearchChangeListener(this.onChange);
         ChannelStore.addChangeListener(this.onChange);
+        PreferenceStore.addChangeListener(this.onPreferenceChange);
         UserStore.addChangeListener(this.onUserChange);
         this.resize();
         window.addEventListener('resize', this.handleResize);
@@ -77,6 +82,10 @@ export default class SearchResults extends React.Component {
             return true;
         }
 
+        if (nextState.compactDisplay !== this.state.compactDisplay) {
+            return true;
+        }
+
         return false;
     }
 
@@ -87,6 +96,7 @@ export default class SearchResults extends React.Component {
     componentWillUnmount() {
         SearchStore.removeSearchChangeListener(this.onChange);
         ChannelStore.removeChangeListener(this.onChange);
+        PreferenceStore.removeChangeListener(this.onPreferenceChange);
         UserStore.removeChangeListener(this.onUserChange);
         this.mounted = false;
         window.removeEventListener('resize', this.handleResize);
@@ -99,6 +109,12 @@ export default class SearchResults extends React.Component {
         });
     }
 
+    onPreferenceChange() {
+        this.setState({
+            compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+        });
+    }
+
     onChange() {
         if (this.mounted) {
             this.setState(getStateFromStores());
@@ -201,6 +217,7 @@ export default class SearchResults extends React.Component {
                     <SearchResultsItem
                         key={post.id}
                         channel={this.state.channels.get(post.channel_id)}
+                        compactDisplay={this.state.compactDisplay}
                         post={post}
                         user={profile}
                         term={searchTerm}

webapp/components/search_results_item.jsx

@@ -94,6 +94,21 @@ export default class SearchResultsItem extends React.Component {
             botIndicator = <li className='bot-indicator'>{Constants.BOT_NAME}</li>;
         }
 
+        let profilePic = (
+            <img
+                src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
+                height='36'
+                width='36'
+            />
+        );
+
+        let compactClass = '';
+        let profilePicContainer = (<div className='post__img'>{profilePic}</div>);
+        if (this.props.compactDisplay) {
+            compactClass = 'post--compact';
+            profilePicContainer = '';
+        }
+
         let flag;
         let flagVisible = '';
         let flagTooltip = (
@@ -148,17 +163,11 @@ export default class SearchResultsItem extends React.Component {
                     </div>
                 </div>
                 <div
-                    className='post'
+                    className={'post post--thread ' + compactClass}
                 >
                     <div className='search-channel__name'>{channelName}</div>
                     <div className='post__content'>
-                        <div className='post__img'>
+                        {profilePicContainer}
-                            <img
-                                src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
-                                height='36'
-                                width='36'
-                            />
-                        </div>
                         <div>
                             <ul className='post__header'>
                                 <li className='col col__name'><strong>
@@ -245,6 +254,7 @@ SearchResultsItem.propTypes = {
     post: React.PropTypes.object,
     user: React.PropTypes.object,
     channel: React.PropTypes.object,
+    compactDisplay: React.PropTypes.bool,
     isMentionSearch: React.PropTypes.bool,
     term: React.PropTypes.string,
     useMilitaryTime: React.PropTypes.bool.isRequired,

webapp/components/sidebar_right_menu.jsx

@@ -204,6 +204,18 @@ export default class SidebarRightMenu extends React.Component {
             }
         }
 
+        manageLink = (
+            <li>
+                <ToggleModalButton dialogType={TeamMembersModal}>
+                    <i className='icon fa fa-users'></i>
+                    <FormattedMessage
+                        id='sidebar_right_menu.viewMembers'
+                        defaultMessage='View Members'
+                    />
+                </ToggleModalButton>
+            </li>
+        );
+
         if (isAdmin) {
             teamSettingsLink = (
                 <li>
@@ -222,7 +234,10 @@ export default class SidebarRightMenu extends React.Component {
             );
             manageLink = (
                 <li>
-                    <ToggleModalButton dialogType={TeamMembersModal}>
+                    <ToggleModalButton
+                        dialogType={TeamMembersModal}
+                        dialogProps={{isAdmin}}
+                    >
                         <i className='icon fa fa-users'></i>
                         <FormattedMessage
                             id='sidebar_right_menu.manageMembers'

webapp/i18n/en.json

@@ -1500,6 +1500,7 @@
   "sidebar_right_menu.inviteNew": "Invite New Member",
   "sidebar_right_menu.logout": "Logout",
   "sidebar_right_menu.manageMembers": "Manage Members",
+  "sidebar_right_menu.viewMembers": "View Members",
   "sidebar_right_menu.nativeApps": "Download Native App",
   "sidebar_right_menu.recentMentions": "Recent Mentions",
   "sidebar_right_menu.report": "Report a Problem",

webapp/sass/components/_mentions.scss

@@ -13,10 +13,9 @@
     @include clearfix;
     cursor: pointer;
     font-size: 13px;
-    height: 39px;
+    line-height: 20px;
-    line-height: 35px;
     margin: 0;
-    padding: 3px 8px;
+    padding: 6px 10px;
     position: relative;
     white-space: nowrap;
     width: 100%;
@@ -30,14 +29,14 @@
 }
 
 .mention__image {
-    @include border-radius(32px);
+    @include border-radius(20px);
     display: block;
-    font-size: 20px;
+    font-size: 15px;
-    height: 32px;
+    height: 20px;
-    line-height: 36px;
+    line-height: 20px;
     margin-right: 6px;
     text-align: center;
-    width: 32px;
+    width: 20px;
 
     .mention--align {
         display: inline-block;

webapp/sass/components/_suggestion-list.scss

@@ -17,6 +17,7 @@
     max-height: 292px;
     overflow-x: hidden;
     overflow-y: scroll;
+    padding-bottom: 5px;
     width: 100%;
 
     .command {
@@ -47,7 +48,7 @@
 
 .suggestion-list__divider {
     line-height: 21px;
-    margin: 5px 0px 0px 5px;
+    margin: 5px 0 5px 5px;
     position: relative;
 
     &:first-child {
@@ -55,10 +56,10 @@
     }
 
     > span {
-        color: rgba(51,51,51,0.7);
+        @include opacity(.7);
-        background: #f2f4f8;
         display: inline-block;
-        padding-right: 10px;
+        font-size: .9em;
+        padding: 0 10px 0 5px;
         position: relative;
         z-index: 5;
     }
@@ -70,7 +71,7 @@
         height: 1px;
         left: 0;
         position: absolute;
-        top: 10px;
+        top: 11px;
         width: 100%;
     }
 }

webapp/sass/layout/_post.scss

@@ -545,8 +545,8 @@ body.ios {
         }
 
         .markdown__heading {
-            font-size: 1em;
+            clear: both;
-            margin: 0 0 7px;
+            margin: 7px 0;
         }
 
         .post__header {

webapp/utils/utils.jsx

@@ -547,7 +547,7 @@ export function applyTheme(theme) {
 
     if (theme.centerChannelBg) {
         changeCss('@media(min-width: 768px){.app__body .post:hover .post__header .col__reply, .app__body .post.post--hovered .post__header .col__reply', 'background:' + theme.centerChannelBg, 1);
-        changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column, .app__body .suggestion-list__divider > span', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
         changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
@@ -593,7 +593,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .popover.left>.arrow', 'border-left-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.app__body .popover.top>.arrow', 'border-top-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1);
         changeCss('.app__body .suggestion-list__content .command, .app__body .popover .popover-title', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
-        changeCss('.app__body .dropdown-menu .divider, .app__body .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1);
+        changeCss('.app__body .suggestion-list__divider:before, .app__body .dropdown-menu .divider, .app__body .search-help-popover .search-autocomplete__divider:before', 'background:' + theme.centerChannelColor, 1);
         changeCss('.app__body .custom-textarea', 'color:' + theme.centerChannelColor, 1);
         changeCss('.app__body .post-image__column', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 2);
         changeCss('.app__body .post-image__details', 'color:' + theme.centerChannelColor, 2);