From 094daff04db4924e14bd42bff9420e536efc7f23 Mon Sep 17 00:00:00 2001 From: Nicholas Case Date: Mon, 4 Jun 2018 09:39:32 -0700 Subject: [PATCH 1/5] support for customizable CSS, loads dynamically --- .eslintrc | 2 +- src/components/app.jsx | 80 ++++++++++++++++++- src/components/app.test.js | 14 ++-- src/components/closebutton/closebutton.jsx | 4 + src/components/footer/footer.jsx | 10 ++- src/components/footer/footer.less | 1 - src/components/popup/details/details.jsx | 14 +++- src/components/popup/details/details.test.js | 3 +- .../popup/details/purposes/purposes.jsx | 24 ++++-- .../popup/details/purposes/purposes.test.js | 4 + .../popup/details/vendors/vendors.jsx | 17 +++- .../popup/details/vendors/vendors.test.js | 4 + src/components/popup/intro/footer.jsx | 23 +++--- src/components/popup/intro/footer.less | 19 ++--- src/components/popup/intro/footerV2.jsx | 23 +++--- src/components/popup/intro/footerV2.less | 21 ++--- src/components/popup/intro/intro.jsx | 12 ++- src/components/popup/intro/introV2.jsx | 13 ++- src/components/popup/popup.jsx | 12 ++- src/components/popup/popup.test.js | 4 +- src/components/popup/popupFooter.jsx | 12 ++- src/lib/config.js | 37 +++++++-- 22 files changed, 272 insertions(+), 81 deletions(-) diff --git a/.eslintrc b/.eslintrc index 7801448..97176c0 100644 --- a/.eslintrc +++ b/.eslintrc @@ -59,7 +59,7 @@ "no-eval": 2, "no-implied-eval": 2, "no-new-func": 2, - "guard-for-in": 2, + "guard-for-in": 0, "eqeqeq": 1, "no-else-return": 2, "no-redeclare": 2, diff --git a/src/components/app.jsx b/src/components/app.jsx index 54b5818..d573e56 100644 --- a/src/components/app.jsx +++ b/src/components/app.jsx @@ -11,6 +11,73 @@ export default class App extends Component { store: this.props.store }; + elementsWithReplaceableCss = { + // Tables + "thead tr": {"background-color": this.props.config.css["color-table-background"]}, + "tr[class*=even]": {"background-color": this.props.config.css["color-table-background"]}, + + // Purposes + "div[class*=purposes_purposeItem]": { + "background-color": this.props.config.css["color-secondary"], + "color": this.props.config.css["color-text-secondary"] + }, + "div[class*=selectedPurpose]": { + "background-color": this.props.config.css["color-primary"], + "color": this.props.config.css["color-text-secondary"], + }, + + // Footer + "div[class*=footer_footer]": { + "border-top": "3px solid " + this.props.config.css["color-border"], + "background-color": this.props.config.css["color-background"] + }, + "div[class*=footerV2_extended]": {"border-top": "3px solid " + this.props.config.css["color-border"]}, + "div[class*=footerV2_container]": {"background-color": this.props.config.css["color-background"]}, + "svg": { + "background-color": this.props.config.css["color-background"], + "fill": this.props.config.css["color-primary"] + }, + + // Vendors + "[class*=active]": {"color": this.props.config.css["color-primary"]}, + + // Application wide + "div[name^=content]": { + "box-shadow": "0 0 0 3px " + this.props.config.css["color-border"], + "background-color": this.props.config.css["color-background"] + }, + ":not([name*=ctrl])": { + "font-family": this.props.config.css["font-family"] + }, + "[class*=primaryText]": {"color": this.props.config.css["color-text-primary"]}, + "[class*=secondaryText]": {"color": this.props.config.css["color-text-secondary"]}, + "a": {"color": this.props.config.css["color-linkColor"]}, + "span[class*=isSelected] [class*=visualizationGlow]": {"background-color": this.props.config.css["color-primary"]}, + "span[class*=isSelected] [class*=visualizationContainer]": {"background-color": this.props.config.css["color-primary"]}, + "[class*=button]": { + "color": this.props.config.css["color-background"], + "background-color": this.props.config.css["color-primary"], + }, + "[class*=button_invert]": { + "color": this.props.config.css["color-primary"], + "border": "2px solid " + this.props.config.css["color-primary"], + "background-color": this.props.config.css["color-background"] + }, + }; + + updateCSSPrefs = () => { + const elems = this.elementsWithReplaceableCss; + for(let elem in elems) { + let cssRules = elems[elem]; + let selectedEls = document.querySelectorAll(elem) || []; + selectedEls.forEach(function(currentEl) { + for(let cssProp in cssRules) { + currentEl.style[cssProp] = cssRules[cssProp]; + } + }) + } + }; + onSave = () => { const { store, notify } = this.props; store.persist(); @@ -19,7 +86,6 @@ export default class App extends Component { store.toggleFooterShowing(true); }; - updateState = (store) => { this.setState({ store }); }; @@ -29,8 +95,12 @@ export default class App extends Component { store.subscribe(this.updateState); } - render(props, state) { + componentDidMount() { + this.state.store.subscribe(this.updateCSSPrefs); + this.updateCSSPrefs(); + } + render(props, state) { const { store } = state; const { config } = props; const userLocalization = config.localization[currentLocale]; @@ -41,15 +111,21 @@ export default class App extends Component { store={store} localization={userLocalization} onSave={this.onSave} + config={config} + updateCSSPrefs={this.updateCSSPrefs} />