From 3dea2b0e3fa8f4d54d43b974c2dfd93c728c50a3 Mon Sep 17 00:00:00 2001 From: David Lu Date: Thu, 30 Jun 2016 08:46:19 -0400 Subject: PLT-3201 Code Theme Saves Upon Update (#3414) * Ensured code theme saves properly --- .../components/user_settings/custom_theme_chooser.jsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'webapp') diff --git a/webapp/components/user_settings/custom_theme_chooser.jsx b/webapp/components/user_settings/custom_theme_chooser.jsx index 560335379..b080c879d 100644 --- a/webapp/components/user_settings/custom_theme_chooser.jsx +++ b/webapp/components/user_settings/custom_theme_chooser.jsx @@ -108,15 +108,24 @@ class CustomThemeChooser extends React.Component { this.onPickerChange = this.onPickerChange.bind(this); this.pasteBoxChange = this.pasteBoxChange.bind(this); this.toggleContent = this.toggleContent.bind(this); + this.onCodeThemeChange = this.onCodeThemeChange.bind(this); this.state = {}; } + componentDidMount() { $('.color-picker').colorpicker({ format: 'hex' }); $('.color-picker').on('changeColor', this.onPickerChange); + $('.group--code').on('change', this.onCodeThemeChange); + } + + componentWillUnmount() { + $('.color-picker').off('changeColor', this.onPickerChange); + $('.group--code').off('change', this.onCodeThemeChange); } + componentDidUpdate() { const theme = this.props.theme; Constants.THEME_ELEMENTS.forEach((element) => { @@ -126,6 +135,7 @@ class CustomThemeChooser extends React.Component { } }); } + onPickerChange(e) { const inputBox = e.target.childNodes[0]; if (document.activeElement === inputBox && inputBox.value.length !== HEX_CODE_LENGTH) { @@ -137,6 +147,7 @@ class CustomThemeChooser extends React.Component { theme.type = 'custom'; this.props.updateTheme(theme); } + pasteBoxChange(e) { const text = e.target.value; @@ -162,6 +173,7 @@ class CustomThemeChooser extends React.Component { this.props.updateTheme(theme); } + toggleContent(e) { e.stopPropagation(); if ($(e.target).hasClass('theme-elements__header')) { @@ -172,6 +184,13 @@ class CustomThemeChooser extends React.Component { $(e.target).closest('.theme-elements__header').toggleClass('open'); } } + + onCodeThemeChange(e) { + const theme = this.props.theme; + theme.codeTheme = e.target.value; + this.props.updateTheme(theme); + } + render() { const {formatMessage} = this.props.intl; const theme = this.props.theme; -- cgit v1.2.3-1-g7c22