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'>
-                            <img
-                                src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
-                                height='36'
-                                width='36'
-                            />
-                        </div>
+                        {profilePicContainer}
                         <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'