graceguo-supercat closed pull request #4031: [dashboard bug] apply custom css
for dashboard at initially load
URL: https://github.com/apache/incubator-superset/pull/4031
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/superset/assets/javascripts/dashboard/components/Controls.jsx
b/superset/assets/javascripts/dashboard/components/Controls.jsx
index caf04ca46b..1d66a51d10 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 a9434a8e10..5abf5f81b5 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);
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
With regards,
Apache Git Services
