diff options
Diffstat (limited to 'web/react/components/user_settings')
-rw-r--r-- | web/react/components/user_settings/custom_theme_chooser.jsx | 8 | ||||
-rw-r--r-- | web/react/components/user_settings/premade_theme_chooser.jsx | 2 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings.jsx | 18 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_display.jsx | 24 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_modal.jsx | 21 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_theme.jsx (renamed from web/react/components/user_settings/user_settings_appearance.jsx) | 220 |
6 files changed, 151 insertions, 142 deletions
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 9116dd938..2d88a3650 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -222,7 +222,7 @@ class CustomThemeChooser extends React.Component { } else { elements.push( <div - className='col-sm-4 form-group' + className='col-sm-4 form-group element' key={'custom-theme-key' + index} > <label className='custom-label'>{formatMessage(messages[element.id])}</label> @@ -265,8 +265,8 @@ class CustomThemeChooser extends React.Component { ); return ( - <div> - <div className='row form-group'> + <div className='appearance-section'> + <div className='theme-elements row form-group'> {elements} </div> <div className='row'> @@ -283,4 +283,4 @@ CustomThemeChooser.propTypes = { updateTheme: React.PropTypes.func.isRequired }; -export default injectIntl(CustomThemeChooser);
\ No newline at end of file +export default injectIntl(CustomThemeChooser); diff --git a/web/react/components/user_settings/premade_theme_chooser.jsx b/web/react/components/user_settings/premade_theme_chooser.jsx index 9889bff5c..80ff8c4de 100644 --- a/web/react/components/user_settings/premade_theme_chooser.jsx +++ b/web/react/components/user_settings/premade_theme_chooser.jsx @@ -45,7 +45,7 @@ export default class PremadeThemeChooser extends React.Component { } return ( - <div className='row'> + <div className='row appearance-section'> {premadeThemes} </div> ); diff --git a/web/react/components/user_settings/user_settings.jsx b/web/react/components/user_settings/user_settings.jsx index 54d98bbde..4da51fa5f 100644 --- a/web/react/components/user_settings/user_settings.jsx +++ b/web/react/components/user_settings/user_settings.jsx @@ -6,7 +6,6 @@ import * as utils from '../../utils/utils.jsx'; import NotificationsTab from './user_settings_notifications.jsx'; import SecurityTab from './user_settings_security.jsx'; import GeneralTab from './user_settings_general.jsx'; -import AppearanceTab from './user_settings_appearance.jsx'; import DeveloperTab from './user_settings_developer.jsx'; import IntegrationsTab from './user_settings_integrations.jsx'; import DisplayTab from './user_settings_display.jsx'; @@ -85,21 +84,6 @@ export default class UserSettings extends React.Component { /> </div> ); - } else if (this.props.activeTab === 'appearance') { - return ( - <div> - <AppearanceTab - ref='activeTab' - activeSection={this.props.activeSection} - updateSection={this.props.updateSection} - updateTab={this.props.updateTab} - closeModal={this.props.closeModal} - collapseModal={this.props.collapseModal} - setEnforceFocus={this.props.setEnforceFocus} - setRequireConfirm={this.props.setRequireConfirm} - /> - </div> - ); } else if (this.props.activeTab === 'developer') { return ( <div> @@ -137,6 +121,8 @@ export default class UserSettings extends React.Component { updateTab={this.props.updateTab} closeModal={this.props.closeModal} collapseModal={this.props.collapseModal} + setEnforceFocus={this.props.setEnforceFocus} + setRequireConfirm={this.props.setRequireConfirm} /> </div> ); diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx index 776bde442..4b11c06fb 100644 --- a/web/react/components/user_settings/user_settings_display.jsx +++ b/web/react/components/user_settings/user_settings_display.jsx @@ -1,15 +1,18 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import {savePreferences} from '../../utils/client.jsx'; import SettingItemMin from '../setting_item_min.jsx'; import SettingItemMax from '../setting_item_max.jsx'; -import Constants from '../../utils/constants.jsx'; -const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; -import PreferenceStore from '../../stores/preference_store.jsx'; import ManageLanguages from './manage_languages.jsx'; +import ThemeSetting from './user_settings_theme.jsx'; + +import PreferenceStore from '../../stores/preference_store.jsx'; import * as Utils from '../../utils/utils.jsx'; +import Constants from '../../utils/constants.jsx'; +const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; + +import {savePreferences} from '../../utils/client.jsx'; import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; const holders = defineMessages({ @@ -452,6 +455,13 @@ class UserSettingsDisplay extends React.Component { /> </h3> <div className='divider-dark first'/> + <ThemeSetting + selected={this.props.activeSection === 'theme'} + updateSection={this.updateSection} + setRequireConfirm={this.props.setRequireConfirm} + setEnforceFocus={this.props.setEnforceFocus} + /> + <div className='divider-dark'/> {fontSection} <div className='divider-dark'/> {clockSection} @@ -472,7 +482,9 @@ UserSettingsDisplay.propTypes = { updateTab: React.PropTypes.func, activeSection: React.PropTypes.string, closeModal: React.PropTypes.func.isRequired, - collapseModal: React.PropTypes.func.isRequired + collapseModal: React.PropTypes.func.isRequired, + setRequireConfirm: React.PropTypes.func.isRequired, + setEnforceFocus: React.PropTypes.func.isRequired }; -export default injectIntl(UserSettingsDisplay);
\ No newline at end of file +export default injectIntl(UserSettingsDisplay); diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index 2a0a90cf5..e0b72157b 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -2,9 +2,13 @@ // See License.txt for license information. import ConfirmModal from '../confirm_modal.jsx'; -const Modal = ReactBootstrap.Modal; -import SettingsSidebar from '../settings_sidebar.jsx'; import UserSettings from './user_settings.jsx'; +import SettingsSidebar from '../settings_sidebar.jsx'; + +import UserStore from '../../stores/user_store.jsx'; +import * as Utils from '../../utils/utils.jsx'; + +const Modal = ReactBootstrap.Modal; import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; @@ -21,10 +25,6 @@ const holders = defineMessages({ id: 'user.settings.modal.notifications', defaultMessage: 'Notifications' }, - appearance: { - id: 'user.settings.modal.appearance', - defaultMessage: 'Appearance' - }, developer: { id: 'user.settings.modal.developer', defaultMessage: 'Developer' @@ -214,6 +214,12 @@ class UserSettingsModal extends React.Component { if (!skipConfirm && this.requireConfirm) { this.showConfirmModal(() => this.updateSection(section, true)); } else { + if (this.state.active_section === 'theme' && section !== 'theme') { + const user = UserStore.getCurrentUser(); + if (user.theme_props != null) { + Utils.applyTheme(user.theme_props); + } + } this.setState({active_section: section}); } } @@ -224,7 +230,6 @@ class UserSettingsModal extends React.Component { 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'}); - tabs.push({name: 'appearance', uiName: formatMessage(holders.appearance), icon: 'glyphicon glyphicon-wrench'}); if (global.window.mm_config.EnableOAuthServiceProvider === 'true') { tabs.push({name: 'developer', uiName: formatMessage(holders.developer), icon: 'glyphicon glyphicon-th'}); } @@ -294,4 +299,4 @@ UserSettingsModal.propTypes = { onModalDismissed: React.PropTypes.func.isRequired }; -export default injectIntl(UserSettingsModal);
\ No newline at end of file +export default injectIntl(UserSettingsModal); diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_theme.jsx index fb11dc81b..a0656feaa 100644 --- a/web/react/components/user_settings/user_settings_appearance.jsx +++ b/web/react/components/user_settings/user_settings_theme.jsx @@ -1,8 +1,10 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import CustomThemeChooser from './custom_theme_chooser.jsx'; import PremadeThemeChooser from './premade_theme_chooser.jsx'; +import SettingItemMin from '../setting_item_min.jsx'; +import SettingItemMax from '../setting_item_max.jsx'; import UserStore from '../../stores/user_store.jsx'; @@ -12,11 +14,22 @@ import * as Utils from '../../utils/utils.jsx'; import Constants from '../../utils/constants.jsx'; -import {FormattedMessage} from 'mm-intl'; +import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; const ActionTypes = Constants.ActionTypes; -export default class UserSettingsAppearance extends React.Component { +const holders = defineMessages({ + themeTitle: { + id: 'user.settings.display.theme.title', + defaultMessage: 'Theme' + }, + themeDescribe: { + id: 'user.settings.display.theme.describe', + defaultMessage: 'Open to manage your theme' + } +}); + +export default class ThemeSetting extends React.Component { constructor(props) { super(props); @@ -34,16 +47,21 @@ export default class UserSettingsAppearance extends React.Component { componentDidMount() { UserStore.addChangeListener(this.onChange); - if (this.props.activeSection === 'theme') { + if (this.props.selected) { $(ReactDOM.findDOMNode(this.refs[this.state.theme])).addClass('active-border'); } } componentDidUpdate() { - if (this.props.activeSection === 'theme') { + if (this.props.selected) { $('.color-btn').removeClass('active-border'); $(ReactDOM.findDOMNode(this.refs[this.state.theme])).addClass('active-border'); } } + componentWillReceiveProps(nextProps) { + if (!this.props.selected && nextProps.selected) { + this.resetFields(); + } + } componentWillUnmount() { UserStore.removeChangeListener(this.onChange); } @@ -96,6 +114,7 @@ export default class UserSettingsAppearance extends React.Component { this.props.setRequireConfirm(false); this.originalTheme = Object.assign({}, this.state.theme); this.scrollToTop(); + this.props.updateSection(''); }, (err) => { var state = this.getStateFromStores(); @@ -149,6 +168,8 @@ export default class UserSettingsAppearance extends React.Component { this.props.setEnforceFocus(false); } render() { + const {formatMessage} = this.props.intl; + var serverError; if (this.state.serverError) { serverError = this.state.serverError; @@ -160,136 +181,121 @@ export default class UserSettingsAppearance extends React.Component { let premade; if (displayCustom) { custom = ( - <CustomThemeChooser - theme={this.state.theme} - updateTheme={this.updateTheme} - /> + <div key='customThemeChooser'> + <br/> + <CustomThemeChooser + theme={this.state.theme} + updateTheme={this.updateTheme} + /> + </div> ); } else { premade = ( - <PremadeThemeChooser - theme={this.state.theme} - updateTheme={this.updateTheme} - /> + <div key='premadeThemeChooser'> + <br/> + <PremadeThemeChooser + theme={this.state.theme} + updateTheme={this.updateTheme} + /> + </div> ); } - const themeUI = ( - <div className='section-max appearance-section'> - <div className='col-sm-12'> - <div className='radio'> - <label> - <input type='radio' - checked={!displayCustom} - onChange={this.updateType.bind(this, 'premade')} - /> - <FormattedMessage - id='user.settings.appearance.themeColors' - defaultMessage='Theme Colors' - /> - </label> - <br/> - </div> - {premade} - <div className='radio'> - <label> - <input type='radio' - checked={displayCustom} - onChange={this.updateType.bind(this, 'custom')} - /> - <FormattedMessage - id='user.settings.appearance.customTheme' - defaultMessage='Custom Theme' - /> - </label> - <br/> - </div> - {custom} - <hr /> - {serverError} - <a - className='btn btn-sm btn-primary' - href='#' - onClick={this.submitTheme} - > - <FormattedMessage - id='user.settings.appearance.save' - defaultMessage='Save' + let themeUI; + if (this.props.selected) { + let inputs = []; + + inputs.push( + <div + className='radio' + key='premadeThemeColorLabel' + > + <label> + <input type='radio' + checked={!displayCustom} + onChange={this.updateType.bind(this, 'premade')} /> - </a> - <a - className='btn btn-sm theme' - href='#' - onClick={this.resetFields} - > <FormattedMessage - id='user.settings.appearance.cancel' - defaultMessage='Cancel' + id='user.settings.display.theme.themeColors' + defaultMessage='Theme Colors' /> - </a> + </label> + <br/> </div> - </div> - ); + ); - return ( - <div> - <div className='modal-header'> - <button - type='button' - className='close' - aria-label='Close' - onClick={this.props.closeModal} - > - <span aria-hidden='true'>{'×'}</span> - </button> - <h4 - className='modal-title' - ref='title' - > - <i - className='modal-back' - onClick={this.props.collapseModal} + inputs.push(premade); + + inputs.push( + <div + className='radio' + key='customThemeColorLabel' + > + <label> + <input type='radio' + checked={displayCustom} + onChange={this.updateType.bind(this, 'custom')} /> <FormattedMessage - id='user.settings.appearance.title' - defaultMessage='Appearance Settings' + id='user.settings.display.theme.customTheme' + defaultMessage='Custom Theme' /> - </h4> + </label> + <br/> </div> - <div className='user-settings'> - <h3 className='tab-header'> - <FormattedMessage - id='user.settings.appearance.title' - defaultMessage='Appearance Settings' - /> - </h3> - <div className='divider-dark first'/> - {themeUI} - <div className='divider-dark'/> + ); + + inputs.push(custom); + + inputs.push( + <div key='importSlackThemeButton'> <br/> <a className='theme' onClick={this.handleImportModal} > <FormattedMessage - id='user.settings.appearance.import' + id='user.settings.display.theme.import' defaultMessage='Import theme colors from Slack' /> </a> </div> - </div> - ); + ); + + themeUI = ( + <SettingItemMax + inputs={inputs} + submit={this.submitTheme} + server_error={serverError} + width='full' + updateSection={(e) => { + this.props.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + themeUI = ( + <SettingItemMin + title={formatMessage(holders.themeTitle)} + describe={formatMessage(holders.themeDescribe)} + updateSection={() => { + this.props.updateSection('theme'); + }} + /> + ); + } + + return themeUI; } } -UserSettingsAppearance.defaultProps = { - activeSection: '' -}; -UserSettingsAppearance.propTypes = { - activeSection: React.PropTypes.string, - updateTab: React.PropTypes.func, - closeModal: React.PropTypes.func.isRequired, - collapseModal: React.PropTypes.func.isRequired, +ThemeSetting.propTypes = { + intl: intlShape.isRequired, + selected: React.PropTypes.bool.isRequired, + updateSection: React.PropTypes.func.isRequired, setRequireConfirm: React.PropTypes.func.isRequired, setEnforceFocus: React.PropTypes.func.isRequired }; + +export default injectIntl(ThemeSetting); |