summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_settings
diff options
context:
space:
mode:
authorAsaad Mahmood <Unknowngi@live.com>2015-11-05 10:26:44 +0500
committerAsaad Mahmood <Unknowngi@live.com>2015-11-05 10:26:44 +0500
commit11ccb14fd46daf76bbde67c39c349ee742788b45 (patch)
tree62de1fd3b058956777b37f21e7931a47c08834bf /web/react/components/user_settings
parent8c2dace188c066f5f70264bc2a34b50d87512e10 (diff)
parent4897997025d07998e77cee4dd1c4252fff763db4 (diff)
downloadchat-11ccb14fd46daf76bbde67c39c349ee742788b45.tar.gz
chat-11ccb14fd46daf76bbde67c39c349ee742788b45.tar.bz2
chat-11ccb14fd46daf76bbde67c39c349ee742788b45.zip
Merge branch 'plt-960' of https://github.com/rgarmsen2295/platform into PLT-960
Diffstat (limited to 'web/react/components/user_settings')
-rw-r--r--web/react/components/user_settings/code_theme_chooser.jsx55
-rw-r--r--web/react/components/user_settings/custom_theme_chooser.jsx77
-rw-r--r--web/react/components/user_settings/user_settings_appearance.jsx17
3 files changed, 59 insertions, 90 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 095e5b622..986b0b2fd 100644
--- a/web/react/components/user_settings/custom_theme_chooser.jsx
+++ b/web/react/components/user_settings/custom_theme_chooser.jsx
@@ -55,28 +55,68 @@ export default class CustomThemeChooser extends React.Component {
const elements = [];
let colors = '';
Constants.THEME_ELEMENTS.forEach((element, index) => {
- elements.push(
- <div
- className='col-sm-4 form-group'
- key={'custom-theme-key' + index}
- >
- <label className='custom-label'>{element.uiName}</label>
+ if (element.id === 'codeTheme') {
+ const codeThemeOptions = [];
+
+ element.themes.forEach((codeTheme, codeThemeIndex) => {
+ codeThemeOptions.push(
+ <option
+ key={'code-theme-key' + codeThemeIndex}
+ value={codeTheme.id}
+ >
+ {codeTheme.uiName}
+ </option>
+ );
+ });
+
+ elements.push(
<div
- className='input-group color-picker'
- id={element.id}
+ className='col-sm-4 form-group'
+ key={'custom-theme-key' + index}
>
- <input
- className='form-control'
- type='text'
- defaultValue={theme[element.id]}
- onChange={this.onInputChange}
- />
- <span className='input-group-addon'><i></i></span>
+ <label className='custom-label'>{element.uiName}</label>
+ <div
+ className='input-group dropdown'
+ id={element.id}
+ >
+ <select
+ className='form-control'
+ type='text'
+ defaultValue={theme[element.id]}
+ onChange={this.onInputChange}
+ >
+ {codeThemeOptions}
+ </select>
+ <img
+ src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'}
+ />
+ </div>
</div>
- </div>
- );
+ );
+ } else {
+ elements.push(
+ <div
+ className='col-sm-4 form-group'
+ key={'custom-theme-key' + index}
+ >
+ <label className='custom-label'>{element.uiName}</label>
+ <div
+ className='input-group color-picker'
+ id={element.id}
+ >
+ <input
+ className='form-control'
+ type='text'
+ defaultValue={theme[element.id]}
+ onChange={this.onInputChange}
+ />
+ <span className='input-group-addon'><i></i></span>
+ </div>
+ </div>
+ );
- colors += theme[element.id] + ',';
+ colors += theme[element.id] + ',';
+ }
});
colors += theme.codeTheme;
@@ -87,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 425645c1f..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,12 +192,6 @@ export default class UserSettingsAppearance extends React.Component {
</div>
{custom}
<hr />
- <strong className='radio'>{'Code Theme'}</strong>
- <CodeThemeChooser
- theme={this.state.theme}
- updateTheme={this.updateCodeTheme}
- />
- <hr />
{serverError}
<a
className='btn btn-sm btn-primary'