Multiple UI improvements (#3317)

Removing break all Replacing jquery selectors and some other UI improvements Removing jquery selector
2016-06-14 22:53:47 +05:00
--- a/webapp/components/invite_member_modal.jsx
+++ b/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
--- a/webapp/components/popover_list_members.jsx
+++ b/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})}
                >
--- a/webapp/components/post_view/components/post_header.jsx
+++ b/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
--- a/webapp/components/sidebar.jsx
+++ b/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 = '';
--- a/webapp/components/sidebar_right_menu.jsx
+++ b/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'
--- a/webapp/components/tutorial/tutorial_tip.jsx
+++ b/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;
        }

--- a/webapp/i18n/en.json
+++ b/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",
--- a/webapp/sass/components/_dropdown.scss
+++ b/webapp/sass/components/_dropdown.scss
@@ -1,6 +1,7 @@
@charset 'UTF-8';

 .dropdown-menu {
+    border-radius: $border-rad;

    &.colorpicker {
        z-index: 2500;
--- a/webapp/sass/components/_modal.scss
+++ b/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;
-            box-shadow: none;
+            @include box-shadow(0 0 10px rgba($black, .5));
+            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;
--- a/webapp/sass/layout/_headers.scss
+++ b/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;

--- a/webapp/sass/layout/_post.scss
+++ b/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;
--- a/webapp/sass/layout/_sidebar-menu.scss
+++ b/webapp/sass/layout/_sidebar-menu.scss
@@ -68,13 +68,18 @@
                line-height: 40px;
                padding: 0 15px;

-                .fa,
-                .glyphicon {
+                .icon {
+                    display: inline-block;
                    left: -5px;
                    position: relative;
                    text-align: center;
                    width: 25px;
                }
+
+                .mentions {
+                    font-size: 17px;
+                    font-weight: bold;
+                }
            }
        }
    }
--- a/webapp/sass/responsive/_mobile.scss
+++ b/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;
+            }
        }
    }

--- a/webapp/sass/responsive/_tablet.scss
+++ b/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 {
-                            content: ':';
-                            display: inline-block;
-                            font-family: FontAwesome;
-                            font-size: 19px;
-                            position: absolute;
-                            right: 3px;
-                            text-rendering: auto;
-                            top: -5px;
-                        }
+                    strong {
+                        display: inline;
                    }

                    .col__reply {
@@ -176,6 +169,7 @@
            &.same--root {
                &.same--user {
                    padding-left: 70px;
+                    padding-top: 0;

                    .post__header {
                        .col__reply {