diff options
Diffstat (limited to 'webapp')
-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 | ||||
-rw-r--r-- | webapp/sass/components/_buttons.scss | 10 | ||||
-rw-r--r-- | webapp/sass/components/_search.scss | 16 | ||||
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 113 |
7 files changed, 327 insertions, 291 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), diff --git a/webapp/sass/components/_buttons.scss b/webapp/sass/components/_buttons.scss index efef11ce9..5d95759a2 100644 --- a/webapp/sass/components/_buttons.scss +++ b/webapp/sass/components/_buttons.scss @@ -15,6 +15,16 @@ } } + &.btn-danger { + color: $white; + + &:hover, + &:focus, + &:active { + color: $white; + } + } + &.btn-inactive { background: $light-gray; border-color: transparent; diff --git a/webapp/sass/components/_search.scss b/webapp/sass/components/_search.scss index 499c4fad4..98c27ecdc 100644 --- a/webapp/sass/components/_search.scss +++ b/webapp/sass/components/_search.scss @@ -6,17 +6,19 @@ } } -.search-bar__container { - @include flex(0 0 56px); - padding: 12px 8px 0 0; - - .sidebar--right { - &.move--left & { +.sidebar--right { + &.move--left { + .search-bar__container { padding-right: 42px; } } } +.search-bar__container { + @include flex(0 0 56px); + padding: 12px 8px 0 0; +} + .glyphicon-refresh-animate { @include animation(spin .7s infinite linear); } @@ -95,7 +97,7 @@ } .glyphicon-refresh-animate { - color: $dark-gray; + @include opacity(0.5); position: absolute; right: 27px; top: 27px; diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index 53ea6d329..0e1a471cf 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -14,23 +14,23 @@ .post { .post__dropdown { + display: inline-block; + height: 20px; line-height: 9px; + text-align: center; text-decoration: none; width: 20px; - display: inline-block; - text-align: center; - height: 20px; &:after { - font-size: 20px; content: '...'; + font-size: 20px; top: -3px; } } .comment-icon__container { - visibility: visible; display: none; + visibility: visible; &.icon--show { display: inline-block; @@ -57,8 +57,8 @@ } .post__reply { - margin-right: 20px; float: right; + margin-right: 20px; svg { top: 1px; @@ -97,15 +97,15 @@ width: 40px; img { - width: 32px; height: 32px; + width: 32px; } } } .post-image__column { - width: 200px; height: 95px; + width: 200px; } .textarea-wrapper { @@ -114,6 +114,7 @@ display: none; } } + .form-control { &.min-height { min-height: 100px; @@ -132,6 +133,7 @@ .tip-overlay { &.tip-overlay--chat { margin-left: 10px; + .arrow { left: 32px; } @@ -142,20 +144,21 @@ display: block; .file-details__preview { + border-bottom: 1px solid #dddddd; + border-right: none; display: block; - width: 100%; height: 150px; - border-right: none; - border-bottom: 1px solid #ddd; + width: 100%; + img { - width: 64px; height: 64px; + width: 64px; } } .file-details { - width: 100%; height: auto; + width: 100%; } } @@ -165,9 +168,9 @@ .modal-direct-channels { .member-count { + display: block; float: none; margin-top: 10px; - display: block; } } @@ -181,9 +184,9 @@ } .overlay__circle { - width: 300px; height: 300px; margin: -150px 0 0 -150px; + width: 300px; } .overlay__files { @@ -212,9 +215,9 @@ } .signup-team__container { - padding: 30px 0; - margin-bottom: 30px; font-size: .9em; + margin-bottom: 30px; + padding: 30px 0; .signup-team__name { font-size: 2em; @@ -240,8 +243,8 @@ .modal { .info__label { - text-align: left; padding-bottom: 5px; + text-align: left; } .modal-header { @@ -250,8 +253,8 @@ } button.close { - font-weight: normal; font-size: 27px; + font-weight: normal; } .modal-title { @@ -262,9 +265,9 @@ .btn { &.btn-primary { display: block; + float: none; margin: 10px 0 6px; width: 100%; - float: none; } } } @@ -304,8 +307,8 @@ z-index: 5; .modal-title { - width: 100%; text-align: center; + width: 100%; } } @@ -323,6 +326,7 @@ .settings-table { padding: 0; + .nav { position: relative; top: auto; @@ -339,6 +343,7 @@ top: 14px; right: 0; padding-right: 0; + .fa { display: inline-block; } @@ -347,6 +352,7 @@ &.minimize-settings { padding: 0; display: none; + .user-settings { padding: 70px 20px 30px; } @@ -360,10 +366,10 @@ .nav { > li { > a { - border-top: 1px solid #ddd; + border-top: 1px solid #dddddd; font-size: 1.1em; line-height: 2.7; - color: #555; + color: #555555; .glyphicon { margin-left: 7px; @@ -438,25 +444,24 @@ } .file-preview__remove { - width: 28px; + @include alpha-property(background, $black, .5); height: 28px; left: auto; right: 0; - top: 0; - background: #444; - background: rgba(#000, .5); text-align: center; + top: 0; + width: 28px; &:after { display: none; } i { + font-size: 16px; line-height: 29px; - top: auto; - right: auto; position: relative; - font-size: 16px; + right: auto; + top: auto; } } @@ -467,10 +472,10 @@ margin: 0 -15px; .dropdown__icon { - width: 4px; - height: 16px; @include background-size(100% 100%); display: inline-block; + height: 16px; + width: 4px; } } @@ -502,10 +507,11 @@ .footer-pane { .footer-link { + line-height: 1.7; padding: 0; - width: 100%; text-align: right; - line-height: 1.7; + width: 100%; + &.copyright { width: 100%; } @@ -517,10 +523,10 @@ } .search-bar__container { - padding: 0; @include flex(0 0 44px); background: $primary-color; - color: #fff; + color: $white; + padding: 0; &.focused { .sidebar__collapse { @@ -534,40 +540,40 @@ } .search__clear { - @include translateX(0px); + @include translateX(0); } } + .search__form { + @include single-transition(all, .2s, linear); + @include translateX(0); border: none; - @include translateX(0px); - padding: 7px 20px 0 49px; height: 45px; + padding: 7px 20px 0 49px; position: relative; - @include single-transition(all, .2s, linear); .glyphicon-refresh-animate { + color: $black; right: 33px; top: 15px; - color: #fff; - color: rgba(255,255,255,.5); } .form-control { + @include border-radius(3px); + background: $white; border: none; + color: $dark-gray; padding: 0 10px 0 31px; - background: rgba(black, .2); - @include border-radius(3px); - color: #444; - background: #fff; } } } + .sidebar--menu { @include single-transition(transform, .5s, ease); @include translate3d(290px, 0, 0); - width: 290px; border: none; display: block; + width: 290px; &.move--left { @include translate3d(0, 0, 0); @@ -627,7 +633,7 @@ ul { clear: both; - background: #fff; + background: #ffffff; border-radius: 3px; top: 5px; position: relative; @@ -795,6 +801,7 @@ } } } + .activity-log__table { > div { display: block; @@ -805,8 +812,8 @@ } .activity-log__action { - text-align: left; margin-top: 10px; + text-align: left; } } } @@ -816,8 +823,8 @@ .settings-modal { .settings-table { .security-links { - margin-bottom: 10px; display: block; + margin-bottom: 10px; &:last-child { margin-bottom: 0; @@ -850,11 +857,11 @@ .member-drop, .member-role { - position: relative; - margin: 0px 0 0 44px; + margin: 0 0 0 44px; padding: 5px 0; - top: 0; + position: relative; right: 0; + top: 0; } .open > .dropdown-menu { |