apply custom css for dashboard initially load (apache#4031)

michellethomas · May 23, 2018 · 141508f · 141508f
1 parent 39d7658
commit 141508f
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 25 deletions.
diff --git 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
@@ -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);