diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-07-14 10:08:36 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2016-07-14 10:08:36 -0400 |
commit | caabfbcdd56bdced7c5c1d38e00f488adffe7c60 (patch) | |
tree | 4d52326767246f331da352f0427e34bf714e3130 /webapp/components/user_settings/import_theme_modal.jsx | |
parent | 8e810bc2ebb743717b5b0fc4541fcd3b2565966c (diff) | |
download | chat-caabfbcdd56bdced7c5c1d38e00f488adffe7c60.tar.gz chat-caabfbcdd56bdced7c5c1d38e00f488adffe7c60.tar.bz2 chat-caabfbcdd56bdced7c5c1d38e00f488adffe7c60.zip |
PLT-2992 Added the ability to use different themes for each team (#3411)
* Cleaned up user_settings_theme.jsx and import_theme_modal.jsx
* Made ImportThemeModal use a callback to return the theme to the user settings modal instead of saving it directly
* Moved user theme from model to preferences
* Added serverside API to delete preferences TODO update package with client stuff
* Changed constants.jsx so that Preferences and ActionTypes can be imported on their own
* Updated ThemeProps migration code to properly rename solarized code themes
* Fixed warnings thrown by AppDispatcher
* Added clientside UI to support team-specific themes
* Removed debugging code from test
* Fixed setting a user's theme when they haven't set their theme before
Diffstat (limited to 'webapp/components/user_settings/import_theme_modal.jsx')
-rw-r--r-- | webapp/components/user_settings/import_theme_modal.jsx | 91 |
1 files changed, 44 insertions, 47 deletions
diff --git a/webapp/components/user_settings/import_theme_modal.jsx b/webapp/components/user_settings/import_theme_modal.jsx index 552659c4c..32c6837e8 100644 --- a/webapp/components/user_settings/import_theme_modal.jsx +++ b/webapp/components/user_settings/import_theme_modal.jsx @@ -1,30 +1,18 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import ReactDOM from 'react-dom'; import ModalStore from 'stores/modal_store.jsx'; -import UserStore from 'stores/user_store.jsx'; -import * as Utils from 'utils/utils.jsx'; -import Client from 'utils/web_client.jsx'; import {Modal} from 'react-bootstrap'; -import AppDispatcher from '../../dispatcher/app_dispatcher.jsx'; import Constants from 'utils/constants.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; - -const holders = defineMessages({ - submitError: { - id: 'user.settings.import_theme.submitError', - defaultMessage: 'Invalid format, please try copying and pasting in again.' - } -}); +import {FormattedMessage} from 'react-intl'; const ActionTypes = Constants.ActionTypes; import React from 'react'; -class ImportThemeModal extends React.Component { +export default class ImportThemeModal extends React.Component { constructor(props) { super(props); @@ -33,26 +21,42 @@ class ImportThemeModal extends React.Component { this.handleChange = this.handleChange.bind(this); this.state = { + value: '', inputError: '', - show: false + show: false, + callback: null }; } + componentDidMount() { ModalStore.addModalListener(ActionTypes.TOGGLE_IMPORT_THEME_MODAL, this.updateShow); } + componentWillUnmount() { ModalStore.removeModalListener(ActionTypes.TOGGLE_IMPORT_THEME_MODAL, this.updateShow); } - updateShow(show) { - this.setState({show}); + + updateShow(show, args) { + this.setState({ + show, + callback: args.callback + }); } + handleSubmit(e) { e.preventDefault(); - const text = ReactDOM.findDOMNode(this.refs.input).value; + const text = this.state.value; if (!this.isInputValid(text)) { - this.setState({inputError: this.props.intl.formatMessage(holders.submitError)}); + this.setState({ + inputError: ( + <FormattedMessage + id='user.settings.import_theme.submitError' + defaultMessage='Invalid format, please try copying and pasting in again.' + /> + ) + }); return; } @@ -81,26 +85,13 @@ class ImportThemeModal extends React.Component { theme.mentionHighlightLink = '#2f81b7'; theme.codeTheme = 'github'; - const user = UserStore.getCurrentUser(); - user.theme_props = theme; - - Client.updateUser(user, Constants.UserUpdateEvents.THEME, - (data) => { - AppDispatcher.handleServerAction({ - type: ActionTypes.RECEIVED_ME, - me: data - }); - - this.setState({show: false}); - Utils.applyTheme(theme); - }, - (err) => { - var state = this.getStateFromStores(); - state.serverError = err; - this.setState(state); - } - ); + this.state.callback(theme); + this.setState({ + show: false, + callback: null + }); } + isInputValid(text) { if (text.length === 0) { return false; @@ -134,13 +125,25 @@ class ImportThemeModal extends React.Component { return true; } + handleChange(e) { - if (this.isInputValid(e.target.value)) { + const value = e.target.value; + this.setState({value}); + + if (this.isInputValid(value)) { this.setState({inputError: null}); } else { - this.setState({inputError: this.props.intl.formatMessage(holders.submitError)}); + this.setState({ + inputError: ( + <FormattedMessage + id='user.settings.import_theme.submitError' + defaultMessage='Invalid format, please try copying and pasting in again.' + /> + ) + }); } } + render() { return ( <span> @@ -170,9 +173,9 @@ class ImportThemeModal extends React.Component { <div className='form-group less'> <div className='col-sm-9'> <input - ref='input' type='text' className='form-control' + value={this.state.value} onChange={this.handleChange} /> <div className='input__help'> @@ -210,9 +213,3 @@ class ImportThemeModal extends React.Component { ); } } - -ImportThemeModal.propTypes = { - intl: intlShape.isRequired -}; - -export default injectIntl(ImportThemeModal); |