diff options
| author | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-11-03 09:39:07 -0800 |
|---|---|---|
| committer | Reed Garmsen <rgarmsen2295@gmail.com> | 2015-11-04 13:05:55 -0800 |
| commit | 0054924cdbcdb3e3631bd7036244aebba4234c33 (patch) | |
| tree | 7d6ab9bc25066a4e025f3cd879099dcace7785c3 /web/react | |
| parent | aee6d9b608aceb7b68ab1e1a583917c2c3ee4485 (diff) | |
| download | chat-0054924cdbcdb3e3631bd7036244aebba4234c33.tar.gz chat-0054924cdbcdb3e3631bd7036244aebba4234c33.tar.bz2 chat-0054924cdbcdb3e3631bd7036244aebba4234c33.zip | |
Moved code theme picker into custom theme subarea
Diffstat (limited to 'web/react')
| -rw-r--r-- | web/react/components/user_settings/custom_theme_chooser.jsx | 78 | ||||
| -rw-r--r-- | web/react/components/user_settings/user_settings_appearance.jsx | 14 | ||||
| -rw-r--r-- | web/react/utils/constants.jsx | 24 |
3 files changed, 92 insertions, 24 deletions
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 095e5b622..07e3fb24c 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -55,26 +55,70 @@ 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> + <span className='input-group-addon'> + <i> + <img + src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'} + /> + </i> + </span> + </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] + ','; }); diff --git a/web/react/components/user_settings/user_settings_appearance.jsx b/web/react/components/user_settings/user_settings_appearance.jsx index 425645c1f..550c180c0 100644 --- a/web/react/components/user_settings/user_settings_appearance.jsx +++ b/web/react/components/user_settings/user_settings_appearance.jsx @@ -203,12 +203,7 @@ 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' @@ -228,6 +223,13 @@ 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 b8d346ba7..3cc76bd95 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -304,11 +304,33 @@ module.exports = { { id: 'mentionHighlightLink', uiName: 'Mention Highlight Link' + }, + { + id: 'codeTheme', + uiName: 'Code Theme', + themes: [ + { + id: 'solarized_dark', + uiName: 'Solarized Dark' + }, + { + id: 'solarized_light', + uiName: 'Solarized light' + }, + { + id: 'github', + uiName: 'GitHub' + }, + { + id: 'monokai', + uiName: 'Monokai' + } + ] } ], CODE_THEMES: { github: 'GitHub', - solarized_light: 'Solarized light', + solarized_light: 'Solarized Light', monokai: 'Monokai', solarized_dark: 'Solarized Dark' }, |