diff options
Diffstat (limited to 'webapp/components/user_settings/user_settings_theme.jsx')
-rw-r--r-- | webapp/components/user_settings/user_settings_theme.jsx | 362 |
1 files changed, 0 insertions, 362 deletions
diff --git a/webapp/components/user_settings/user_settings_theme.jsx b/webapp/components/user_settings/user_settings_theme.jsx deleted file mode 100644 index 871e3ccae..000000000 --- a/webapp/components/user_settings/user_settings_theme.jsx +++ /dev/null @@ -1,362 +0,0 @@ -// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -import $ from 'jquery'; -import ReactDOM from 'react-dom'; -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 PreferenceStore from 'stores/preference_store.jsx'; -import TeamStore from 'stores/team_store.jsx'; -import UserStore from 'stores/user_store.jsx'; - -import AppDispatcher from '../../dispatcher/app_dispatcher.jsx'; -import * as UserActions from 'actions/user_actions.jsx'; - -import * as Utils from 'utils/utils.jsx'; - -import {FormattedMessage} from 'react-intl'; - -import {ActionTypes, Constants, Preferences} from 'utils/constants.jsx'; - -import PropTypes from 'prop-types'; - -import React from 'react'; - -export default class ThemeSetting extends React.Component { - constructor(props) { - super(props); - - this.onChange = this.onChange.bind(this); - this.submitTheme = this.submitTheme.bind(this); - this.updateTheme = this.updateTheme.bind(this); - this.resetFields = this.resetFields.bind(this); - this.handleImportModal = this.handleImportModal.bind(this); - - this.state = this.getStateFromStores(); - - this.originalTheme = Object.assign({}, this.state.theme); - } - - componentDidMount() { - UserStore.addChangeListener(this.onChange); - - if (this.props.selected) { - $(ReactDOM.findDOMNode(this.refs[this.state.theme])).addClass('active-border'); - } - } - - componentDidUpdate() { - 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); - - if (this.props.selected) { - const state = this.getStateFromStores(); - Utils.applyTheme(state.theme); - } - } - - getStateFromStores() { - const teamId = TeamStore.getCurrentId(); - - const theme = PreferenceStore.getTheme(teamId); - if (!theme.codeTheme) { - theme.codeTheme = Constants.DEFAULT_CODE_THEME; - } - - let showAllTeamsCheckbox = false; - let applyToAllTeams = true; - - if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.LDAP === 'true') { - // show the "apply to all teams" checkbox if the user is on more than one team - showAllTeamsCheckbox = Object.keys(TeamStore.getAll()).length > 1; - - // check the "apply to all teams" checkbox by default if the user has any team-specific themes - applyToAllTeams = PreferenceStore.getCategory(Preferences.CATEGORY_THEME).size <= 1; - } - - return { - teamId: TeamStore.getCurrentId(), - theme, - type: theme.type || 'premade', - showAllTeamsCheckbox, - applyToAllTeams - }; - } - - onChange() { - const newState = this.getStateFromStores(); - - if (!Utils.areObjectsEqual(this.state, newState)) { - this.setState(newState); - } - - this.props.setEnforceFocus(true); - } - - scrollToTop() { - $('.ps-container.modal-body').scrollTop(0); - } - - submitTheme(e) { - e.preventDefault(); - - const teamId = this.state.applyToAllTeams ? '' : this.state.teamId; - - UserActions.saveTheme( - teamId, - this.state.theme, - () => { - this.props.setRequireConfirm(false); - this.originalTheme = Object.assign({}, this.state.theme); - this.scrollToTop(); - this.props.updateSection(''); - } - ); - } - - updateTheme(theme) { - let themeChanged = this.state.theme.length === theme.length; - if (!themeChanged) { - for (const field in theme) { - if (theme.hasOwnProperty(field)) { - if (this.state.theme[field] !== theme[field]) { - themeChanged = true; - break; - } - } - } - } - - this.props.setRequireConfirm(themeChanged); - - this.setState({theme}); - Utils.applyTheme(theme); - } - - updateType(type) { - this.setState({type}); - } - - resetFields() { - const state = this.getStateFromStores(); - state.serverError = null; - this.setState(state); - this.scrollToTop(); - - Utils.applyTheme(state.theme); - - this.props.setRequireConfirm(false); - } - - handleImportModal() { - AppDispatcher.handleViewAction({ - type: ActionTypes.TOGGLE_IMPORT_THEME_MODAL, - value: true, - callback: this.updateTheme - }); - - this.props.setEnforceFocus(false); - } - - render() { - var serverError; - if (this.state.serverError) { - serverError = this.state.serverError; - } - - const displayCustom = this.state.type === 'custom'; - const allowCustomThemes = global.mm_config.AllowCustomThemes !== 'false'; - - let custom; - let premade; - if (displayCustom && allowCustomThemes) { - custom = ( - <div key='customThemeChooser'> - <CustomThemeChooser - theme={this.state.theme} - updateTheme={this.updateTheme} - /> - </div> - ); - } else { - premade = ( - <div key='premadeThemeChooser'> - <br/> - <PremadeThemeChooser - theme={this.state.theme} - updateTheme={this.updateTheme} - /> - </div> - ); - } - - let themeUI; - if (this.props.selected) { - const inputs = []; - - if (allowCustomThemes) { - inputs.push( - <div - className='radio' - key='premadeThemeColorLabel' - > - <label> - <input - id='standardThemes' - type='radio' - name='theme' - checked={!displayCustom} - onChange={this.updateType.bind(this, 'premade')} - /> - <FormattedMessage - id='user.settings.display.theme.themeColors' - defaultMessage='Theme Colors' - /> - </label> - <br/> - </div> - ); - } - - inputs.push(premade); - - if (allowCustomThemes) { - inputs.push( - <div - className='radio' - key='customThemeColorLabel' - > - <label> - <input - id='customThemes' - type='radio' - name='theme' - checked={displayCustom} - onChange={this.updateType.bind(this, 'custom')} - /> - <FormattedMessage - id='user.settings.display.theme.customTheme' - defaultMessage='Custom Theme' - /> - </label> - </div> - ); - - inputs.push(custom); - - inputs.push( - <div key='otherThemes'> - <br/> - <a - id='otherThemes' - href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-theme-examples' - target='_blank' - rel='noopener noreferrer' - > - <FormattedMessage - id='user.settings.display.theme.otherThemes' - defaultMessage='See other themes' - /> - </a> - </div> - ); - - inputs.push( - <div - key='importSlackThemeButton' - className='padding-top' - > - <a - id='slackImportTheme' - className='theme' - onClick={this.handleImportModal} - > - <FormattedMessage - id='user.settings.display.theme.import' - defaultMessage='Import theme colors from Slack' - /> - </a> - </div> - ); - } - - let allTeamsCheckbox = null; - if (this.state.showAllTeamsCheckbox) { - allTeamsCheckbox = ( - <div className='checkbox user-settings__submit-checkbox'> - <label> - <input - id='applyThemeToAllTeams' - type='checkbox' - checked={this.state.applyToAllTeams} - onChange={(e) => this.setState({applyToAllTeams: e.target.checked})} - /> - <FormattedMessage - id='user.settings.display.theme.applyToAllTeams' - defaultMessage='Apply new theme to all my teams' - /> - </label> - </div> - ); - } - - themeUI = ( - <SettingItemMax - inputs={inputs} - submitExtra={allTeamsCheckbox} - submit={this.submitTheme} - server_error={serverError} - width='full' - updateSection={(e) => { - this.props.updateSection(''); - e.preventDefault(); - }} - /> - ); - } else { - themeUI = ( - <SettingItemMin - title={ - <FormattedMessage - id='user.settings.display.theme.title' - defaultMessage='Theme' - /> - } - describe={ - <FormattedMessage - id='user.settings.display.theme.describe' - defaultMessage='Open to manage your theme' - /> - } - updateSection={() => { - this.props.updateSection('theme'); - }} - /> - ); - } - - return themeUI; - } -} - -ThemeSetting.propTypes = { - selected: PropTypes.bool.isRequired, - updateSection: PropTypes.func.isRequired, - setRequireConfirm: PropTypes.func.isRequired, - setEnforceFocus: PropTypes.func.isRequired -}; |