diff options
Diffstat (limited to 'web/react/components/user_settings/custom_theme_chooser.jsx')
-rw-r--r-- | web/react/components/user_settings/custom_theme_chooser.jsx | 35 |
1 files changed, 33 insertions, 2 deletions
diff --git a/web/react/components/user_settings/custom_theme_chooser.jsx b/web/react/components/user_settings/custom_theme_chooser.jsx index 35f836adb..b7d90922a 100644 --- a/web/react/components/user_settings/custom_theme_chooser.jsx +++ b/web/react/components/user_settings/custom_theme_chooser.jsx @@ -3,6 +3,9 @@ import Constants from '../../utils/constants.jsx'; +const OverlayTrigger = ReactBootstrap.OverlayTrigger; +const Popover = ReactBootstrap.Popover; + export default class CustomThemeChooser extends React.Component { constructor(props) { super(props); @@ -19,6 +22,15 @@ export default class CustomThemeChooser extends React.Component { }); $('.color-picker').on('changeColor', this.onPickerChange); } + componentDidUpdate() { + const theme = this.props.theme; + Constants.THEME_ELEMENTS.forEach((element) => { + if (theme.hasOwnProperty(element.id) && element.id !== 'codeTheme') { + $('#' + element.id).data('colorpicker').color.setColor(theme[element.id]); + $('#' + element.id).colorpicker('update'); + } + }); + } onPickerChange(e) { const theme = this.props.theme; theme[e.target.id] = e.color.toHex(); @@ -72,6 +84,19 @@ export default class CustomThemeChooser extends React.Component { ); }); + var popoverContent = ( + <Popover + bsStyle='info' + id='code-popover' + className='code-popover' + > + <img + width='200' + src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'} + /> + </Popover> + ); + elements.push( <div className='col-sm-4 form-group' @@ -85,16 +110,22 @@ export default class CustomThemeChooser extends React.Component { <select className='form-control' type='text' - defaultValue={theme[element.id]} + value={theme[element.id]} onChange={this.onInputChange} > {codeThemeOptions} </select> + <OverlayTrigger + placement='top' + overlay={popoverContent} + ref='headerOverlay' + > <span className='input-group-addon'> <img src={'/static/images/themes/code_themes/' + theme[element.id] + '.png'} /> </span> + </OverlayTrigger> </div> </div> ); @@ -112,7 +143,7 @@ export default class CustomThemeChooser extends React.Component { <input className='form-control' type='text' - defaultValue={theme[element.id]} + value={theme[element.id]} onChange={this.onInputChange} /> <span className='input-group-addon'><i></i></span> |