diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-03-24 09:53:13 -0400 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-03-24 09:53:13 -0400 |
commit | 1ce18f7a9afbd8b192e05e7bc8f914430feacc4b (patch) | |
tree | 75b469616ae89fc436fd932a27d0a2e4b40681f4 /webapp/components | |
parent | 68dad8c7345b12c7d0b10709ddc1873d4b40163e (diff) | |
parent | d64c75ae4a5561075d9020ff1e4e62f160660b43 (diff) | |
download | chat-1ce18f7a9afbd8b192e05e7bc8f914430feacc4b.tar.gz chat-1ce18f7a9afbd8b192e05e7bc8f914430feacc4b.tar.bz2 chat-1ce18f7a9afbd8b192e05e7bc8f914430feacc4b.zip |
Merge pull request #2526 from asaadmahmoodspin/ui-improvements
Multiple UI Improvements
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/admin_console/admin_sidebar.jsx | 467 | ||||
-rw-r--r-- | webapp/components/rhs_thread.jsx | 1 | ||||
-rw-r--r-- | webapp/components/search_bar.jsx | 1 | ||||
-rw-r--r-- | webapp/components/suggestion/suggestion_box.jsx | 10 |
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), |