Multiple UI improvements (#3317)

Removing break all

Replacing jquery selectors and some other UI improvements

Removing jquery selector

webapp/components/invite_member_modal.jsx

@@ -286,7 +286,7 @@ class InviteMemberModal extends React.Component {
                     lastNameClass += ' has-error';
                 }
                 nameFields = (
-                    <div className='row--invite'>
+                    <div className='row row--invite'>
                         <div className='col-sm-6'>
                             <div className={firstNameClass}>
                                 <input

webapp/components/popover_list_members.jsx

@@ -142,6 +142,7 @@ export default class PopoverListMembers extends React.Component {
             <div>
                 <div
                     id='member_popover'
+                    className='member-popover__trigger'
                     ref='member_popover_target'
                     onClick={(e) => this.setState({popoverTarget: e.target, showPopover: !this.state.showPopover})}
                 >

webapp/components/post_view/components/post_header.jsx

@@ -26,6 +26,7 @@ export default class PostHeader extends React.Component {
             />
         );
         let botIndicator;
+        let colon;
 
         if (post.props && post.props.from_webhook) {
             if (post.props.override_username && global.window.mm_config.EnablePostUsernameOverride === 'true') {
@@ -50,9 +51,13 @@ export default class PostHeader extends React.Component {
             );
         }
 
+        if (this.props.compactDisplay) {
+            colon = (<strong>{':'}</strong>);
+        }
+
         return (
             <ul className='post__header'>
-                <li className='col col__name'>{userProfile}</li>
+                <li className='col col__name'>{userProfile}{colon}</li>
                 {botIndicator}
                 <li className='col'>
                     <PostInfo

webapp/components/sidebar.jsx

@@ -370,6 +370,15 @@ export default class Sidebar extends React.Component {
         this.setState({showDirectChannelsModal: false});
     }
 
+    openLeftSidebar() {
+        if (Utils.isMobile()) {
+            setTimeout(() => {
+                document.querySelector('.app__body .inner-wrap').classList.add('move--right');
+                document.querySelector('.app__body .sidebar--left').classList.add('move--right');
+            });
+        }
+    }
+
     createTutorialTip() {
         const screens = [];
 
@@ -535,6 +544,7 @@ export default class Sidebar extends React.Component {
         let tutorialTip = null;
         if (this.state.showTutorialTip && channel.name === Constants.DEFAULT_CHANNEL) {
             tutorialTip = this.createTutorialTip();
+            this.openLeftSidebar();
         }
 
         let link = '';

webapp/components/sidebar_right_menu.jsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import TeamMembersModal from './team_members_modal.jsx';
 import ToggleModalButton from './toggle_modal_button.jsx';
 import UserSettingsModal from './user_settings/user_settings_modal.jsx';
@@ -14,6 +15,7 @@ import * as GlobalActions from 'actions/global_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 
+const ActionTypes = Constants.ActionTypes;
 const Preferences = Constants.Preferences;
 const TutorialSteps = Constants.TutorialSteps;
 
@@ -30,6 +32,7 @@ export default class SidebarRightMenu extends React.Component {
 
         this.onPreferenceChange = this.onPreferenceChange.bind(this);
         this.handleAboutModal = this.handleAboutModal.bind(this);
+        this.searchMentions = this.searchMentions.bind(this);
         this.aboutModalDismissed = this.aboutModalDismissed.bind(this);
 
         const state = this.getStateFromStores();
@@ -60,13 +63,82 @@ export default class SidebarRightMenu extends React.Component {
     getStateFromStores() {
         const tutorialStep = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 999);
 
-        return {showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && Utils.isMobile()};
+        return {
+            currentUser: UserStore.getCurrentUser(),
+            showTutorialTip: tutorialStep === TutorialSteps.MENU_POPOVER && Utils.isMobile()
+        };
     }
 
     onPreferenceChange() {
         this.setState(this.getStateFromStores());
     }
 
+    searchMentions(e) {
+        e.preventDefault();
+
+        const user = this.state.currentUser;
+
+        let terms = '';
+        if (user.notify_props && user.notify_props.mention_keys) {
+            const termKeys = UserStore.getMentionKeys(user.id);
+
+            if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) {
+                termKeys.splice(termKeys.indexOf('@all'), 1);
+            }
+
+            if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) {
+                termKeys.splice(termKeys.indexOf('@channel'), 1);
+            }
+            terms = termKeys.join(' ');
+        }
+
+        this.hideSidebars();
+
+        AppDispatcher.handleServerAction({
+            type: ActionTypes.RECEIVED_SEARCH_TERM,
+            term: terms,
+            do_search: true,
+            is_mention_search: true
+        });
+    }
+
+    closeLeftSidebar() {
+        if (Utils.isMobile()) {
+            setTimeout(() => {
+                document.querySelector('.app__body .inner-wrap').classList.remove('move--right');
+                document.querySelector('.app__body .sidebar--left').classList.remove('move--right');
+            });
+        }
+    }
+
+    openRightSidebar() {
+        if (Utils.isMobile()) {
+            setTimeout(() => {
+                document.querySelector('.app__body .inner-wrap').classList.add('move--left-small');
+                document.querySelector('.app__body .sidebar--menu').classList.add('move--left');
+            });
+        }
+    }
+
+    hideSidebars() {
+        if (Utils.isMobile()) {
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_SEARCH,
+                results: null
+            });
+
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_POST_SELECTED,
+                postId: null
+            });
+
+            document.querySelector('.app__body .inner-wrap').classList.remove('move--right', 'move--left', 'move--left-small');
+            document.querySelector('.app__body .sidebar--left').classList.remove('move--right');
+            document.querySelector('.app__body .sidebar--right').classList.remove('move--left');
+            document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
+        }
+    }
+
     render() {
         var teamLink = '';
         var inviteLink = '';
@@ -87,7 +159,7 @@ export default class SidebarRightMenu extends React.Component {
                         href='#'
                         onClick={GlobalActions.showInviteMemberModal}
                     >
-                        <i className='fa fa-user-plus'></i>
+                        <i className='icon fa fa-user-plus'></i>
                         <FormattedMessage
                             id='sidebar_right_menu.inviteNew'
                             defaultMessage='Invite New Member'
@@ -103,7 +175,7 @@ export default class SidebarRightMenu extends React.Component {
                             href='#'
                             onClick={GlobalActions.showGetTeamInviteLinkModal}
                         >
-                            <i className='glyphicon glyphicon-link'></i>
+                            <i className='icon glyphicon glyphicon-link'></i>
                             <FormattedMessage
                                 id='sidebar_right_menu.teamLink'
                                 defaultMessage='Get Team Invite Link'
@@ -122,7 +194,7 @@ export default class SidebarRightMenu extends React.Component {
                         data-toggle='modal'
                         data-target='#team_settings'
                     >
-                        <i className='fa fa-globe'></i>
+                        <i className='icon fa fa-globe'></i>
                         <FormattedMessage
                             id='sidebar_right_menu.teamSettings'
                             defaultMessage='Team Settings'
@@ -133,7 +205,7 @@ export default class SidebarRightMenu extends React.Component {
             manageLink = (
                 <li>
                     <ToggleModalButton dialogType={TeamMembersModal}>
-                        <i className='fa fa-users'></i>
+                        <i className='icon fa fa-users'></i>
                         <FormattedMessage
                             id='sidebar_right_menu.manageMembers'
                             defaultMessage='Manage Members'
@@ -149,7 +221,7 @@ export default class SidebarRightMenu extends React.Component {
                     <Link
                         to={'/admin_console'}
                     >
-                        <i className='fa fa-wrench'></i>
+                        <i className='icon fa fa-wrench'></i>
                         <FormattedMessage
                             id='sidebar_right_menu.console'
                             defaultMessage='System Console'
@@ -177,7 +249,7 @@ export default class SidebarRightMenu extends React.Component {
                         rel='noopener noreferrer'
                         to={global.window.mm_config.HelpLink}
                     >
-                        <i className='fa fa-question'></i>
+                        <i className='icon fa fa-question'></i>
                         <FormattedMessage
                             id='sidebar_right_menu.help'
                             defaultMessage='Help'
@@ -196,7 +268,7 @@ export default class SidebarRightMenu extends React.Component {
                         rel='noopener noreferrer'
                         to={global.window.mm_config.ReportAProblemLink}
                     >
-                        <i className='fa fa-phone'></i>
+                        <i className='icon fa fa-phone'></i>
                         <FormattedMessage
                             id='sidebar_right_menu.report'
                             defaultMessage='Report a Problem'
@@ -209,6 +281,8 @@ export default class SidebarRightMenu extends React.Component {
         let tutorialTip = null;
         if (this.state.showTutorialTip) {
             tutorialTip = createMenuTip((e) => e.preventDefault(), true);
+            this.closeLeftSidebar();
+            this.openRightSidebar();
         }
 
         return (
@@ -228,12 +302,24 @@ export default class SidebarRightMenu extends React.Component {
                 <div className='nav-pills__container'>
                     {tutorialTip}
                     <ul className='nav nav-pills nav-stacked'>
+                        <li>
+                            <a
+                                href='#'
+                                onClick={this.searchMentions}
+                            >
+                                <i className='icon mentions'>{'@'}</i>
+                                <FormattedMessage
+                                    id='sidebar_right_menu.recentMentions'
+                                    defaultMessage='Recent Mentions'
+                                />
+                            </a>
+                        </li>
                         <li>
                             <a
                                 href='#'
                                 onClick={() => this.setState({showUserSettingsModal: true})}
                             >
-                                <i className='fa fa-cog'></i>
+                                <i className='icon fa fa-cog'></i>
                                 <FormattedMessage
                                     id='sidebar_right_menu.accountSettings'
                                     defaultMessage='Account Settings'
@@ -247,7 +333,7 @@ export default class SidebarRightMenu extends React.Component {
                         {consoleLink}
                         <li>
                             <Link to='/select_team'>
-                                <i className='fa fa-exchange'></i>
+                                <i className='icon fa fa-exchange'></i>
                                 <FormattedMessage
                                     id='sidebar_right_menu.switch_team'
                                     defaultMessage='Team Selection'
@@ -260,7 +346,7 @@ export default class SidebarRightMenu extends React.Component {
                                 href='#'
                                 onClick={GlobalActions.emitUserLoggedOutEvent}
                             >
-                                <i className='fa fa-sign-out'></i>
+                                <i className='icon fa fa-sign-out'></i>
                                 <FormattedMessage
                                     id='sidebar_right_menu.logout'
                                     defaultMessage='Logout'
@@ -275,7 +361,7 @@ export default class SidebarRightMenu extends React.Component {
                                 href='#'
                                 onClick={this.handleAboutModal}
                             >
-                                <i className='fa fa-info'></i>
+                                <i className='icon fa fa-info'></i>
                                 <FormattedMessage
                                     id='navbar_dropdown.about'
                                     defaultMessage='About Mattermost'

webapp/components/tutorial/tutorial_tip.jsx

@@ -10,6 +10,7 @@ import Constants from 'utils/constants.jsx';
 import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
 
 const Preferences = Constants.Preferences;
+import * as Utils from 'utils/utils.jsx';
 
 import {Overlay} from 'react-bootstrap';
 
@@ -47,8 +48,17 @@ export default class TutorialTip extends React.Component {
             return;
         }
 
+        this.closeRightSidebar();
         this.toggle();
     }
+    closeRightSidebar() {
+        if (Utils.isMobile()) {
+            setTimeout(() => {
+                document.querySelector('.app__body .inner-wrap').classList.remove('move--left-small');
+                document.querySelector('.app__body .sidebar--menu').classList.remove('move--left');
+            });
+        }
+    }
     skipTutorial(e) {
         e.preventDefault();
 
@@ -94,7 +104,7 @@ export default class TutorialTip extends React.Component {
         }
 
         var tutorialGifImage = tutorialGif;
-        if (this.props.overlayClass === 'tip-overlay--header' || this.props.overlayClass === 'tip-overlay--sidebar') {
+        if (this.props.overlayClass === 'tip-overlay--header' || this.props.overlayClass === 'tip-overlay--sidebar' || this.props.overlayClass === 'tip-overlay--header--up') {
             tutorialGifImage = tutorialGifWhite;
         }
 

webapp/i18n/en.json

@@ -1158,6 +1158,7 @@
   "sidebar.unreadAbove": "Unread post(s) above",
   "sidebar.unreadBelow": "Unread post(s) below",
   "sidebar_header.tutorial": "<h4>Main Menu</h4><p>The <strong>Main Menu</strong> is where you can <strong>Invite New Members</strong>, access your <strong>Account Settings</strong> and set your <strong>Theme Color</strong>.</p><p>Team administrators can also access their <strong>Team Settings</strong> from this menu.</p><p>System administrators will find a <strong>System Console</strong> option to administrate the entire system.</p>",
+  "sidebar_right_menu.recentMentions": "Recent Mentions",
   "sidebar_right_menu.accountSettings": "Account Settings",
   "sidebar_right_menu.console": "System Console",
   "sidebar_right_menu.help": "Help",

webapp/sass/components/_dropdown.scss

@@ -1,6 +1,7 @@
 @charset 'UTF-8';
 
 .dropdown-menu {
+    border-radius: $border-rad;
 
     &.colorpicker {
         z-index: 2500;

webapp/sass/components/_modal.scss

@@ -29,6 +29,14 @@
         }
     }
 
+    .row--invite {
+        .col-sm-6 {
+            &:first-child {
+                padding-right: 0;
+            }
+        }
+    }
+
     .modal__hint {
         @include opacity(.8);
         display: block;
@@ -194,8 +202,8 @@
         }
 
         .modal-content {
-            border-radius: 0;
+            @include box-shadow(0 0 10px rgba($black, .5));
-            box-shadow: none;
+            border-radius: $border-rad;
         }
 
         .modal-chevron-icon {
@@ -417,24 +425,6 @@
         }
     }
 
-
-    .invite {
-        margin-right: 40px;
-    }
-
-    .row--invite {
-        @include clearfix;
-        margin-right: 40px;
-
-        .col-sm-6 {
-            padding: 0 0 0 15px;
-
-            &:first-child {
-                padding-left: 0;
-            }
-        }
-    }
-
     .more-modal {
         .user-list {
             margin-top: 10px;

webapp/sass/layout/_headers.scss

@@ -2,6 +2,87 @@
 
 .channel-header {
     @include flex(0 0 56px);
+    border-left: none;
+    font-size: 14px;
+    line-height: 56px;
+    width: 100%;
+
+    .member-popover__trigger {
+        cursor: pointer;
+        padding-right: 10px;
+        text-align: right;
+        width: 60px;
+
+        .fa {
+            font-size: 16px;
+            margin-left: 4px;
+        }
+    }
+
+    &.alt {
+        margin: 0;
+
+        th {
+            font-weight: normal !important;
+        }
+
+        td {
+            border: none;
+        }
+    }
+
+    th {
+        text-align: center;
+
+        &:first-child {
+            border-left: none;
+            padding-left: 15px;
+            padding-right: 1em;
+            text-align: left !important;
+            width: 100%;
+        }
+
+        &:last-child {
+            width: 8.9%;
+        }
+    }
+
+    td {
+        font-size: 13px;
+        padding: 5px 25px 5px !important;
+        text-align: center !important;
+
+        &:first-child {
+            text-align: left !important;
+        }
+    }
+
+    .heading {
+        display: inline-block;
+        font-size: 1.3em;
+        font-weight: 600;
+        margin: 0 4px 0 0;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+    }
+
+    .caret {
+        margin-top: 3px;
+    }
+
+    .more {
+        color: #81848b;
+        display: inline-block;
+        font-size: 13px;
+        text-transform: capitalize;
+        vertical-align: top;
+    }
+
+    .disabled {
+        color: #999999;
+    }
 }
 
 .row {
@@ -256,90 +337,6 @@
     }
 }
 
-.channel-header {
-    border-left: none;
-    font-size: 14px;
-    line-height: 56px;
-    width: 100%;
-
-    #member_popover {
-        color: #999999;
-        cursor: pointer;
-        width: 50px;
-
-        .fa {
-            font-size: 16px;
-            margin-left: 4px;
-        }
-    }
-
-    &.alt {
-        margin: 0;
-
-        th {
-            font-weight: normal !important;
-        }
-
-        td {
-            border: none;
-        }
-    }
-
-    th {
-        text-align: center;
-
-        &:first-child {
-            border-left: none;
-            padding-left: 15px;
-            padding-right: 1em;
-            text-align: left !important;
-            width: 100%;
-        }
-
-        &:last-child {
-            width: 8.9%;
-        }
-    }
-
-    td {
-        font-size: 13px;
-        padding: 5px 25px 5px !important;
-        text-align: center !important;
-
-        &:first-child {
-            text-align: left !important;
-        }
-    }
-
-    .heading {
-        color: #555555;
-        display: inline-block;
-        font-size: 1.3em;
-        font-weight: 600;
-        margin: 0 4px 0 0;
-        max-width: 100%;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-    }
-
-    .caret {
-        margin-top: 3px;
-    }
-
-    .more {
-        color: #81848b;
-        display: inline-block;
-        font-size: 13px;
-        text-transform: capitalize;
-        vertical-align: top;
-    }
-
-    .disabled {
-        color: #999999;
-    }
-}
-
 .channel-header__navbar {
     font-size: 16px;
 

webapp/sass/layout/_post.scss

@@ -486,7 +486,6 @@ body.ios {
     &.post--compact {
         &.post--thread {
             .post__header {
-                height: 22px;
                 padding-top: 3px;
             }
         }
@@ -510,6 +509,10 @@ body.ios {
             margin: 0 0 7px;
         }
 
+        .post__header {
+            height: 22px;
+        }
+
         .post__body {
             background: transparent !important;
             line-height: 1.6;
@@ -537,10 +540,6 @@ body.ios {
             }
         }
 
-        .post-image__columns {
-            clear: both;
-        }
-
         .post-image__column {
             @include border-radius(2px);
             font-size: .9em;
@@ -765,8 +764,15 @@ body.ios {
                 @include clearfix;
                 max-width: 200px;
                 text-overflow: ellipsis;
+                vertical-align: top;
                 white-space: nowrap;
             }
+
+            strong {
+                display: none;
+                font-weight: 900;
+                margin-left: 2px;
+            }
         }
 
         .col__reply {
@@ -1036,6 +1042,7 @@ body.ios {
         display: inline-block;
         margin-right: 6px;
         visibility: hidden;
+
         svg {
             fill: inherit;
             position: relative;

webapp/sass/layout/_sidebar-menu.scss

@@ -68,13 +68,18 @@
                 line-height: 40px;
                 padding: 0 15px;
 
-                .fa,
+                .icon {
-                .glyphicon {
+                    display: inline-block;
                     left: -5px;
                     position: relative;
                     text-align: center;
                     width: 25px;
                 }
+
+                .mentions {
+                    font-size: 17px;
+                    font-weight: bold;
+                }
             }
         }
     }

webapp/sass/responsive/_mobile.scss

@@ -136,6 +136,13 @@
             }
         }
 
+        &.post--comment {
+            .post__body {
+                margin-top: 5px;
+                padding: 2px 0 0 7px;
+            }
+        }
+
         &.other--root {
             &.post--comment {
                 .post__header {
@@ -309,7 +316,9 @@
 
     .row--invite {
         .col-sm-6 {
-            padding: 0;
+            &:first-child {
+                padding-right: 15px;
+            }
         }
     }
 

webapp/sass/responsive/_tablet.scss

@@ -117,20 +117,13 @@
                     .col__name {
                         font-weight: bold;
                         margin-right: 2px;
-                        padding-right: 10px;
+                        padding-right: 5px;
                         position: relative;
                         z-index: 1;
+                    }
 
-                        &:after {
+                    strong {
-                            content: ':';
+                        display: inline;
-                            display: inline-block;
-                            font-family: FontAwesome;
-                            font-size: 19px;
-                            position: absolute;
-                            right: 3px;
-                            text-rendering: auto;
-                            top: -5px;
-                        }
                     }
 
                     .col__reply {
@@ -176,6 +169,7 @@
             &.same--root {
                 &.same--user {
                     padding-left: 70px;
+                    padding-top: 0;
 
                     .post__header {
                         .col__reply {