diff options
Diffstat (limited to 'web')
41 files changed, 885 insertions, 462 deletions
diff --git a/web/react/components/admin_console/ldap_settings.jsx b/web/react/components/admin_console/ldap_settings.jsx index 535c264dd..4cd19c886 100644 --- a/web/react/components/admin_console/ldap_settings.jsx +++ b/web/react/components/admin_console/ldap_settings.jsx @@ -20,7 +20,7 @@ var holders = defineMessages({ }, baseEx: { id: 'admin.ldap.baseEx', - defaultMessage: 'Ex "dc=mydomain,dc=com"' + defaultMessage: 'Ex "ou=Unit Name,dc=corp,dc=example,dc=com"' }, firstnameAttrEx: { id: 'admin.ldap.firstnameAttrEx', @@ -32,7 +32,7 @@ var holders = defineMessages({ }, emailAttrEx: { id: 'admin.ldap.emailAttrEx', - defaultMessage: 'Ex "mail"' + defaultMessage: 'Ex "mail" or "userPrincipalName"' }, usernameAttrEx: { id: 'admin.ldap.usernameAttrEx', @@ -581,4 +581,4 @@ LdapSettings.propTypes = { config: React.PropTypes.object }; -export default injectIntl(LdapSettings);
\ No newline at end of file +export default injectIntl(LdapSettings); diff --git a/web/react/components/channel_members_modal.jsx b/web/react/components/channel_members_modal.jsx index 3ec93a616..dc8e3baaf 100644 --- a/web/react/components/channel_members_modal.jsx +++ b/web/react/components/channel_members_modal.jsx @@ -178,7 +178,6 @@ export default class ChannelMembersModal extends React.Component { this.props.onModalDismissed(); }} > - <i className='glyphicon glyphicon-envelope'/> <FormattedMessage id='channel_members_modal.addNew' defaultMessage=' Add New Members' diff --git a/web/react/components/file_attachment.jsx b/web/react/components/file_attachment.jsx index 6aeae638f..c719c6c7d 100644 --- a/web/react/components/file_attachment.jsx +++ b/web/react/components/file_attachment.jsx @@ -151,9 +151,9 @@ class FileAttachment extends React.Component { this.setState({fileSize: parseInt(data.size, 10)}); } }.bind(this), - function error() { - // Do nothing - } + function error() { + // Do nothing + } ); } else { fileSizeString = utils.fileSizeToString(this.state.fileSize); diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx index 90c0e8435..da8001f6f 100644 --- a/web/react/components/settings_sidebar.jsx +++ b/web/react/components/settings_sidebar.jsx @@ -4,10 +4,6 @@ import * as Utils from '../utils/utils.jsx'; export default class SettingsSidebar extends React.Component { - componentDidUpdate() { - $('.settings-modal').find('.modal-body').scrollTop(0); - $('.settings-modal').find('.modal-body').perfectScrollbar('update'); - } constructor(props) { super(props); diff --git a/web/react/components/signup_team.jsx b/web/react/components/signup_team.jsx index 5e8ae117d..26c46dad0 100644 --- a/web/react/components/signup_team.jsx +++ b/web/react/components/signup_team.jsx @@ -4,6 +4,7 @@ import ChoosePage from './team_signup_choose_auth.jsx'; import EmailSignUpPage from './team_signup_with_email.jsx'; import SSOSignupPage from './team_signup_with_sso.jsx'; +import LdapSignUpPage from './team_signup_with_ldap.jsx'; import Constants from '../utils/constants.jsx'; import {FormattedMessage} from 'mm-intl'; @@ -24,12 +25,18 @@ export default class TeamSignUp extends React.Component { count = count + 1; } + if (global.window.mm_config.EnableLdap === 'true') { + count = count + 1; + } + if (count > 1) { this.state = {page: 'choose'}; } else if (global.window.mm_config.EnableSignUpWithEmail === 'true') { this.state = {page: 'email'}; } else if (global.window.mm_config.EnableSignUpWithGitLab === 'true') { this.state = {page: 'gitlab'}; + } else if (global.window.mm_config.EnableLdap === 'true') { + this.state = {page: 'ldap'}; } else { this.state = {page: 'none'}; } @@ -133,6 +140,13 @@ export default class TeamSignUp extends React.Component { <EmailSignUpPage/> </div> ); + } else if (this.state.page === 'ldap') { + return ( + <div> + {teamListing} + <LdapSignUpPage/> + </div> + ); } else if (this.state.page === 'gitlab') { return ( <div> diff --git a/web/react/components/team_general_tab.jsx b/web/react/components/team_general_tab.jsx index c1b2a2e7f..ef7410b2f 100644 --- a/web/react/components/team_general_tab.jsx +++ b/web/react/components/team_general_tab.jsx @@ -611,7 +611,9 @@ class GeneralTab extends React.Component { className='modal-title' ref='title' > - <i className='modal-back'></i> + <div className='modal-back'> + <i className='fa fa-angle-left'></i> + </div> <FormattedMessage id='general_tab.title' defaultMessage='General Settings' diff --git a/web/react/components/team_import_tab.jsx b/web/react/components/team_import_tab.jsx index 828e9fc4e..c9a8afe6c 100644 --- a/web/react/components/team_import_tab.jsx +++ b/web/react/components/team_import_tab.jsx @@ -131,7 +131,10 @@ class TeamImportTab extends React.Component { <h4 className='modal-title' ref='title' - ><i className='modal-back'></i> + > + <div className='modal-back'> + <i className='fa fa-angle-left'></i> + </div> <FormattedMessage id='team_import_tab.import' defaultMessage='Import' diff --git a/web/react/components/team_members_dropdown.jsx b/web/react/components/team_members_dropdown.jsx index 8aacba8ca..cd7585d94 100644 --- a/web/react/components/team_members_dropdown.jsx +++ b/web/react/components/team_members_dropdown.jsx @@ -308,8 +308,8 @@ export default class TeamMembersDropdown extends React.Component { data-toggle='dropdown' aria-expanded='true' > - <span className='fa fa-pencil'></span> <span>{currentRoles} </span> + <span className='fa fa-chevron-down'></span> </a> <ul className='dropdown-menu member-menu' diff --git a/web/react/components/team_settings_modal.jsx b/web/react/components/team_settings_modal.jsx index d517f92fb..bef3ebf24 100644 --- a/web/react/components/team_settings_modal.jsx +++ b/web/react/components/team_settings_modal.jsx @@ -91,7 +91,7 @@ class TeamSettingsModal extends React.Component { /> </h4> </div> - <div className='modal-body'> + <div className='modal-body settings-modal__body'> <div className='settings-table'> <div className='settings-links'> <SettingsSidebar diff --git a/web/react/components/team_signup_choose_auth.jsx b/web/react/components/team_signup_choose_auth.jsx index 8c98c5538..5db83fe7d 100644 --- a/web/react/components/team_signup_choose_auth.jsx +++ b/web/react/components/team_signup_choose_auth.jsx @@ -58,6 +58,30 @@ export default class ChooseAuthPage extends React.Component { ); } + if (global.window.mm_config.EnableLdap === 'true') { + buttons.push( + <a + className='btn btn-custom-login ldap btn-full' + key='ldap' + href='#' + onClick={ + (e) => { + e.preventDefault(); + this.props.updatePage('ldap'); + } + } + > + <span className='icon'/> + <span> + <FormattedMessage + id='choose_auth_page.ldapCreate' + defaultMessage='Create new team with LDAP Account' + /> + </span> + </a> + ); + } + if (global.window.mm_config.EnableSignUpWithEmail === 'true') { buttons.push( <a diff --git a/web/react/components/team_signup_with_ldap.jsx b/web/react/components/team_signup_with_ldap.jsx new file mode 100644 index 000000000..8c808fa88 --- /dev/null +++ b/web/react/components/team_signup_with_ldap.jsx @@ -0,0 +1,234 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import * as utils from '../utils/utils.jsx'; +import * as Client from '../utils/client.jsx'; + +import {injectIntl, intlShape, defineMessages, FormattedMessage} from 'mm-intl'; + +const holders = defineMessages({ + team_error: { + id: 'ldap_signup.team_error', + defaultMessage: 'Please enter a team name' + }, + length_error: { + id: 'ldap_signup.length_error', + defaultMessage: 'Name must be 3 or more characters up to a maximum of 15' + }, + teamName: { + id: 'ldap_signup.teamName', + defaultMessage: 'Enter name of new team' + }, + badTeam: { + id: 'login_ldap.badTeam', + defaultMessage: 'Bad team name' + }, + idReq: { + id: 'login_ldap.idlReq', + defaultMessage: 'An LDAP ID is required' + }, + pwdReq: { + id: 'login_ldap.pwdReq', + defaultMessage: 'An LDAP password is required' + }, + username: { + id: 'login_ldap.username', + defaultMessage: 'LDAP Username' + }, + pwd: { + id: 'login_ldap.pwd', + defaultMessage: 'LDAP Password' + } +}); + +class LdapSignUpPage extends React.Component { + constructor(props) { + super(props); + + this.handleSubmit = this.handleSubmit.bind(this); + this.valueChange = this.valueChange.bind(this); + + this.state = {name: '', id: '', password: ''}; + } + + handleSubmit(e) { + e.preventDefault(); + const {formatMessage} = this.props.intl; + var teamSignup = {}; + teamSignup.user = {}; + teamSignup.team = {}; + var state = this.state; + state.serverError = null; + + teamSignup.team.display_name = this.state.name; + + if (!teamSignup.team.display_name) { + state.serverError = formatMessage(holders.team_error); + this.setState(state); + return; + } + + if (teamSignup.team.display_name.length <= 2) { + state.serverError = formatMessage(holders.length_error); + this.setState(state); + return; + } + + const id = this.refs.id.value.trim(); + if (!id) { + state.serverError = formatMessage(holders.idReq); + this.setState(state); + return; + } + + const password = this.refs.password.value.trim(); + if (!password) { + state.serverError = formatMessage(holders.pwdReq); + this.setState(state); + return; + } + + state.serverError = ''; + this.setState(state); + + teamSignup.team.name = utils.cleanUpUrlable(teamSignup.team.display_name); + teamSignup.team.type = 'O'; + + teamSignup.user.username = ReactDOM.findDOMNode(this.refs.id).value.trim(); + teamSignup.user.password = ReactDOM.findDOMNode(this.refs.password).value.trim(); + teamSignup.user.allow_marketing = true; + teamSignup.user.ldap = true; + teamSignup.user.auth_service = 'ldap'; + + $('#ldap-button').button('loading'); + + Client.createTeamWithLdap(teamSignup, + () => { + Client.track('signup', 'signup_team_ldap_complete'); + + Client.loginByLdap(teamSignup.team.name, id, password, + () => { + window.location.href = '/' + teamSignup.team.name + '/channels/town-square'; + }, + (err) => { + $('#ldap-button').button('reset'); + this.setState({serverError: err.message}); + } + ); + }, + (err) => { + $('#ldap-button').button('reset'); + this.setState({serverError: err.message}); + } + ); + } + + valueChange() { + this.setState({ + name: ReactDOM.findDOMNode(this.refs.teamname).value.trim(), + id: ReactDOM.findDOMNode(this.refs.id).value.trim(), + password: ReactDOM.findDOMNode(this.refs.password).value.trim() + }); + } + + render() { + const {formatMessage} = this.props.intl; + var nameError = null; + var nameDivClass = 'form-group'; + if (this.state.nameError) { + nameError = <label className='control-label'>{this.state.nameError}</label>; + nameDivClass += ' has-error'; + } + + var serverError = null; + if (this.state.serverError) { + serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>; + } + + var disabled = false; + if (this.state.name.length <= 2) { + disabled = true; + } + + if (this.state.id.length <= 1) { + disabled = true; + } + + if (this.state.password.length <= 1) { + disabled = true; + } + + return ( + <form + role='form' + onSubmit={this.handleSubmit} + > + <div className={nameDivClass}> + <input + autoFocus={true} + type='text' + ref='teamname' + className='form-control' + placeholder={this.props.intl.formatMessage(holders.teamName)} + maxLength='128' + onChange={this.valueChange} + spellCheck='false' + /> + {nameError} + </div> + <div className={nameDivClass}> + <input + className='form-control' + ref='id' + placeholder={formatMessage(holders.username)} + spellCheck='false' + onChange={this.valueChange} + /> + </div> + <div className={nameDivClass}> + <input + type='password' + className='form-control' + ref='password' + placeholder={formatMessage(holders.pwd)} + spellCheck='false' + onChange={this.valueChange} + /> + </div> + <div className='form-group'> + <a + className='btn btn-custom-login ldap btn-full' + key='ldap' + id='ldap-button' + href='#' + onClick={this.handleSubmit} + disabled={disabled} + > + <span className='icon'/> + <span> + <FormattedMessage + id='ldap_signup.ldap' + defaultMessage='Create team with LDAP Account' + /> + </span> + </a> + {serverError} + </div> + <div className='form-group margin--extra-2x'> + <span><a href='/find_team'> + <FormattedMessage + id='ldap_signup.find' + defaultMessage='Find my teams' + /> + </a></span> + </div> + </form> + ); + } +} + +LdapSignUpPage.propTypes = { + intl: intlShape.isRequired +}; + +export default injectIntl(LdapSignUpPage);
\ No newline at end of file diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index c119abcbc..46900e436 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -155,7 +155,7 @@ export default class Textbox extends React.Component { let helpText = ( <div - style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '1' : '0'}} + style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '0.5' : '0'}} className='help_format_text' > <b> diff --git a/web/react/components/user_settings/user_settings_advanced.jsx b/web/react/components/user_settings/user_settings_advanced.jsx index efaf63ada..cdaa5fd8a 100644 --- a/web/react/components/user_settings/user_settings_advanced.jsx +++ b/web/react/components/user_settings/user_settings_advanced.jsx @@ -300,10 +300,12 @@ class AdvancedSettingsDisplay extends React.Component { className='modal-title' ref='title' > - <i - className='modal-back' - onClick={this.props.collapseModal} - /> + <div className='modal-back'> + <i + className='fa fa-angle-left' + onClick={this.props.collapseModal} + /> + </div> <FormattedMessage id='user.settings.advance.title' defaultMessage='Advanced Settings' diff --git a/web/react/components/user_settings/user_settings_developer.jsx b/web/react/components/user_settings/user_settings_developer.jsx index 5868e0ad3..0acfd4a16 100644 --- a/web/react/components/user_settings/user_settings_developer.jsx +++ b/web/react/components/user_settings/user_settings_developer.jsx @@ -94,10 +94,12 @@ class DeveloperTab extends React.Component { className='modal-title' ref='title' > - <i - className='modal-back' - onClick={this.props.collapseModal} - /> + <div className='modal-back'> + <i + className='fa fa-angle-left' + onClick={this.props.collapseModal} + /> + </div> <FormattedMessage id='user.settings.developer.title' defaultMessage='Developer Settings' diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx index 3e468e08f..b0e64b0aa 100644 --- a/web/react/components/user_settings/user_settings_display.jsx +++ b/web/react/components/user_settings/user_settings_display.jsx @@ -444,10 +444,12 @@ export default class UserSettingsDisplay extends React.Component { className='modal-title' ref='title' > - <i - className='modal-back' - onClick={this.props.collapseModal} - /> + <div className='modal-back'> + <i + className='fa fa-angle-left' + onClick={this.props.collapseModal} + /> + </div> <FormattedMessage id='user.settings.display.title' defaultMessage='Display Settings' diff --git a/web/react/components/user_settings/user_settings_general.jsx b/web/react/components/user_settings/user_settings_general.jsx index 2f2116c2a..b0b1c414e 100644 --- a/web/react/components/user_settings/user_settings_general.jsx +++ b/web/react/components/user_settings/user_settings_general.jsx @@ -759,10 +759,12 @@ class UserSettingsGeneralTab extends React.Component { className='modal-title' ref='title' > - <i - className='modal-back' - onClick={this.props.collapseModal} - /> + <div className='modal-back'> + <i + className='fa fa-angle-left' + onClick={this.props.collapseModal} + /> + </div> <FormattedMessage id='user.settings.general.title' defaultMessage='General Settings' diff --git a/web/react/components/user_settings/user_settings_integrations.jsx b/web/react/components/user_settings/user_settings_integrations.jsx index e4f460a6d..7633b2f95 100644 --- a/web/react/components/user_settings/user_settings_integrations.jsx +++ b/web/react/components/user_settings/user_settings_integrations.jsx @@ -163,10 +163,12 @@ class UserSettingsIntegrationsTab extends React.Component { className='modal-title' ref='title' > - <i - className='modal-back' - onClick={this.props.collapseModal} - /> + <div className='modal-back'> + <i + className='fa fa-angle-left' + onClick={this.props.collapseModal} + /> + </div> <FormattedMessage id='user.settings.integrations.title' defaultMessage='Integration Settings' diff --git a/web/react/components/user_settings/user_settings_notifications.jsx b/web/react/components/user_settings/user_settings_notifications.jsx index ee9febb8e..3ef6435f1 100644 --- a/web/react/components/user_settings/user_settings_notifications.jsx +++ b/web/react/components/user_settings/user_settings_notifications.jsx @@ -774,10 +774,12 @@ class NotificationsTab extends React.Component { className='modal-title' ref='title' > - <i - className='modal-back' - onClick={this.props.collapseModal} - /> + <div className='modal-back'> + <i + className='fa fa-angle-left' + onClick={this.props.collapseModal} + /> + </div> <FormattedMessage id='user.settings.notifications.title' defaultMessage='Notification Settings' diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx index 53d79906f..cba7ffdea 100644 --- a/web/react/components/user_settings/user_settings_security.jsx +++ b/web/react/components/user_settings/user_settings_security.jsx @@ -389,10 +389,12 @@ class SecurityTab extends React.Component { className='modal-title' ref='title' > - <i - className='modal-back' - onClick={this.props.collapseModal} - /> + <div className='modal-back'> + <i + className='fa fa-angle-left' + onClick={this.props.collapseModal} + /> + </div> <FormattedMessage id='user.settings.security.title' defaultMessage='Security Settings' diff --git a/web/react/stores/admin_store.jsx b/web/react/stores/admin_store.jsx index eb3254cfe..5c911e94b 100644 --- a/web/react/stores/admin_store.jsx +++ b/web/react/stores/admin_store.jsx @@ -156,3 +156,7 @@ AdminStoreClass.dispatchToken = AppDispatcher.register((payload) => { }); export default AdminStore; + +if (window.mm_config.EnableDeveloper === 'true') { + window.AdminStore = AdminStore; +} diff --git a/web/react/stores/analytics_store.jsx b/web/react/stores/analytics_store.jsx index ec827f6d7..0ad989206 100644 --- a/web/react/stores/analytics_store.jsx +++ b/web/react/stores/analytics_store.jsx @@ -83,3 +83,7 @@ AnalyticsStore.dispatchToken = AppDispatcher.register((payload) => { }); export default AnalyticsStore; + +if (window.mm_config.EnableDeveloper === 'true') { + window.AnalyticsStore = AnalyticsStore; +} diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx index 60cb10de7..eac24b071 100644 --- a/web/react/stores/channel_store.jsx +++ b/web/react/stores/channel_store.jsx @@ -350,3 +350,7 @@ ChannelStore.dispatchToken = AppDispatcher.register((payload) => { }); export default ChannelStore; + +if (window.mm_config.EnableDeveloper === 'true') { + window.ChannelStore = ChannelStore; +} diff --git a/web/react/stores/file_store.jsx b/web/react/stores/file_store.jsx index 6d7e0f354..c1fd0ef74 100644 --- a/web/react/stores/file_store.jsx +++ b/web/react/stores/file_store.jsx @@ -57,4 +57,9 @@ class FileStore extends EventEmitter { } } -export default new FileStore(); +const instance = new FileStore(); +export default instance; + +if (window.mm_config.EnableDeveloper === 'true') { + window.FileStore = instance; +} diff --git a/web/react/stores/modal_store.jsx b/web/react/stores/modal_store.jsx index 5ea38030b..1819fffc0 100644 --- a/web/react/stores/modal_store.jsx +++ b/web/react/stores/modal_store.jsx @@ -45,3 +45,7 @@ class ModalStoreClass extends EventEmitter { const ModalStore = new ModalStoreClass(); export default ModalStore; + +if (window.mm_config.EnableDeveloper === 'true') { + window.ModalStore = ModalStore; +} diff --git a/web/react/stores/post_store.jsx b/web/react/stores/post_store.jsx index a6dfcd46f..5cc3f300d 100644 --- a/web/react/stores/post_store.jsx +++ b/web/react/stores/post_store.jsx @@ -608,3 +608,7 @@ function isPostListNull(pl) { return false; } + +if (window.mm_config.EnableDeveloper === 'true') { + window.PostStore = PostStore; +} diff --git a/web/react/stores/search_store.jsx b/web/react/stores/search_store.jsx index 549f355ef..96071665c 100644 --- a/web/react/stores/search_store.jsx +++ b/web/react/stores/search_store.jsx @@ -135,3 +135,7 @@ SearchStore.dispatchToken = AppDispatcher.register((payload) => { }); export default SearchStore; + +if (window.mm_config.EnableDeveloper === 'true') { + window.SearchStore = SearchStore; +} diff --git a/web/react/stores/suggestion_store.jsx b/web/react/stores/suggestion_store.jsx index efd2b76ed..487bae843 100644 --- a/web/react/stores/suggestion_store.jsx +++ b/web/react/stores/suggestion_store.jsx @@ -258,4 +258,9 @@ class SuggestionStore extends EventEmitter { } } -export default new SuggestionStore(); +const instance = new SuggestionStore(); +export default instance; + +if (window.mm_config.EnableDeveloper === 'true') { + window.SuggestionStore = instance; +} diff --git a/web/react/stores/team_store.jsx b/web/react/stores/team_store.jsx index 7a1a2ef42..493d6bc4d 100644 --- a/web/react/stores/team_store.jsx +++ b/web/react/stores/team_store.jsx @@ -126,3 +126,7 @@ TeamStore.dispatchToken = AppDispatcher.register((payload) => { }); export default TeamStore; + +if (window.mm_config.EnableDeveloper === 'true') { + window.TeamStore = TeamStore; +} diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx index 75a87d424..9fcd2440e 100644 --- a/web/react/stores/user_store.jsx +++ b/web/react/stores/user_store.jsx @@ -325,3 +325,7 @@ UserStore.dispatchToken = AppDispatcher.register((payload) => { }); export {UserStore as default}; + +if (window.mm_config.EnableDeveloper === 'true') { + window.UserStore = UserStore; +} diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index 1a002bc8c..76d42137a 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -87,6 +87,21 @@ export function createTeamFromSignup(teamSignup, success, error) { }); } +export function createTeamWithLdap(teamSignup, success, error) { + $.ajax({ + url: '/api/v1/teams/create_with_ldap', + dataType: 'json', + contentType: 'application/json', + type: 'POST', + data: JSON.stringify(teamSignup), + success, + error: function onError(xhr, status, err) { + var e = handleError('createTeamFromSignup', xhr, status, err); + error(e); + } + }); +} + export function createTeamWithSSO(team, service, success, error) { $.ajax({ url: '/api/v1/teams/create_with_sso/' + service, diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 6ab2f64d4..6942a8e08 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -606,16 +606,17 @@ export function toTitleCase(str) { export function applyTheme(theme) { if (theme.sidebarBg) { - changeCss('.sidebar--left, .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1); + changeCss('.sidebar--left, .modal .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1); + changeCss('body', 'scrollbar-face-color:' + theme.sidebarBg, 3); } if (theme.sidebarText) { - changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); - changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); + changeCss('.sidebar--left .nav-pills__container li>a, .sidebar--right, .modal .settings-modal .nav-pills>li a, .sidebar--menu', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); + changeCss('@media(max-width: 768px){.modal .settings-modal .settings-table .nav>li>a', 'color:' + theme.sidebarText, 1); changeCss('.sidebar--left .nav-pills__container li>h4, .sidebar--left .add-channel-btn', 'color:' + changeOpacity(theme.sidebarText, 0.6), 1); changeCss('.sidebar--left .add-channel-btn:hover, .sidebar--left .add-channel-btn:focus', 'color:' + theme.sidebarText, 1); changeCss('.sidebar--left .status .offline--icon, .sidebar--left .status .offline--icon', 'fill:' + theme.sidebarText, 1); - changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2); + changeCss('@media(max-width: 768px){.modal .settings-modal .settings-table .nav>li>a', 'border-color:' + changeOpacity(theme.sidebarText, 0.2), 2); } if (theme.sidebarUnreadText) { @@ -623,16 +624,16 @@ export function applyTheme(theme) { } if (theme.sidebarTextHoverBg) { - changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .settings-modal .nav-pills>li:hover a, .settings-modal .nav-pills>li:focus a', 'background:' + theme.sidebarTextHoverBg, 1); - changeCss('@media(max-width: 768px){.settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('.sidebar--left .nav-pills__container li>a:hover, .sidebar--left .nav-pills__container li>a:focus, .modal .settings-modal .nav-pills>li:hover a, .modal .settings-modal .nav-pills>li:focus a', 'background:' + theme.sidebarTextHoverBg, 1); + changeCss('@media(max-width: 768px){.modal .settings-modal .settings-table .nav>li:hover a', 'background:' + theme.sidebarTextHoverBg, 1); } if (theme.sidebarTextActiveBorder) { - changeCss('.sidebar--left .nav li.active a:before, .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1); + changeCss('.sidebar--left .nav li.active a:before, .modal .settings-modal .nav-pills>li.active a:before', 'background:' + theme.sidebarTextActiveBorder, 1); } if (theme.sidebarTextActiveColor) { - changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .settings-modal .nav-pills>li.active a, .settings-modal .nav-pills>li.active a:hover, .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); + changeCss('.sidebar--left .nav-pills__container li.active a, .sidebar--left .nav-pills__container li.active a:hover, .sidebar--left .nav-pills__container li.active a:focus, .modal .settings-modal .nav-pills>li.active a, .modal .settings-modal .nav-pills>li.active a:hover, .modal .settings-modal .nav-pills>li.active a:active', 'color:' + theme.sidebarTextActiveColor, 2); changeCss('.sidebar--left .nav li.active a, .sidebar--left .nav li.active a:hover, .sidebar--left .nav li.active a:focus', 'background:' + changeOpacity(theme.sidebarTextActiveColor, 0.1), 1); } @@ -665,12 +666,12 @@ export function applyTheme(theme) { if (theme.mentionBj) { changeCss('.sidebar--left .nav-pills__unread-indicator', 'background:' + theme.mentionBj, 1); - changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj, 1); + changeCss('.sidebar--left .badge', 'background:' + theme.mentionBj + '!important;', 1); } if (theme.mentionColor) { changeCss('.sidebar--left .nav-pills__unread-indicator', 'color:' + theme.mentionColor, 2); - changeCss('.sidebar--left .badge', 'color:' + theme.mentionColor, 2); + changeCss('.sidebar--left .badge', 'color:' + theme.mentionColor + '!important;', 2); } if (theme.centerChannelBg) { @@ -686,6 +687,8 @@ export function applyTheme(theme) { changeCss('.popover.top>.arrow:after, .tip-overlay.tip-overlay--chat .arrow', 'border-top-color:' + theme.centerChannelBg, 1); changeCss('@media(min-width: 768px){.search-bar__container .search__form .search-bar, .form-control', 'background:' + theme.centerChannelBg, 1); changeCss('.attachment__content', 'background:' + theme.centerChannelBg, 1); + changeCss('body', 'scrollbar-face-color:' + theme.centerChannelBg, 2); + changeCss('body', 'scrollbar-track-color:' + theme.centerChannelBg, 2); } if (theme.centerChannelColor) { @@ -705,7 +708,7 @@ export function applyTheme(theme) { changeCss('.markdown__table tbody tr:nth-child(2n)', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.channel-header__info>div.dropdown .header-dropdown__icon', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); changeCss('.channel-header #member_popover', 'color:' + changeOpacity(theme.centerChannelColor, 0.8), 1); - changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-content, .modal .modal-content, .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.custom-textarea, .custom-textarea:focus, .preview-container .preview-div, .post-image__column .post-image__details, .sidebar--right .sidebar-right__body, .markdown__table th, .markdown__table td, .suggestion-content, .modal .modal-content, .modal .settings-modal .settings-table .settings-content .divider-light, .webhooks__container, .dropdown-menu, .modal .modal-header, .popover', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.popover.bottom>.arrow', 'border-bottom-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); changeCss('.search-help-popover .search-autocomplete__divider span', 'color:' + changeOpacity(theme.centerChannelColor, 0.7), 1); changeCss('.popover.right>.arrow', 'border-right-color:' + changeOpacity(theme.centerChannelColor, 0.25), 1); @@ -726,18 +729,20 @@ export function applyTheme(theme) { changeCss('.date-separator .separator__hr, .modal-footer, .modal .custom-textarea', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.search-item-container, .post-right__container .post.post--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 1); changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1); - changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links, .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); + changeCss('.channel-intro, .modal .settings-modal .settings-table .settings-content .divider-dark, hr, .modal .settings-modal .settings-table .settings-links, .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__header', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1); changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, pre, .post-right__container .post.post--root', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.post.current--user .post__body, .post.post--comment.other--root.current--user .post-comment, .post.same--root.post--comment .post__body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2); changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2); - changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); + changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .modal .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1); changeCss('.command-name:hover, .mentions-name:hover, .suggestion--selected, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .bot-indicator', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); changeCss('code, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1); changeCss('@media(min-width: 960px){.post.current--user:hover .post__body ', 'background: none;', 1); changeCss('.sidebar--right', 'color:' + theme.centerChannelColor, 2); - changeCss('.search-help-popover .search-autocomplete__item:hover, .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); + changeCss('.search-help-popover .search-autocomplete__item:hover, .modal .settings-modal .settings-table .settings-content .appearance-section .theme-elements__body', 'background:' + changeOpacity(theme.centerChannelColor, 0.05), 1); changeCss('.search-help-popover .search-autocomplete__item.selected', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1); + changeCss('::-webkit-scrollbar-thumb', 'background:' + changeOpacity(theme.centerChannelColor, 0.4), 1); + changeCss('body', 'scrollbar-arrow-color:' + theme.centerChannelColor, 4); } if (theme.newMessageSeparator) { diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss index ee6a6b955..4dcf0ff85 100644 --- a/web/sass-files/sass/partials/_base.scss +++ b/web/sass-files/sass/partials/_base.scss @@ -224,3 +224,33 @@ a:focus, a:hover { margin-bottom: 0.25em; background-size: contain; } + + +// Scrollbar Css + +::-webkit-scrollbar +{ + width: 8px; /* for vertical scrollbars */ + height: 8px; /* for horizontal scrollbars */ +} + +::-webkit-scrollbar-track +{ + background: rgba(0, 0, 0, 0.1); +} + +::-webkit-scrollbar-thumb +{ + @include border-radius(5px); + background: rgba(0, 0, 0, 0.4); +} + +body{ + scrollbar-face-color: rgba(0, 0, 0, 0.1); + scrollbar-shadow-color: #2D2C4D; + scrollbar-highlight-color:#7D7E94; + scrollbar-3dlight-color: #7D7E94; + scrollbar-darkshadow-color: #2D2C4D; + scrollbar-track-color: rgba(0, 0, 0, 0.1); + scrollbar-arrow-color: #C1C1D1; +}
\ No newline at end of file diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 12cd065da..5b02652af 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -61,7 +61,7 @@ width: 100%; @include legacy-pie-clearfix; text-overflow: ellipsis; - padding: 8px 8px 8px 15px; + padding: 8px 15px; &.padding--equal { padding: 8px; } diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index a667a851c..39cebe856 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -73,12 +73,11 @@ body.ios { .help_format_text { position: absolute; - z-index: 3; bottom: -23px; - font-size: 0.7em; - right: 45px; - color: #999; - transition: visibility 0s, opacity 0.5s linear; + right: 40px; + font-size: 0.85em; + @include opacity(0); + @include single-transition(all 0.2s ease); b, i, code { margin-right: 3px; @@ -725,6 +724,12 @@ body.ios { margin-top: 1.4em; } + li { + > p { + margin-top: 10px; + } + } + img { max-height: 400px; } @@ -781,14 +786,12 @@ body.ios { .post__embed-visibility { cursor: pointer; - display: block; font: normal normal normal 14px/1 FontAwesome; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-size: 0; - width: 30px; - margin-top: -5px; + margin: 5px 0 10px; + display: inline-block; &:hover{ text-decoration: none; diff --git a/web/sass-files/sass/partials/_post_right.scss b/web/sass-files/sass/partials/_post_right.scss index 2b48fd2c2..5df6fdc01 100644 --- a/web/sass-files/sass/partials/_post_right.scss +++ b/web/sass-files/sass/partials/_post_right.scss @@ -22,6 +22,12 @@ } + + .help_format_text { + bottom: -63px; + right: auto; + } + .post { &.post--root { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 0f978a806..a9a572768 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -98,8 +98,6 @@ .post { - background: none !important; - .post__dropdown { line-height: 9px; text-decoration: none; @@ -120,9 +118,9 @@ visibility: visible; display: none; - &.icon--show { - display: inline-block; - } + &.icon--show { + display: inline-block; + } } @@ -310,6 +308,11 @@ } } } + .row--invite { + .col-sm-6 { + padding: 0; + } + } .modal { .info__label { text-align: left; @@ -319,6 +322,10 @@ .modal-action { margin-top: 10px; } + button.close { + font-weight: normal; + font-size: 27px; + } .modal-title { float: none; max-width: 90%; @@ -332,95 +339,89 @@ } } } - } - .row--invite { - .col-sm-6 { - padding: 0; - } - } - .settings-modal { - &.display--content { - .modal-header { - display: none; - } - .settings-table { - display: block; - .settings-content { - &.minimize-settings { - display: block; - } - .section-min:hover { - background: none; - } - .no-padding--left { - padding-left: 15px; - } - } - .settings-links { + .settings-modal { + &.display--content { + .modal-header { display: none; } - .modal-header { + .settings-table { display: block; - position: absolute; - top: 0; - width: 100%; - z-index: 5; - } - .modal-title { - padding-left: 20px; - } - .user-settings { - .tab-header { - display: none; + .settings-content { + &.minimize-settings { + display: block; + } + .section-min:hover { + background: none; + } + .no-padding--left { + padding-left: 15px; + } } - .divider-dark.first { + .settings-links { display: none; } + .modal-header { + display: block; + position: absolute; + top: 0; + width: 100%; + z-index: 5; + .modal-title { + width: 100%; + text-align: center; + } + } + .user-settings { + .tab-header { + display: none; + } + .divider-dark.first { + display: none; + } + } } } - } - .settings-table { - .nav { - &.position--top { + .settings-table { + padding: 0; + .nav { + &.position--top { + top: auto; + } + position: relative; top: auto; + width: 100%; } - position: relative; - top: auto; - width: 100%; - } - .settings-content { - .section-edit { - position: absolute; - top: 14px; - right: 0; - padding-right: 0; - .fa { - display: inline-block; + .settings-content { + .section-edit { + position: absolute; + top: 14px; + right: 0; + padding-right: 0; + .fa { + display: inline-block; + } } - } - &.minimize-settings { - padding: 0; - display: none; - .user-settings { - padding: 70px 20px 30px; + &.minimize-settings { + padding: 0; + display: none; + .user-settings { + padding: 70px 20px 30px; + } + } + .section-min:hover { + background: none !important; } } - .section-min:hover { - background: none !important; - } - } - .settings-links { - background: #fff; - } - .nav { - > li { - > a { - border-top: 1px solid #ddd; - font-size: 1.1em; - line-height: 2.7; - color: #555; - .glyphicon { - margin-left: 7px; + .nav { + > li { + > a { + border-top: 1px solid #ddd; + font-size: 1.1em; + line-height: 2.7; + color: #555; + .glyphicon { + margin-left: 7px; + } } } } @@ -572,7 +573,8 @@ .glyphicon-refresh-animate { right: 33px; top: 15px; - color: #aaa; + color: #fff; + color: rgba(255,255,255,0.5); } .form-control { border: none; @@ -800,22 +802,24 @@ } } @media screen and (max-width: 480px) { - .settings-modal { + .modal { + .settings-modal { - .settings-table { + .settings-table { - .security-links { - margin-bottom: 10px; - display: block; + .security-links { + margin-bottom: 10px; + display: block; + + &:last-child { + margin-bottom: 0; + } - &:last-child { - margin-bottom: 0; } } - } - + } } .tip-overlay.tip-overlay--sidebar { diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index 99b564fe5..6574dd927 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -12,358 +12,369 @@ } } -.settings-modal { - width:800px; - max-width: 100%; - .modal-content { - width:800px; - max-width: 100%; - } - .modal-back { - width: 40px; - height: 56px; - background: url("../images/arrow-left.png") no-repeat; - @include background-size(8px 13px); - background-position: center; - top: 0; - left: 0; - cursor: pointer; - position: absolute; - } - .modal-body { - padding: 0; - } - li { - list-style: none; - } - label { - font-weight: 600; - } - - .no-padding--left { - padding-left: 0; - } - .padding-top { - padding-top: 7px; - &.x2 { - padding-top: 14px; - } - &.x3 { - padding-top: 21px; +.modal { + .settings-modal { + width: 800px; + .modal-back { + width: 50px; + height: 40px; + top: 12px; + font-size: 27px; + font-weight: normal; + line-height: 32px; + position: absolute; + left: 0; + text-align: center; + .fa { + line-height: inherit; + position: absolute; + width: 100%; + height: 100%; + left: 0; + } } - } - .padding-bottom { - padding-bottom: 7px; - &.x2 { - padding-bottom: 14px; + .modal-body { + padding: 0; + margin: 0 auto; + min-height: calc(100% - 62px); } - &.x3 { - padding-bottom: 21px; + li { + list-style: none; } - .control-label { + label { font-weight: 600; - &.text-left { - text-align: left; - } } - } - .profile-img { - width: 128px; - height: 128px; - } - .settings-table { - display: table; - table-layout: fixed; - width: 100%; - > div { - display: table-cell; - vertical-align: top; + + .no-padding--left { + padding-left: 0; } - .nav { - position: fixed; - width: 179px; - &.position--top { - top: 57px; + .padding-top { + padding-top: 7px; + &.x2 { + padding-top: 14px; + } + &.x3 { + padding-top: 21px; } } - .security-links { - margin-right: 20px; - .fa { - margin-right: 6px; + .padding-bottom { + padding-bottom: 7px; + &.x2 { + padding-bottom: 14px; + } + &.x3 { + padding-bottom: 21px; + } + .control-label { + font-weight: 600; + &.text-left { + text-align: left; + } } } - .settings-links { - width: 180px; - background: #FAFAFA; - border-right: 1px solid #DDD; + .profile-img { + width: 128px; + height: 128px; } - .settings-content { - padding: 0px 20px 30px; - .modal-header { - display: none; + .settings-table { + max-width: 1000px; + margin: 0 auto; + display: table; + table-layout: fixed; + width: 100%; + > div { + display: table-cell; + vertical-align: top; } - .section-min { - padding: 1em 0; - margin-bottom: 0; - cursor: pointer; - position: relative; - @include clearfix; - &:hover { - background: #f9f9f9; - } - &:hover .fa { - display: inline-block; - } - &:hover .section-edit { - text-decoration: underline; + .nav { + position: fixed; + width: 179px; + &.position--top { + top: 57px; } } - - .section-max { - background: rgba(black, 0.05); - padding: 1em 0 1.3em; - margin-bottom: 0; - @include clearfix; - .section-title { - margin-bottom: 10px; + .security-links { + margin-right: 20px; + .fa { + margin-right: 6px; } } - - .appearance-section { - .theme-group { - .input-group-addon { - padding: 4px 5px; - width: 40px; - } - img { - border: 1px solid rgba(black, 0.15); - width: 29px; - } + .settings-links { + width: 180px; + } + .settings-content { + padding: 0px 20px 30px; + .modal-header { + display: none; } - .group--code { - select { - padding-right: 25px; + .section-min { + padding: 1em 0; + margin-bottom: 0; + cursor: pointer; + position: relative; + @include clearfix; + &:hover { + background: #f9f9f9; } - select::-ms-expand { - display: none; - } - &:before { - pointer-events: none; - position: absolute; - top: 11px; - right: 50px; - z-index: 5; - content: "\f0d7"; + &:hover .fa { display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - select { - -moz-appearance:none; - -webkit-appearance:none; - appearance:none; - } - } - .premade-themes { - margin-bottom: 10px; - .theme-label { - font-weight: 400; - margin-top: 5px; - } - img { - border: 3px solid transparent; + &:hover .section-edit { + text-decoration: underline; + } } - .active { - img { - border-color: $primary-color; + + .section-max { + background: rgba(black, 0.05); + padding: 1em 0 1.3em; + margin-bottom: 0; + @include clearfix; + .section-title { + margin-bottom: 10px; } } - } - .theme-elements { - padding-left:15px; + .appearance-section { + .theme-group { + .input-group-addon { + padding: 4px 5px; + width: 40px; + } + img { + border: 1px solid rgba(black, 0.15); + width: 29px; + } + } + .group--code { + select { + padding-right: 25px; + } + select::-ms-expand { + display: none; + } + &:before { + pointer-events: none; + position: absolute; + top: 11px; + right: 50px; + z-index: 5; + content: "\f0d7"; + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + select { + -moz-appearance:none; + -webkit-appearance:none; + appearance:none; + } + } + .premade-themes { + margin-bottom: 10px; + .theme-label { + font-weight: 400; + margin-top: 5px; + } + img { + border: 3px solid transparent; + } + .active { + img { + border-color: $primary-color; + } + } + } - .element { - margin-right:10px; + .theme-elements { + padding-left:15px; - &:nth-child(2n) { - margin-right: 0; - } + .element { + margin-right:10px; - } - } + &:nth-child(2n) { + margin-right: 0; + } - .theme-elements__header { - margin: 10px 20px 0px 0; - border-bottom: 1px solid #ccc; - padding: 5px 0 10px; - font-size: em(13.5px); - font-weight: 600; - cursor: pointer; + } + } - .fa-minus { - display: none; - } + .theme-elements__header { + margin: 10px 20px 0px 0; + border-bottom: 1px solid #ccc; + padding: 5px 0 10px; + font-size: em(13.5px); + font-weight: 600; + cursor: pointer; + + .fa-minus { + display: none; + } + + &.open { + .fa-minus { + display: inline-block; + } + .fa-plus { + display: none; + } + } + + .header__icon { + float: right; + @include opacity(0.5); + } - &.open { - .fa-minus { - display: inline-block; } - .fa-plus { + + .theme-elements__body { + padding-top: 5px; display: none; + @include legacy-pie-clearfix; + background: rgba(255, 255, 255, 0.05); + padding: 20px 0 0 20px; + margin: 0 20px 0 0; + @include border-radius(0 0 3px 3px); } - } - .header__icon { - float: right; - @include opacity(0.5); + .custom-label { + white-space: nowrap; + font-weight: normal; + font-size: 12px; + width: 100%; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 0; + } + .input-group-addon { + background: transparent; + } + .radio { + label { + font-weight: 600; + } + } } - } - - .theme-elements__body { - padding-top: 5px; - display: none; - @include legacy-pie-clearfix; - background: rgba(255, 255, 255, 0.05); - padding: 20px 0 0 20px; - margin: 0 20px 0 0; - @include border-radius(0 0 3px 3px); - } - - .custom-label { - white-space: nowrap; - font-weight: normal; - font-size: 12px; - width: 100%; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 0; - } - .input-group-addon { - background: transparent; - } - .radio { - label { + .section-title { + margin-bottom: 5px; font-weight: 600; + padding-right: 50px; } - } - } - .section-title { - margin-bottom: 5px; - font-weight: 600; - padding-right: 50px; - } + .section-edit { + text-align: right; + margin-bottom: 5px; + .fa { + margin-right: 5px; + font-size: 12px; + @include opacity(0.5); + display: none; + &.fa-chevron-down { + top: -1px; + margin-right: 0; + position: relative; + } + } + } - .section-edit { - text-align: right; - margin-bottom: 5px; - .fa { - margin-right: 5px; - font-size: 12px; - @include opacity(0.5); - display: none; - } - } + .section-describe { + @include opacity(0.7); + white-space:pre; + @include clearfix; + text-overflow: ellipsis; + } - .section-describe { - @include opacity(0.7); - white-space:pre; - @include clearfix; - text-overflow: ellipsis; - } + .divider-dark { + border-bottom:1px solid #aaaaaa; + } - .divider-dark { - border-bottom:1px solid #aaaaaa; - } + .divider-light { + border-bottom:1px solid lightgrey; + } - .divider-light { - border-bottom:1px solid lightgrey; - } + .setting-list { + padding: 0; + list-style-type:none; + } - .setting-list { - padding: 0; - list-style-type:none; - } + .setting-list__hint { + margin-top: 20px; + } - .setting-list__hint { - margin-top: 20px; - } + .mentions-input { + margin-top: 10px; + } - .mentions-input { - margin-top: 10px; - } + .setting-list-item { + margin-top:7px; + } + .has-error { + color: #a94442; + } - .setting-list-item { - margin-top:7px; - } - .has-error { - color: #a94442; - } + .file-status { + font-size: 13px; + margin-top: 8px; + color: #555; + } - .file-status { - font-size: 13px; - margin-top: 8px; - color: #555; - } + .confirm-import { + padding: 4px 10px; + margin: 10px 0; + } - .confirm-import { - padding: 4px 10px; - margin: 10px 0; + } } - } -} -.nav-pills { - > li { - margin: 0; - a { - border-radius: 0; - color: #777; - } - .glyphicon { - width: 25px; - top: 2px; - } - &:hover { + .nav-pills { + > li { + margin: 0; a { - background: #E6F2FA; + padding: 8px 5px 8px 15px; + border-radius: 0; + color: #777; } - } - &.active { - a { - color: #111; - background-color: #E1E1E1; - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 5px; - height: 100%; - background: #000; + .glyphicon { + width: 25px; + top: 2px; + } + &:hover { + a { + background-color: rgba(black, 0.1); } } - a, a:hover, a:focus { - padding-right: 10px; - background-color: rgba(black, 0.1); - border-radius: 0; - font-weight: 400; - position: relative; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + &.active { + a { + color: #111; + background-color: #E1E1E1; + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 5px; + height: 100%; + background: #000; + } + } + a, a:hover, a:focus { + background-color: rgba(black, 0.1); + border-radius: 0; + font-weight: 400; + position: relative; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } } -} -h3 { - font-size: em(20px); -} + h3 { + font-size: em(20px); + } } .channel-settings { diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss index 38ae14d7d..6d396d21c 100644 --- a/web/sass-files/sass/partials/_signup.scss +++ b/web/sass-files/sass/partials/_signup.scss @@ -214,6 +214,15 @@ background-image: url("../images/googleLogo.png"); } } + &.ldap { + background: #dd4b39; + &:hover { + background: darken(#dd4b39, 10%); + } + span { + vertical-align: middle; + } + } &.email { background: #2389D7; &:hover { diff --git a/web/static/i18n/en.json b/web/static/i18n/en.json index 6915f7d26..58a19ea1b 100644 --- a/web/static/i18n/en.json +++ b/web/static/i18n/en.json @@ -152,14 +152,14 @@ "admin.ldap.bannerDesc": "If a user attribute changes on the LDAP server it will be updated the next time the user enters their credentials to log in to Mattermost. This includes if a user is made inactive or removed from an LDAP server. Synchronization with LDAP servers is planned in a future release.", "admin.ldap.bannerHeading": "Note:", "admin.ldap.baseDesc": "The Base DN is the Distinguished Name of the location where Mattermost should start its search for users in the LDAP tree.", - "admin.ldap.baseEx": "Ex \"dc=mydomain,dc=com\"", + "admin.ldap.baseEx": "Ex \"ou=Unit Name,dc=corp,dc=example,dc=com\"", "admin.ldap.baseTitle": "BaseDN:", "admin.ldap.bindPwdDesc": "Password of the user given in \"Bind Username\".", "admin.ldap.bindPwdTitle": "Bind Password:", "admin.ldap.bindUserDesc": "The username used to perform the LDAP search. This should typically be an account created specifically for use with Mattermost. It should have access limited to read the portion of the LDAP tree specified in the BaseDN field.", "admin.ldap.bindUserTitle": "Bind Username:", "admin.ldap.emailAttrDesc": "The attribute in the LDAP server that will be used to populate the email addresses of users in Mattermost.", - "admin.ldap.emailAttrEx": "Ex \"mail\"", + "admin.ldap.emailAttrEx": "Ex \"mail\" or \"userPrincipalName\"", "admin.ldap.emailAttrTitle": "Email Attribute:", "admin.ldap.enableDesc": "When true, Mattermost allows login using LDAP", "admin.ldap.enableTitle": "Enable Login With LDAP:", @@ -593,6 +593,7 @@ "choose_auth_page.find": "Find my teams", "choose_auth_page.gitlabCreate": "Create new team with GitLab Account", "choose_auth_page.googleCreate": "Create new team with Google Apps Account", + "choose_auth_page.ldapCreate": "Create new team with LDAP Account", "choose_auth_page.noSignup": "No sign-up methods configured, please contact your system administrator.", "claim.account.noEmail": "No email specified", "claim.email_to_sso.enterPwd": "Enter the password for your {team} {site} account", @@ -736,6 +737,11 @@ "invite_member.send2": "Send Invitations", "invite_member.sending": " Sending", "invite_member.teamInviteLink": "You can also invite people using the {link}.", + "ldap_signup.find": "Find my teams", + "ldap_signup.ldap": "Create team with LDAP Account", + "ldap_signup.length_error": "Name must be 3 or more characters up to a maximum of 15", + "ldap_signup.teamName": "Enter name of new team", + "ldap_signup.team_error": "Please enter a team name", "loading_screen.loading": "Loading", "login.changed": " Sign-in method changed successfully", "login.create": "Create one now", diff --git a/web/static/i18n/es.json b/web/static/i18n/es.json index 0f3bc02d7..89326bff3 100644 --- a/web/static/i18n/es.json +++ b/web/static/i18n/es.json @@ -152,14 +152,14 @@ "admin.ldap.bannerDesc": "Si el atributo de un usuario cambia en el servidor LDAP será actualizado la próxima vez que el usuario ingrese sus credenciales para iniciar sesión en Mattermost. Esto incluye si un usuario se inactiva o se remueve en el servidor LDAP. Sincronización con servidores LDAP está planificado para futuras versiones.", "admin.ldap.bannerHeading": "Nota:", "admin.ldap.baseDesc": "El DN Base es el Nombre Distinguido de la ubicación donde Mattermost debe comenzar a buscar a los usuarios en el árbol del LDAP.", - "admin.ldap.baseEx": "Ex \"dc=midominio,dc=com\"", + "admin.ldap.baseEx": "Ej \"ou=Unit Name,dc=corp,dc=example,dc=com\"", "admin.ldap.baseTitle": "DN Base:", "admin.ldap.bindPwdDesc": "Contraseña del usuario asignado en \"Usuario de Enlace\".", "admin.ldap.bindPwdTitle": "Contraseña de Enlace:", "admin.ldap.bindUserDesc": "El usuario que realizará las busquedas LDAP. Normalmente este debería ser una cuenta específicamente creada para ser utilizada por Mattermost. Debería contat con acceso limitado para leer la porción del árbol LDAP especificada en el campo DN Base.", "admin.ldap.bindUserTitle": "Usuario de Enlace:", "admin.ldap.emailAttrDesc": "El atributo en el servidor LDAP que será utilizado para poblar la dirección de correo electrónico de los usuarios en Mattermost.", - "admin.ldap.emailAttrEx": "Ej \"mail\"", + "admin.ldap.emailAttrEx": "Ej \"mail\" o \"userPrincipalName\"", "admin.ldap.emailAttrTitle": "Atributo de Correo Electrónico:", "admin.ldap.enableDesc": "Cuando es verdadero, Mattermost permite realizar inicio de sesión utilizando LDAP", "admin.ldap.enableTitle": "Habilitar inicio de sesión con LDAP:", @@ -593,6 +593,7 @@ "choose_auth_page.find": "Encontrar mi equipo", "choose_auth_page.gitlabCreate": "Crear un nuevo equipo con una cuenta de GitLab", "choose_auth_page.googleCreate": "Crear un nuevo equipo con una cuenta de Google Apps", + "choose_auth_page.ldapCreate": "Crea un nuevo equipo con tu cuenta de LDAP", "choose_auth_page.noSignup": "No hay métodos de inicio de sesión configurad, por favor contacte al administrador de sistemasos", "claim.account.noEmail": "No se especifico un correo electrónico.", "claim.email_to_sso.enterPwd": "Ingresa la contraseña para tu cuenta para {team} {site}", @@ -736,6 +737,11 @@ "invite_member.send2": "Enviar Invitaciones", "invite_member.sending": " Enviando", "invite_member.teamInviteLink": "También puedes invitar personas usando el {link}.", + "ldap_signup.find": "Encontrar mis equipos", + "ldap_signup.ldap": "Crea un equipo con tu cuenta de LDAP", + "ldap_signup.length_error": "El nombre debe tener entre 3 y 15 caracteres", + "ldap_signup.teamName": "Ingresa el nombre del nuevo equipo", + "ldap_signup.team_error": "Por favor ingresa el nombre del equipo", "loading_screen.loading": "Cargando", "login.changed": " Cambiado el método de inicio de sesión satisfactoriamente", "login.create": "Crea una ahora", diff --git a/web/static/i18n/pt.json b/web/static/i18n/pt.json index 76cb5a356..e8f1d481e 100644 --- a/web/static/i18n/pt.json +++ b/web/static/i18n/pt.json @@ -152,14 +152,14 @@ "admin.ldap.bannerDesc": "Se um atributo de usuário de mudar no servidor LDAP, ele será atualizado na próxima vez que o usuário inserir suas credenciais para iniciar sessão no Mattermost. Isso inclui se um usuário estiver inativo ou removido de um servidor LDAP. Sincronização com servidores LDAP está prevista para um lançamento futuro.", "admin.ldap.bannerHeading": "Nota:", "admin.ldap.baseDesc": "Base DN é o nome distinto do local onde Mattermost deve começar sua busca para os usuários na árvore LDAP.", - "admin.ldap.baseEx": "Ex \"dc=mydomain,dc=com\"", + "admin.ldap.baseEx": "Ex \"ou=Unit Name,dc=corp,dc=example,dc=com\"", "admin.ldap.baseTitle": "BaseDN:", "admin.ldap.bindPwdDesc": "Senha do usuário fornecido em \"Bind Username\".", "admin.ldap.bindPwdTitle": "Vincular Senha:", "admin.ldap.bindUserDesc": "O nome de usuário usado para realizar a pesquisa LDAP. Isso deve ser tipicamente uma conta criada especificamente para uso do Mattermost. Deve ter acesso limitado a ler a parte da árvore LDAP especificado no campo BaseDN.", "admin.ldap.bindUserTitle": "Bind Username:", "admin.ldap.emailAttrDesc": "O atributo no servidor LDAP que será usado para preencher os endereços de e-mail de usuários no Mattermost.", - "admin.ldap.emailAttrEx": "Ex \"mail\"", + "admin.ldap.emailAttrEx": "Ex \"mail\" ou \"userPrincipalName\"", "admin.ldap.emailAttrTitle": "Atributo de E-mail:", "admin.ldap.enableDesc": "Quando verdadeiro, Mattermost permite login utilizando LDAP", "admin.ldap.enableTitle": "Ativar Login With LDAP:", @@ -1301,4 +1301,4 @@ "view_image_popover.download": "Download", "view_image_popover.file": "Arquivo {count} de {total}", "view_image_popover.publicLink": "Obter O Link Público" -}
\ No newline at end of file +} |