From e60f6f3b137839ed603a1b5d45cf658b6570ff91 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaad@spinpunch.com>
Date: Wed, 23 Mar 2016 04:06:08 +0500
Subject: Multiple UI improvements

---
 webapp/components/access_history_modal.jsx         |  8 ++------
 webapp/components/activity_log_modal.jsx           |  8 ++------
 webapp/components/channel_header.jsx               |  1 +
 webapp/components/invite_member_modal.jsx          |  7 -------
 webapp/components/popover_list_members.jsx         |  6 ++++++
 webapp/components/rhs_thread.jsx                   |  3 +++
 webapp/components/search_results.jsx               |  3 +++
 webapp/components/sidebar.jsx                      |  3 +++
 webapp/components/team_settings_modal.jsx          |  8 ++++++++
 webapp/components/user_list.jsx                    | 15 ++++++++++-----
 .../user_settings/user_settings_modal.jsx          | 22 +++++++---------------
 webapp/package.json                                |  6 +++---
 webapp/root.jsx                                    |  1 +
 webapp/sass/components/_modal.scss                 |  1 +
 webapp/sass/layout/_headers.scss                   |  4 ++++
 webapp/sass/layout/_navigation.scss                |  2 +-
 webapp/sass/layout/_sidebar-left.scss              |  1 -
 webapp/sass/routes/_admin-console.scss             | 17 ++++++++++-------
 webapp/utils/utils.jsx                             |  2 +-
 19 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/webapp/components/access_history_modal.jsx b/webapp/components/access_history_modal.jsx
index 94a10c97f..9c49c3879 100644
--- a/webapp/components/access_history_modal.jsx
+++ b/webapp/components/access_history_modal.jsx
@@ -2,7 +2,6 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
-import ReactDOM from 'react-dom';
 import {Modal} from 'react-bootstrap';
 import LoadingScreen from './loading_screen.jsx';
 import AuditTable from './audit_table.jsx';
@@ -36,11 +35,8 @@ class AccessHistoryModal extends React.Component {
     }
     onShow() {
         AsyncClient.getAudits();
-
-        if ($(window).width() > 768) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
-        } else {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
+        if (!Utils.isMobile()) {
+            $('.modal-body').perfectScrollbar();
         }
     }
     onHide() {
diff --git a/webapp/components/activity_log_modal.jsx b/webapp/components/activity_log_modal.jsx
index 9a4ff3ef2..f1dd4a26a 100644
--- a/webapp/components/activity_log_modal.jsx
+++ b/webapp/components/activity_log_modal.jsx
@@ -2,7 +2,6 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
-import ReactDOM from 'react-dom';
 import UserStore from 'stores/user_store.jsx';
 import * as Client from 'utils/client.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
@@ -56,11 +55,8 @@ export default class ActivityLogModal extends React.Component {
     }
     onShow() {
         AsyncClient.getSessions();
-
-        if ($(window).width() > 768) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
-        } else {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 150);
+        if (!Utils.isMobile()) {
+            $('.modal-body').perfectScrollbar();
         }
     }
     onHide() {
diff --git a/webapp/components/channel_header.jsx b/webapp/components/channel_header.jsx
index 7cd713942..369fa2dbb 100644
--- a/webapp/components/channel_header.jsx
+++ b/webapp/components/channel_header.jsx
@@ -80,6 +80,7 @@ export default class ChannelHeader extends React.Component {
         SearchStore.addSearchChangeListener(this.onListenerChange);
         PreferenceStore.addChangeListener(this.onListenerChange);
         UserStore.addChangeListener(this.onListenerChange);
+        $('.sidebar--left .dropdown-menu').perfectScrollbar();
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.onListenerChange);
diff --git a/webapp/components/invite_member_modal.jsx b/webapp/components/invite_member_modal.jsx
index d567183ac..1f8fd6133 100644
--- a/webapp/components/invite_member_modal.jsx
+++ b/webapp/components/invite_member_modal.jsx
@@ -1,7 +1,6 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import * as utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
@@ -176,12 +175,6 @@ class InviteMemberModal extends React.Component {
         });
     }
 
-    componentDidUpdate(prevProps, prevState) {
-        if (!prevState.show && this.state.show) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
-        }
-    }
-
     addInviteFields() {
         var count = this.state.idCount + 1;
         var inviteIds = this.state.inviteIds;
diff --git a/webapp/components/popover_list_members.jsx b/webapp/components/popover_list_members.jsx
index 7d048019c..819c7f590 100644
--- a/webapp/components/popover_list_members.jsx
+++ b/webapp/components/popover_list_members.jsx
@@ -1,6 +1,8 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
+
 import UserStore from 'stores/user_store.jsx';
 import {Popover, Overlay} from 'react-bootstrap';
 import * as Utils from 'utils/utils.jsx';
@@ -20,6 +22,10 @@ export default class PopoverListMembers extends React.Component {
         this.closePopover = this.closePopover.bind(this);
     }
 
+    componentDidUpdate() {
+        $('.member-list__popover .popover-content').perfectScrollbar();
+    }
+
     componentWillMount() {
         this.setState({showPopover: false});
     }
diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index 2760765eb..f0324d7ce 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -46,6 +46,9 @@ export default class RhsThread extends React.Component {
         window.addEventListener('resize', this.handleResize);
 
         this.mounted = true;
+        if (!Utils.isMobile()) {
+            $('.sidebar--right .post-right__scroll').perfectScrollbar();
+        }
     }
     componentDidUpdate() {
         if ($('.post-right__scroll')[0]) {
diff --git a/webapp/components/search_results.jsx b/webapp/components/search_results.jsx
index 7619e41cd..c5baf50ef 100644
--- a/webapp/components/search_results.jsx
+++ b/webapp/components/search_results.jsx
@@ -61,6 +61,9 @@ export default class SearchResults extends React.Component {
         UserStore.addChangeListener(this.onUserChange);
         this.resize();
         window.addEventListener('resize', this.handleResize);
+        if (!Utils.isMobile()) {
+            $('.sidebar--right .search-items-container').perfectScrollbar();
+        }
     }
 
     shouldComponentUpdate(nextProps, nextState) {
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index 49ae1bec6..f9f31092f 100644
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -163,6 +163,9 @@ export default class Sidebar extends React.Component {
     componentDidUpdate() {
         this.updateTitle();
         this.updateUnreadIndicators();
+        if (!Utils.isMobile()) {
+            $('.sidebar--left .nav-pills__container').perfectScrollbar();
+        }
     }
     componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
diff --git a/webapp/components/team_settings_modal.jsx b/webapp/components/team_settings_modal.jsx
index 7dbbd680a..c19787993 100644
--- a/webapp/components/team_settings_modal.jsx
+++ b/webapp/components/team_settings_modal.jsx
@@ -5,6 +5,7 @@ import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import SettingsSidebar from './settings_sidebar.jsx';
 import TeamSettings from './team_settings.jsx';
+import * as Utils from 'utils/utils.jsx';
 
 import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl';
 
@@ -49,9 +50,16 @@ class TeamSettingsModal extends React.Component {
                 $('.modal-dialog.display--content').removeClass('display--content');
             }, 500);
         });
+
+        if (!Utils.isMobile()) {
+            $('.settings-modal .settings-content').perfectScrollbar();
+        }
     }
     updateTab(tab) {
         this.setState({activeTab: tab, activeSection: ''});
+        if (!Utils.isMobile()) {
+            $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
+        }
     }
     updateSection(section) {
         this.setState({activeSection: section});
diff --git a/webapp/components/user_list.jsx b/webapp/components/user_list.jsx
index b5d42decc..3652723be 100644
--- a/webapp/components/user_list.jsx
+++ b/webapp/components/user_list.jsx
@@ -24,11 +24,16 @@ export default class UserList extends React.Component {
             });
         } else {
             content = (
-                <div key='no-users-found'>
-                    <FormattedMessage
-                        id='user_list.notFound'
-                        defaultMessage='No users found :('
-                    />
+                <div
+                    key='no-users-found'
+                    className='no-channel-message'
+                >
+                    <p className='primary-message'>
+                        <FormattedMessage
+                            id='user_list.notFound'
+                            defaultMessage='No users found :('
+                        />
+                    </p>
                 </div>
             );
         }
diff --git a/webapp/components/user_settings/user_settings_modal.jsx b/webapp/components/user_settings/user_settings_modal.jsx
index bd1df6ea5..d1c1f0fe2 100644
--- a/webapp/components/user_settings/user_settings_modal.jsx
+++ b/webapp/components/user_settings/user_settings_modal.jsx
@@ -64,7 +64,6 @@ class UserSettingsModal extends React.Component {
     constructor(props) {
         super(props);
 
-        this.handleShow = this.handleShow.bind(this);
         this.handleHide = this.handleHide.bind(this);
         this.handleHidden = this.handleHidden.bind(this);
         this.handleCollapse = this.handleCollapse.bind(this);
@@ -95,24 +94,13 @@ class UserSettingsModal extends React.Component {
     }
 
     componentDidMount() {
-        if (this.props.show) {
-            this.handleShow();
-        }
         UserStore.addChangeListener(this.onUserChanged);
     }
 
-    componentDidUpdate(prevProps) {
-        if (this.props.show && !prevProps.show) {
-            this.handleShow();
-        }
+    componentDidUpdate() {
         UserStore.removeChangeListener(this.onUserChanged);
-    }
-
-    handleShow() {
-        if ($(window).width() > 768) {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200);
-        } else {
-            $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 50);
+        if (!Utils.isMobile()) {
+            $('.settings-modal .modal-body').perfectScrollbar();
         }
     }
 
@@ -222,6 +210,10 @@ class UserSettingsModal extends React.Component {
                 active_section: ''
             });
         }
+
+        if (!Utils.isMobile()) {
+            $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
+        }
     }
 
     updateSection(section, skipConfirm) {
diff --git a/webapp/package.json b/webapp/package.json
index cdfba8ef0..943333e54 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -53,8 +53,8 @@
     "webpack": "webpack/webpack#master"
   },
   "scripts": {
-      "check": "eslint --ext \".jsx\" --ignore-pattern node_modules --quiet .",
-      "build": "webpack",
-      "run": "webpack --progress --watch"
+    "check": "eslint --ext \".jsx\" --ignore-pattern node_modules --quiet .",
+    "build": "webpack",
+    "run": "webpack --progress --watch"
   }
 }
diff --git a/webapp/root.jsx b/webapp/root.jsx
index b0a6ae1ac..2f0ef441c 100644
--- a/webapp/root.jsx
+++ b/webapp/root.jsx
@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import $ from 'jquery';
+require('perfect-scrollbar/jquery')($);
 
 import 'bootstrap/dist/css/bootstrap.css';
 import 'jasny-bootstrap/dist/css/jasny-bootstrap.css';
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 94378aabe..4e2049857 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -9,6 +9,7 @@
 }
 
 .modal-body {
+    max-height: calc(90vh - 62px);
     overflow: auto;
     padding: 20px 15px;
 
diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss
index 9b631d00f..e75d2556b 100644
--- a/webapp/sass/layout/_headers.scss
+++ b/webapp/sass/layout/_headers.scss
@@ -134,6 +134,10 @@
                 @include alpha-property(background, $black, .1);
             }
 
+            a {
+                text-decoration: none;
+            }
+
             .user__name {
                 color: $white;
             }
diff --git a/webapp/sass/layout/_navigation.scss b/webapp/sass/layout/_navigation.scss
index 87e4b4d27..3daf6e56b 100644
--- a/webapp/sass/layout/_navigation.scss
+++ b/webapp/sass/layout/_navigation.scss
@@ -89,7 +89,7 @@
 
                 &.info-popover {
                     @include background-size(100% 100%);
-                    background: url('../images/info__icon.png');
+                    background-image: url('../images/info__icon.png');
                     cursor: pointer;
                     height: 19px;
                     position: relative;
diff --git a/webapp/sass/layout/_sidebar-left.scss b/webapp/sass/layout/_sidebar-left.scss
index 4c65d0a65..3a5e74570 100644
--- a/webapp/sass/layout/_sidebar-left.scss
+++ b/webapp/sass/layout/_sidebar-left.scss
@@ -1,7 +1,6 @@
 @charset 'UTF-8';
 
 .sidebar--left {
-    background: #fafafa;
     border-right: $border-gray;
     height: 100%;
     left: 0;
diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss
index 0b47e5ab6..7e53713c0 100644
--- a/webapp/sass/routes/_admin-console.scss
+++ b/webapp/sass/routes/_admin-console.scss
@@ -10,12 +10,8 @@
         width: 100%;
     }
 
-    .row {
-        margin: 0;
-    }
-
     h3 {
-        border-bottom: 1px solid #ddd;
+        border-bottom: 1px solid alpha-color($black, .1);
         font-weight: 600;
         margin: 1em 0;
         padding-bottom: .5em;
@@ -75,11 +71,18 @@
                         width: 17px;
                     }
 
+                    &.divider {
+                        @include alpha-property(background, $black, .1);
+                    }
+
                     > a {
                         &:hover,
-                        &.active,
                         &:focus {
-                            background-color: #eaeaea;
+                            @include alpha-property(background, $black, .1);
+                        }
+
+                        &.active {
+                            background-color: transparent;
                         }
                     }
 
diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx
index 95a0f99d5..2e9f2b773 100644
--- a/webapp/utils/utils.jsx
+++ b/webapp/utils/utils.jsx
@@ -681,7 +681,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelBg) {
-        changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content, .modal .modal-back', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.app__content, .markdown__table, .markdown__table tbody tr, .suggestion-list__content, .modal .modal-content', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
         changeCss('.date-separator .separator__text, .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
-- 
cgit v1.2.3-1-g7c22