diff options
Diffstat (limited to 'web/react/components/user_settings')
6 files changed, 130 insertions, 22 deletions
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 2d88a3650..1e724bb6e 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -102,6 +102,7 @@ class CustomThemeChooser extends React.Component { this.onPickerChange = this.onPickerChange.bind(this); this.onInputChange = this.onInputChange.bind(this); this.pasteBoxChange = this.pasteBoxChange.bind(this); + this.toggleContent = this.toggleContent.bind(this); this.state = {}; } @@ -153,11 +154,23 @@ class CustomThemeChooser extends React.Component { this.props.updateTheme(theme); } + toggleContent(e) { + e.stopPropagation(); + if ($(e.target).hasClass('theme-elements__header')) { + $(e.target).next().slideToggle(); + $(e.target).toggleClass('open'); + } else { + $(e.target).closest('.theme-elements__header').next().slideToggle(); + $(e.target).closest('.theme-elements__header').toggleClass('open'); + } + } render() { const {formatMessage} = this.props.intl; const theme = this.props.theme; - const elements = []; + const sidebarElements = []; + const centerChannelElements = []; + const linkAndButtonElements = []; let colors = ''; Constants.THEME_ELEMENTS.forEach((element, index) => { if (element.id === 'codeTheme') { @@ -187,9 +200,9 @@ class CustomThemeChooser extends React.Component { </Popover> ); - elements.push( + centerChannelElements.push( <div - className='col-sm-4 form-group' + className='col-sm-6 form-group' key={'custom-theme-key' + index} > <label className='custom-label'>{formatMessage(messages[element.id])}</label> @@ -219,10 +232,54 @@ class CustomThemeChooser extends React.Component { </div> </div> ); + } else if (element.group === 'centerChannelElements') { + centerChannelElements.push( + <div + className='col-sm-6 form-group element' + key={'custom-theme-key' + index} + > + <label className='custom-label'>{formatMessage(messages[element.id])}</label> + <div + className='input-group color-picker' + id={element.id} + > + <input + className='form-control' + type='text' + value={theme[element.id]} + onChange={this.onInputChange} + /> + <span className='input-group-addon'><i></i></span> + </div> + </div> + ); + } else if (element.group === 'sidebarElements') { + sidebarElements.push( + <div + className='col-sm-6 form-group element' + key={'custom-theme-key' + index} + > + <label className='custom-label'>{formatMessage(messages[element.id])}</label> + <div + className='input-group color-picker' + id={element.id} + > + <input + className='form-control' + type='text' + value={theme[element.id]} + onChange={this.onInputChange} + /> + <span className='input-group-addon'><i></i></span> + </div> + </div> + ); + + colors += theme[element.id] + ','; } else { - elements.push( + linkAndButtonElements.push( <div - className='col-sm-4 form-group element' + className='col-sm-6 form-group element' key={'custom-theme-key' + index} > <label className='custom-label'>{formatMessage(messages[element.id])}</label> @@ -265,9 +322,51 @@ class CustomThemeChooser extends React.Component { ); return ( - <div className='appearance-section'> + <div className='appearance-section padding-top'> + <div className='theme-elements row'> + <div + className='theme-elements__header' + onClick={this.toggleContent} + > + {'Sidebar Styles'} + <div className='header__icon'> + <i className='fa fa-plus'></i> + <i className='fa fa-minus'></i> + </div> + </div> + <div className='theme-elements__body'> + {sidebarElements} + </div> + </div> + <div className='theme-elements row'> + <div + className='theme-elements__header' + onClick={this.toggleContent} + > + {'Center Channel Styles'} + <div className='header__icon'> + <i className='fa fa-plus'></i> + <i className='fa fa-minus'></i> + </div> + </div> + <div className='theme-elements__body'> + {centerChannelElements} + </div> + </div> <div className='theme-elements row form-group'> - {elements} + <div + className='theme-elements__header' + onClick={this.toggleContent} + > + {'Link and Button Styles'} + <div className='header__icon'> + <i className='fa fa-plus'></i> + <i className='fa fa-minus'></i> + </div> + </div> + <div className='theme-elements__body'> + {linkAndButtonElements} + </div> </div> <div className='row'> {pasteBox} diff --git a/web/react/components/user_settings/manage_incoming_hooks.jsx b/web/react/components/user_settings/manage_incoming_hooks.jsx index c6532b018..68e99be7d 100644 --- a/web/react/components/user_settings/manage_incoming_hooks.jsx +++ b/web/react/components/user_settings/manage_incoming_hooks.jsx @@ -183,7 +183,7 @@ export default class ManageIncomingHooks extends React.Component { <div key='addIncomingHook'> <FormattedHTMLMessage id='user.settings.hooks_in.description' - defaultMessage='Create webhook URLs for use in external integrations. Please see<a href="http://mattermost.org/webhooks" target="_blank">http://mattermost.org/webhooks</a> to learn more.' + defaultMessage='Create webhook URLs for use in external integrations. Please see <a href="http://docs.mattermost.com/developer/webhooks-incoming.html" target="_blank">incoming webhooks documentation</a> to learn more.' /> <div><label className='control-label padding-top x2'> <FormattedMessage diff --git a/web/react/components/user_settings/manage_outgoing_hooks.jsx b/web/react/components/user_settings/manage_outgoing_hooks.jsx index 3f88e9f41..9c3a60ed5 100644 --- a/web/react/components/user_settings/manage_outgoing_hooks.jsx +++ b/web/react/components/user_settings/manage_outgoing_hooks.jsx @@ -18,6 +18,10 @@ const holders = defineMessages({ callbackHolder: { id: 'user.settings.hooks_out.callbackHolder', defaultMessage: 'Each URL must start with http:// or https://' + }, + select: { + id: 'user.settings.hooks_out.select', + defaultMessage: '--- Select a channel ---' } }); @@ -153,10 +157,7 @@ class ManageOutgoingHooks extends React.Component { key='select-channel' value='' > - <FormattedMessage - id='user.settings.hooks_out.select' - defaultMessage='--- Select a channel ---' - /> + {this.props.intl.formatMessage(holders.select)} </option> ); @@ -283,7 +284,7 @@ class ManageOutgoingHooks extends React.Component { <div key='addOutgoingHook'> <FormattedHTMLMessage id='user.settings.hooks_out.addDescription' - defaultMessage='Create webhooks to send new message events to an external integration. Please see <a href="http://mattermost.org/webhooks">http://mattermost.org/webhooks</a> to learn more.' + defaultMessage='Create webhooks to send new message events to an external integration. Please see <a href="http://docs.mattermost.com/developer/webhooks-outgoing.html" target="_blank">outgoing webhooks documentation</a> to learn more.' /> <div><label className='control-label padding-top x2'> <FormattedMessage @@ -391,4 +392,4 @@ ManageOutgoingHooks.propTypes = { intl: intlShape.isRequired }; -export default injectIntl(ManageOutgoingHooks);
\ No newline at end of file +export default injectIntl(ManageOutgoingHooks); diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index 7e911f09a..5442f7ac4 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -234,7 +234,10 @@ class UserSettingsModal extends React.Component { render() { const {formatMessage} = this.props.intl; + var currentUser = UserStore.getCurrentUser(); + var isAdmin = Utils.isAdmin(currentUser.roles); var tabs = []; + tabs.push({name: 'general', uiName: formatMessage(holders.general), icon: 'glyphicon glyphicon-cog'}); tabs.push({name: 'security', uiName: formatMessage(holders.security), icon: 'glyphicon glyphicon-lock'}); tabs.push({name: 'notifications', uiName: formatMessage(holders.notifications), icon: 'glyphicon glyphicon-exclamation-sign'}); @@ -243,8 +246,17 @@ class UserSettingsModal extends React.Component { } if (global.window.mm_config.EnableIncomingWebhooks === 'true' || global.window.mm_config.EnableOutgoingWebhooks === 'true' || global.window.mm_config.EnableCommands === 'true') { - tabs.push({name: 'integrations', uiName: formatMessage(holders.integrations), icon: 'glyphicon glyphicon-transfer'}); + var show = global.window.mm_config.EnableOnlyAdminIntegrations !== 'true'; + + if (global.window.mm_config.EnableOnlyAdminIntegrations === 'true' && isAdmin) { + show = true; + } + + if (show) { + tabs.push({name: 'integrations', uiName: formatMessage(holders.integrations), icon: 'glyphicon glyphicon-transfer'}); + } } + tabs.push({name: 'display', uiName: formatMessage(holders.display), icon: 'glyphicon glyphicon-eye-open'}); tabs.push({name: 'advanced', uiName: formatMessage(holders.advanced), icon: 'glyphicon glyphicon-list-alt'}); diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx index 5693047c2..53d79906f 100644 --- a/web/react/components/user_settings/user_settings_security.jsx +++ b/web/react/components/user_settings/user_settings_security.jsx @@ -11,6 +11,7 @@ import TeamStore from '../../stores/team_store.jsx'; import * as Client from '../../utils/client.jsx'; import * as AsyncClient from '../../utils/async_client.jsx'; +import * as Utils from '../../utils/utils.jsx'; import Constants from '../../utils/constants.jsx'; import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; @@ -216,15 +217,12 @@ class SecurityTab extends React.Component { var describe; var d = new Date(this.props.user.last_password_update); - var timeOfDay = ' am'; - if (d.getHours() >= 12) { - timeOfDay = ' pm'; - } const locale = global.window.mm_locale; + const hours12 = !Utils.isMilitaryTime(); describe = formatMessage(holders.lastUpdated, { date: d.toLocaleDateString(locale, {month: 'short', day: '2-digit', year: 'numeric'}), - time: d.toLocaleTimeString(locale, {hours12: true, hour: '2-digit', minute: '2-digit'}) + timeOfDay + time: d.toLocaleTimeString(locale, {hour12: hours12, hour: '2-digit', minute: '2-digit'}) }); updateSectionStatus = function updateSection() { diff --git a/web/react/components/user_settings/user_settings_theme.jsx b/web/react/components/user_settings/user_settings_theme.jsx index 34c688db1..74975d115 100644 --- a/web/react/components/user_settings/user_settings_theme.jsx +++ b/web/react/components/user_settings/user_settings_theme.jsx @@ -182,7 +182,6 @@ export default class ThemeSetting extends React.Component { if (displayCustom) { custom = ( <div key='customThemeChooser'> - <br/> <CustomThemeChooser theme={this.state.theme} updateTheme={this.updateTheme} @@ -241,7 +240,6 @@ export default class ThemeSetting extends React.Component { defaultMessage='Custom Theme' /> </label> - <br/> </div> ); |