diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/user_settings/code_theme_chooser.jsx | 55 | ||||
-rw-r--r-- | web/react/components/user_settings/custom_theme_chooser.jsx | 15 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_appearance.jsx | 19 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 20 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 10 |
5 files changed, 20 insertions, 99 deletions
diff --git a/web/react/components/user_settings/code_theme_chooser.jsx b/web/react/components/user_settings/code_theme_chooser.jsx deleted file mode 100644 index eef4b24ba..000000000 --- a/web/react/components/user_settings/code_theme_chooser.jsx +++ /dev/null @@ -1,55 +0,0 @@ -// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. -// See License.txt for license information. - -var Constants = require('../../utils/constants.jsx'); - -export default class CodeThemeChooser extends React.Component { - constructor(props) { - super(props); - this.state = {}; - } - render() { - const theme = this.props.theme; - - const premadeThemes = []; - for (const k in Constants.CODE_THEMES) { - if (Constants.CODE_THEMES.hasOwnProperty(k)) { - let activeClass = ''; - if (k === theme.codeTheme) { - activeClass = 'active'; - } - - premadeThemes.push( - <div - className='col-xs-6 col-sm-3 premade-themes' - key={'premade-theme-key' + k} - > - <div - className={activeClass} - onClick={() => this.props.updateTheme(k)} - > - <label> - <img - className='img-responsive' - src={'/static/images/themes/code_themes/' + k + '.png'} - /> - <div className='theme-label'>{Constants.CODE_THEMES[k]}</div> - </label> - </div> - </div> - ); - } - } - - return ( - <div className='row'> - {premadeThemes} - </div> - ); - } -} - -CodeThemeChooser.propTypes = { - theme: React.PropTypes.object.isRequired, - updateTheme: React.PropTypes.func.isRequired -}; diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 07e3fb24c..986b0b2fd 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -87,13 +87,9 @@ export default class CustomThemeChooser extends React.Component { > {codeThemeOptions} </select> - <span className='input-group-addon'> - <i> - <img - src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'} - /> - </i> - </span> + <img + src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'} + /> </div> </div> ); @@ -118,9 +114,9 @@ export default class CustomThemeChooser extends React.Component { </div> </div> ); - } - colors += theme[element.id] + ','; + colors += theme[element.id] + ','; + } }); colors += theme.codeTheme; @@ -131,6 +127,7 @@ export default class CustomThemeChooser extends React.Component { {'Copy and paste to share theme colors:'} </label> <input + readOnly='true' type='text' className='form-control' value={colors} diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx index 550c180c0..d73b5f476 100644 --- a/web/react/components/user_settings/user_settings_appearance.jsx +++ b/web/react/components/user_settings/user_settings_appearance.jsx @@ -7,7 +7,6 @@ var Utils = require('../../utils/utils.jsx'); const CustomThemeChooser = require('./custom_theme_chooser.jsx'); const PremadeThemeChooser = require('./premade_theme_chooser.jsx'); -const CodeThemeChooser = require('./code_theme_chooser.jsx'); const AppDispatcher = require('../../dispatcher/app_dispatcher.jsx'); const Constants = require('../../utils/constants.jsx'); const ActionTypes = Constants.ActionTypes; @@ -19,7 +18,6 @@ export default class UserSettingsAppearance extends React.Component { this.onChange = this.onChange.bind(this); this.submitTheme = this.submitTheme.bind(this); this.updateTheme = this.updateTheme.bind(this); - this.updateCodeTheme = this.updateCodeTheme.bind(this); this.deactivate = this.deactivate.bind(this); this.resetFields = this.resetFields.bind(this); this.handleImportModal = this.handleImportModal.bind(this); @@ -100,10 +98,6 @@ export default class UserSettingsAppearance extends React.Component { ); } updateTheme(theme) { - if (!theme.codeTheme) { - theme.codeTheme = this.state.theme.codeTheme; - } - let themeChanged = this.state.theme.length === theme.length; if (!themeChanged) { for (const field in theme) { @@ -121,11 +115,6 @@ export default class UserSettingsAppearance extends React.Component { this.setState({theme}); Utils.applyTheme(theme); } - updateCodeTheme(codeTheme) { - var theme = this.state.theme; - theme.codeTheme = codeTheme; - this.updateTheme(theme); - } updateType(type) { this.setState({type}); } @@ -203,7 +192,6 @@ export default class UserSettingsAppearance extends React.Component { </div> {custom} <hr /> - {serverError} <a className='btn btn-sm btn-primary' @@ -223,13 +211,6 @@ export default class UserSettingsAppearance extends React.Component { </div> ); - /* <strong className='radio'>{'Code Theme'}</strong> - <CodeThemeChooser - theme={this.state.theme} - updateTheme={this.updateCodeTheme} - /> - <hr /> */ - return ( <div> <div className='modal-header'> diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 3cc76bd95..7d885681a 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -159,7 +159,8 @@ module.exports = { buttonBg: '#2389d7', buttonColor: '#FFFFFF', mentionHighlightBg: '#fff2bb', - mentionHighlightLink: '#2f81b7' + mentionHighlightLink: '#2f81b7', + codeTheme: 'github' }, organization: { type: 'Organization', @@ -181,7 +182,8 @@ module.exports = { buttonBg: '#1dacfc', buttonColor: '#FFFFFF', mentionHighlightBg: '#fff2bb', - mentionHighlightLink: '#2f81b7' + mentionHighlightLink: '#2f81b7', + codeTheme: 'github' }, mattermostDark: { type: 'Mattermost Dark', @@ -203,7 +205,8 @@ module.exports = { buttonBg: '#4CBBA4', buttonColor: '#FFFFFF', mentionHighlightBg: '#984063', - mentionHighlightLink: '#A4FFEB' + mentionHighlightLink: '#A4FFEB', + codeTheme: 'solarized_dark' }, windows10: { type: 'Windows Dark', @@ -225,7 +228,8 @@ module.exports = { buttonBg: '#0177e7', buttonColor: '#FFFFFF', mentionHighlightBg: '#784098', - mentionHighlightLink: '#A4FFEB' + mentionHighlightLink: '#A4FFEB', + codeTheme: 'monokai' } }, THEME_ELEMENTS: [ @@ -315,7 +319,7 @@ module.exports = { }, { id: 'solarized_light', - uiName: 'Solarized light' + uiName: 'Solarized Light' }, { id: 'github', @@ -328,12 +332,6 @@ module.exports = { ] } ], - CODE_THEMES: { - github: 'GitHub', - solarized_light: 'Solarized Light', - monokai: 'Monokai', - solarized_dark: 'Solarized Dark' - }, DEFAULT_CODE_THEME: 'github', Preferences: { CATEGORY_DIRECT_CHANNEL_SHOW: 'direct_channel_show', diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index e8d34dccd..770ab01c5 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -438,11 +438,6 @@ export function toTitleCase(str) { } export function applyTheme(theme) { - if (!theme.codeTheme) { - theme.codeTheme = Constants.DEFAULT_CODE_THEME; - } - updateCodeTheme(theme.codeTheme); - if (theme.sidebarBg) { changeCss('.sidebar--left, .settings-modal .settings-table .settings-links, .sidebar--menu', 'background:' + theme.sidebarBg, 1); } @@ -598,6 +593,11 @@ export function applyTheme(theme) { if (theme.mentionHighlightLink) { changeCss('.mention-highlight .mention-link', 'color:' + theme.mentionHighlightLink, 1); } + + if (!theme.codeTheme) { + theme.codeTheme = Constants.DEFAULT_CODE_THEME; + } + updateCodeTheme(theme.codeTheme); } export function changeCss(className, classValue, classRepeat) { // we need invisible container to store additional css definitions |