diff options
author | Christopher Speller <crspeller@gmail.com> | 2015-11-05 07:31:37 -0500 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2015-11-05 07:31:37 -0500 |
commit | 40eea5b5e31c807345b7e33e0faedbf8d00eab93 (patch) | |
tree | 9bd0949958978ae130ccf2e17bae6a59cc5a629b /web/react/components/user_settings/custom_theme_chooser.jsx | |
parent | 72a18e7d1093effbfee6845254470b6842a92236 (diff) | |
parent | a809ff88625e0fbaab8d14e2d35e85abd8fe6111 (diff) | |
download | chat-40eea5b5e31c807345b7e33e0faedbf8d00eab93.tar.gz chat-40eea5b5e31c807345b7e33e0faedbf8d00eab93.tar.bz2 chat-40eea5b5e31c807345b7e33e0faedbf8d00eab93.zip |
Merge pull request #1308 from asaadmahmoodspin/plt-960
Plt 960 - Moving code themes into custom themes
Diffstat (limited to 'web/react/components/user_settings/custom_theme_chooser.jsx')
-rw-r--r-- | web/react/components/user_settings/custom_theme_chooser.jsx | 79 |
1 files changed, 61 insertions, 18 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..895d0c500 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -55,28 +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 theme-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'> + <img + src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'} + /> + </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] + ','; + colors += theme[element.id] + ','; + } }); colors += theme.codeTheme; @@ -87,6 +129,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} |