superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From grace...@apache.org
Subject [incubator-superset] branch master updated: apply custom css for dashboard initially load (#4031)
Date Fri, 08 Dec 2017 00:56:42 GMT
This is an automated email from the ASF dual-hosted git repository.

graceguo pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 61755f0  apply custom css for dashboard initially load (#4031)
61755f0 is described below

commit 61755f0b7d7754f4fd8d896e88f800d195004798
Author: Grace Guo <grace.guo@airbnb.com>
AuthorDate: Thu Dec 7 16:56:40 2017 -0800

    apply custom css for dashboard initially load (#4031)
---
 .../javascripts/dashboard/components/Controls.jsx  | 26 ++++++++++++++++++++--
 .../javascripts/dashboard/components/CssEditor.jsx | 26 +++-------------------
 2 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/superset/assets/javascripts/dashboard/components/Controls.jsx b/superset/assets/javascripts/dashboard/components/Controls.jsx
index caf04ca..1d66a51 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 a9434a8..5abf5f8 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);

-- 
To stop receiving notification emails like this one, please contact
['"commits@superset.apache.org" <commits@superset.apache.org>'].

Mime
View raw message