Multiple UI Improvements

4 files changed, 248 insertions, 231 deletions

diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx
index 8ee75e2ef..9f9e85de1 100644
--- a/webapp/components/admin_console/admin_sidebar.jsx
+++ b/webapp/components/admin_console/admin_sidebar.jsx
@@ -1,8 +1,11 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
+
 import AdminSidebarHeader from './admin_sidebar_header.jsx';
 import SelectTeamModal from './select_team_modal.jsx';
+import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -27,6 +30,12 @@ export default class AdminSidebar extends React.Component {
         };
     }
 
+    componentDidUpdate() {
+        if (!Utils.isMobile()) {
+            $('.sidebar--left .nav-pills__container').perfectScrollbar();
+        }
+    }
+
     handleClick(name, teamId, e) {
         e.preventDefault();
         this.props.selectTab(name, teamId);
@@ -242,244 +251,242 @@ export default class AdminSidebar extends React.Component {
 
         return (
             <div className='sidebar--left sidebar--collapsable'>
-                <div>
-                    <AdminSidebarHeader/>
-                    <div className='nav-pills__container'>
-                        <ul className='nav nav-pills nav-stacked'>
-                            <li>
-                                <ul className='nav nav__sub-menu'>
-                                    <li>
-                                        <h4>
-                                            <span className='icon fa fa-gear'></span>
-                                            <span>
-                                                <FormattedMessage
-                                                    id='admin.sidebar.reports'
-                                                    defaultMessage='SITE REPORTS'
-                                                />
-                                            </span>
-                                        </h4>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu padded'>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('system_analytics')}
-                                            onClick={this.handleClick.bind(this, 'system_analytics', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.view_statistics'
-                                                defaultMessage='View Statistics'
-                                            />
-                                        </a>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu'>
-                                    <li>
-                                        <h4>
-                                            <span className='icon fa fa-gear'></span>
-                                            <span>
-                                                <FormattedMessage
-                                                    id='admin.sidebar.settings'
-                                                    defaultMessage='SETTINGS'
-                                                />
-                                            </span>
-                                        </h4>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu padded'>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('service_settings')}
-                                            onClick={this.handleClick.bind(this, 'service_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.service'
-                                                defaultMessage='Service Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('team_settings')}
-                                            onClick={this.handleClick.bind(this, 'team_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.team'
-                                                defaultMessage='Team Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('sql_settings')}
-                                            onClick={this.handleClick.bind(this, 'sql_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.sql'
-                                                defaultMessage='SQL Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('email_settings')}
-                                            onClick={this.handleClick.bind(this, 'email_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.email'
-                                                defaultMessage='Email Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('image_settings')}
-                                            onClick={this.handleClick.bind(this, 'image_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.file'
-                                                defaultMessage='File Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('log_settings')}
-                                            onClick={this.handleClick.bind(this, 'log_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.log'
-                                                defaultMessage='Log Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('rate_settings')}
-                                            onClick={this.handleClick.bind(this, 'rate_settings', null)}
-                                        >
-                                            <FormattedMessage
-                                                id='admin.sidebar.rate_limit'
-                                                defaultMessage='Rate Limit Settings'
-                                            />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('privacy_settings')}
-                                            onClick={this.handleClick.bind(this, 'privacy_settings', null)}
-                                        >
+                <AdminSidebarHeader/>
+                <div className='nav-pills__container'>
+                    <ul className='nav nav-pills nav-stacked'>
+                        <li>
+                            <ul className='nav nav__sub-menu'>
+                                <li>
+                                    <h4>
+                                        <span className='icon fa fa-gear'></span>
+                                        <span>
                                             <FormattedMessage
-                                                id='admin.sidebar.privacy'
-                                                defaultMessage='Privacy Settings'
+                                                id='admin.sidebar.reports'
+                                                defaultMessage='SITE REPORTS'
                                             />
-                                        </a>
-                                    </li>
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('gitlab_settings')}
-                                            onClick={this.handleClick.bind(this, 'gitlab_settings', null)}
-                                        >
+                                        </span>
+                                    </h4>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu padded'>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('system_analytics')}
+                                        onClick={this.handleClick.bind(this, 'system_analytics', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.view_statistics'
+                                            defaultMessage='View Statistics'
+                                        />
+                                    </a>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu'>
+                                <li>
+                                    <h4>
+                                        <span className='icon fa fa-gear'></span>
+                                        <span>
                                             <FormattedMessage
-                                                id='admin.sidebar.gitlab'
-                                                defaultMessage='GitLab Settings'
+                                                id='admin.sidebar.settings'
+                                                defaultMessage='SETTINGS'
                                             />
-                                        </a>
-                                    </li>
-                                    {ldapSettings}
-                                    {complianceSettings}
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('legal_and_support_settings')}
-                                            onClick={this.handleClick.bind(this, 'legal_and_support_settings', null)}
-                                        >
+                                        </span>
+                                    </h4>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu padded'>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('service_settings')}
+                                        onClick={this.handleClick.bind(this, 'service_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.service'
+                                            defaultMessage='Service Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('team_settings')}
+                                        onClick={this.handleClick.bind(this, 'team_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.team'
+                                            defaultMessage='Team Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('sql_settings')}
+                                        onClick={this.handleClick.bind(this, 'sql_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.sql'
+                                            defaultMessage='SQL Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('email_settings')}
+                                        onClick={this.handleClick.bind(this, 'email_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.email'
+                                            defaultMessage='Email Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('image_settings')}
+                                        onClick={this.handleClick.bind(this, 'image_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.file'
+                                            defaultMessage='File Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('log_settings')}
+                                        onClick={this.handleClick.bind(this, 'log_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.log'
+                                            defaultMessage='Log Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('rate_settings')}
+                                        onClick={this.handleClick.bind(this, 'rate_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.rate_limit'
+                                            defaultMessage='Rate Limit Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('privacy_settings')}
+                                        onClick={this.handleClick.bind(this, 'privacy_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.privacy'
+                                            defaultMessage='Privacy Settings'
+                                        />
+                                    </a>
+                                </li>
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('gitlab_settings')}
+                                        onClick={this.handleClick.bind(this, 'gitlab_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.gitlab'
+                                            defaultMessage='GitLab Settings'
+                                        />
+                                    </a>
+                                </li>
+                                {ldapSettings}
+                                {complianceSettings}
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('legal_and_support_settings')}
+                                        onClick={this.handleClick.bind(this, 'legal_and_support_settings', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.support'
+                                            defaultMessage='Legal and Support Settings'
+                                        />
+                                    </a>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu'>
+                                 <li>
+                                    <h4>
+                                        <span className='icon fa fa-gear'></span>
+                                        <span>
                                             <FormattedMessage
-                                                id='admin.sidebar.support'
-                                                defaultMessage='Legal and Support Settings'
+                                                id='admin.sidebar.teams'
+                                                defaultMessage='TEAMS ({count})'
+                                                values={{
+                                                    count: count
+                                                }}
                                             />
-                                        </a>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu'>
-                                     <li>
-                                        <h4>
-                                            <span className='icon fa fa-gear'></span>
-                                            <span>
-                                                <FormattedMessage
-                                                    id='admin.sidebar.teams'
-                                                    defaultMessage='TEAMS ({count})'
-                                                    values={{
-                                                        count: count
-                                                    }}
-                                                />
-                                            </span>
-                                            <span className='menu-icon--right'>
-                                                <OverlayTrigger
-                                                    delayShow={1000}
-                                                    placement='top'
-                                                    overlay={addTeamTooltip}
-                                                >
-                                                <a
-                                                    href='#'
-                                                    onClick={this.showTeamSelect}
-                                                >
-                                                    <i
-                                                        className='fa fa-plus'
-                                                    ></i>
-                                                </a>
-                                                </OverlayTrigger>
-                                            </span>
-                                        </h4>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu padded'>
-                                    <li>
-                                        {teams}
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu'>
-                                    <li>
-                                        <h4>
-                                            <span className='icon fa fa-gear'></span>
-                                            <span>
-                                                <FormattedMessage
-                                                    id='admin.sidebar.other'
-                                                    defaultMessage='OTHER'
-                                                />
-                                            </span>
-                                        </h4>
-                                    </li>
-                                </ul>
-                                <ul className='nav nav__sub-menu padded'>
-                                    {licenseSettings}
-                                    {audits}
-                                    <li>
-                                        <a
-                                            href='#'
-                                            className={this.isSelected('logs')}
-                                            onClick={this.handleClick.bind(this, 'logs', null)}
-                                        >
+                                        </span>
+                                        <span className='menu-icon--right'>
+                                            <OverlayTrigger
+                                                delayShow={1000}
+                                                placement='top'
+                                                overlay={addTeamTooltip}
+                                            >
+                                            <a
+                                                href='#'
+                                                onClick={this.showTeamSelect}
+                                            >
+                                                <i
+                                                    className='fa fa-plus'
+                                                ></i>
+                                            </a>
+                                            </OverlayTrigger>
+                                        </span>
+                                    </h4>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu padded'>
+                                <li>
+                                    {teams}
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu'>
+                                <li>
+                                    <h4>
+                                        <span className='icon fa fa-gear'></span>
+                                        <span>
                                             <FormattedMessage
-                                                id='admin.sidebar.logs'
-                                                defaultMessage='Logs'
+                                                id='admin.sidebar.other'
+                                                defaultMessage='OTHER'
                                             />
-                                        </a>
-                                    </li>
-                                </ul>
-                            </li>
-                        </ul>
-                    </div>
+                                        </span>
+                                    </h4>
+                                </li>
+                            </ul>
+                            <ul className='nav nav__sub-menu padded'>
+                                {licenseSettings}
+                                {audits}
+                                <li>
+                                    <a
+                                        href='#'
+                                        className={this.isSelected('logs')}
+                                        onClick={this.handleClick.bind(this, 'logs', null)}
+                                    >
+                                        <FormattedMessage
+                                            id='admin.sidebar.logs'
+                                            defaultMessage='Logs'
+                                        />
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
                 </div>
 
                 <SelectTeamModal
diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index f0324d7ce..bbd9f8b28 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -54,6 +54,7 @@ export default class RhsThread extends React.Component {
         if ($('.post-right__scroll')[0]) {
             $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
         }
+        $('.sidebar--right .post-right__scroll').perfectScrollbar('update');
         this.resize();
     }
     componentWillUnmount() {
diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx
index c8dbb9d3f..caaf0f844 100644
--- a/webapp/components/search_bar.jsx
+++ b/webapp/components/search_bar.jsx
@@ -184,6 +184,7 @@ class SearchBar extends React.Component {
                         onUserInput={this.handleUserInput}
                         listComponent={SearchSuggestionList}
                         providers={this.suggestionProviders}
+                        type='search'
                     />
                     {isSearching}
                     <Popover
diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx
index b7f0e3a36..dbec024ac 100644
--- a/webapp/components/suggestion/suggestion_box.jsx
+++ b/webapp/components/suggestion/suggestion_box.jsx
@@ -139,6 +139,14 @@ export default class SuggestionBox extends React.Component {
                     {...newProps}
                 />
             );
+        } else if (this.props.type === 'search') {
+            textbox = (
+                <input
+                    ref='textbox'
+                    type='search'
+                    {...newProps}
+                />
+            );
         } else if (this.props.type === 'textarea') {
             textbox = (
                 <TextareaAutosize
@@ -166,7 +174,7 @@ SuggestionBox.defaultProps = {
 
 SuggestionBox.propTypes = {
     listComponent: React.PropTypes.func.isRequired,
-    type: React.PropTypes.oneOf(['input', 'textarea']).isRequired,
+    type: React.PropTypes.oneOf(['input', 'textarea', 'search']).isRequired,
     value: React.PropTypes.string.isRequired,
     onUserInput: React.PropTypes.func,
     providers: React.PropTypes.arrayOf(React.PropTypes.object),