diff --git a/superset/assets/javascripts/dashboard/components/Controls.jsx b/superset/assets/javascripts/dashboard/components/Controls.jsx index caf04ca46b9..1d66a51d103 100644 --- a/superset/assets/javascripts/dashboard/components/Controls.jsx +++ b/superset/assets/javascripts/dashboard/components/Controls.jsx @@ -65,8 +65,11 @@ class Controls extends React.PureComponent { }; this.refresh = this.refresh.bind(this); this.toggleModal = this.toggleModal.bind(this); + this.updateDom = this.updateDom.bind(this); } componentWillMount() { + this.updateDom(this.state.css); + $.get('/csstemplateasyncmodelview/api/read', (data) => { const cssTemplates = data.result.map(row => ({ value: row.template_name, @@ -88,9 +91,28 @@ class Controls extends React.PureComponent { this.setState({ currentModal }); } changeCss(css) { - this.setState({ css }); + this.setState({ css }, () => { + this.updateDom(css); + }); this.props.onChange(); } + updateDom(css) { + const className = 'CssEditor-css'; + const head = document.head || document.getElementsByTagName('head')[0]; + let style = document.querySelector('.' + className); + + if (!style) { + style = document.createElement('style'); + style.className = className; + style.type = 'text/css'; + head.appendChild(style); + } + if (style.styleSheet) { + style.styleSheet.cssText = css; + } else { + style.innerHTML = css; + } + } render() { const { dashboard, userId, filters, addSlicesToDashboard, startPeriodicRender, @@ -175,7 +197,7 @@ class Controls extends React.PureComponent { faIcon="css3" /> } - initialCss={dashboard.css} + initialCss={this.state.css} templates={this.state.cssTemplates} onChange={this.changeCss.bind(this)} /> diff --git a/superset/assets/javascripts/dashboard/components/CssEditor.jsx b/superset/assets/javascripts/dashboard/components/CssEditor.jsx index a9434a8e10a..5abf5f81b55 100644 --- a/superset/assets/javascripts/dashboard/components/CssEditor.jsx +++ b/superset/assets/javascripts/dashboard/components/CssEditor.jsx @@ -30,30 +30,10 @@ class CssEditor extends React.PureComponent { cssTemplateOptions: [], }; } - componentWillMount() { - this.updateDom(); - } changeCss(css) { - this.setState({ css }, this.updateDom); - this.props.onChange(css); - } - updateDom() { - const css = this.state.css; - const className = 'CssEditor-css'; - const head = document.head || document.getElementsByTagName('head')[0]; - let style = document.querySelector('.' + className); - - if (!style) { - style = document.createElement('style'); - style.className = className; - style.type = 'text/css'; - head.appendChild(style); - } - if (style.styleSheet) { - style.styleSheet.cssText = css; - } else { - style.innerHTML = css; - } + this.setState({ css }, () => { + this.props.onChange(css); + }); } changeCssTemplate(opt) { this.changeCss(opt.css);