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
2025-02-25 18:55:24 -06:00 · 2016-08-16 23:54:11 +05:00
parent ccf9778520
commit 4ef5c1bfb3
8 changed files with 69 additions and 26 deletions
--- a/webapp/components/search_results.jsx
+++ b/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}
--- a/webapp/components/search_results_item.jsx
+++ b/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,
--- a/webapp/components/sidebar_right_menu.jsx
+++ b/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'
--- a/webapp/i18n/en.json
+++ b/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",
--- a/webapp/sass/components/_mentions.scss
+++ b/webapp/sass/components/_mentions.scss
@@ -13,10 +13,9 @@
    @include clearfix;
    cursor: pointer;
    font-size: 13px;
-    height: 39px;
-    line-height: 35px;
+    line-height: 20px;
    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;
-    height: 32px;
-    line-height: 36px;
+    font-size: 15px;
+    height: 20px;
+    line-height: 20px;
    margin-right: 6px;
    text-align: center;
-    width: 32px;
+    width: 20px;

    .mention--align {
        display: inline-block;
--- a/webapp/sass/components/_suggestion-list.scss
+++ b/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);
-        background: #f2f4f8;
+        @include opacity(.7);
        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%;
    }
 }
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -545,8 +545,8 @@ body.ios {
        }

        .markdown__heading {
-            font-size: 1em;
-            margin: 0 0 7px;
+            clear: both;
+            margin: 7px 0;
        }

        .post__header {
--- a/webapp/utils/utils.jsx
+++ b/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);