From 1498a30bd39d92911068d29001a9d593c1aa990c Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Sun, 23 Aug 2020 11:05:55 +0200 Subject: [PATCH] Added an export all variables mode to the CSS editor and keep these changes persistent --- shared/js/ui/modal/css-editor/Controller.ts | 68 ++++++++++++++++---- shared/js/ui/modal/css-editor/Definitions.ts | 2 +- shared/js/ui/modal/css-editor/Renderer.tsx | 3 +- shared/js/ui/react-elements/Button.tsx | 5 +- 4 files changed, 61 insertions(+), 17 deletions(-) diff --git a/shared/js/ui/modal/css-editor/Controller.ts b/shared/js/ui/modal/css-editor/Controller.ts index 21d67bf1..2464d1ca 100644 --- a/shared/js/ui/modal/css-editor/Controller.ts +++ b/shared/js/ui/modal/css-editor/Controller.ts @@ -3,6 +3,7 @@ import {Stage} from "tc-loader"; import {CssEditorEvents, CssVariable} from "tc-shared/ui/modal/css-editor/Definitions"; import {spawnExternalModal} from "tc-shared/ui/react-elements/external-modal"; import {Registry} from "tc-shared/events"; +import {LogCategory, logWarn} from "tc-shared/log"; interface CustomVariable { name: string; @@ -14,13 +15,28 @@ class CssVariableManager { private customVariables: {[key: string]: CustomVariable} = {}; private htmlTag: HTMLStyleElement; - constructor() { + private loadLocalStorage() { + try { + const payloadString = localStorage.getItem("css-custom-variables"); + if(typeof payloadString === "undefined" || !payloadString) + return; + const payload = JSON.parse(payloadString); + if(payload.version !== 1) + throw "invalid payload version"; + + this.customVariables = payload["customVariables"]; + } catch (error) { + logWarn(LogCategory.GENERAL, tr("Failed to load custom variables: %o"), error); + } } initialize() { this.htmlTag = document.createElement("style"); document.body.appendChild(this.htmlTag); + + this.loadLocalStorage(); + this.updateCustomVariables(false); } getAllCssVariables() : CssVariable[] { @@ -61,7 +77,7 @@ class CssVariableManager { const customVariable = this.customVariables[name] || (this.customVariables[name] = { name: name, value: undefined, enabled: false }); customVariable.enabled = true; customVariable.value = value; - this.updateCustomVariables(); + this.updateCustomVariables(true); } toggleCustomVariable(name: string, flag: boolean, value?: string) { @@ -76,14 +92,31 @@ class CssVariableManager { customVariable.enabled = flag; if(flag && typeof value === "string") customVariable.value = value; - this.updateCustomVariables(); + this.updateCustomVariables(true); } - exportConfig() { - return JSON.stringify({ - version: 1, - variables: this.customVariables - }); + exportConfig(allValues: boolean) { + if(allValues) { + return JSON.stringify({ + version: 1, + variables: this.getAllCssVariables().map(variable => { + if(this.customVariables[variable.name]) { + return this.customVariables[variable.name]; + } + + return { + name: variable.name, + enabled: typeof variable.customValue !== "undefined", + value: typeof variable.customValue === "undefined" ? variable.defaultValue : variable.customValue + } + }) + }); + } else { + return JSON.stringify({ + version: 1, + variables: this.customVariables + }); + } } importConfig(config: string) { @@ -92,12 +125,12 @@ class CssVariableManager { throw "unsupported config version"; this.customVariables = data.variables; - this.updateCustomVariables(); + this.updateCustomVariables(true); } reset() { this.customVariables = {}; - this.updateCustomVariables(); + this.updateCustomVariables(true); } randomize() { @@ -109,15 +142,22 @@ class CssVariableManager { name: e.name } }); - this.updateCustomVariables(); + this.updateCustomVariables(true); } - private updateCustomVariables() { + private updateCustomVariables(updateConfig: boolean) { let text = "html:root {\n"; for(const variable of Object.values(this.customVariables)) text += " " + variable.name + ": " + variable.value + ";\n"; text += "}"; this.htmlTag.textContent = text; + + if(updateConfig) { + localStorage.setItem("css-custom-variables", JSON.stringify({ + version: 1, + customVariables: this.customVariables + })); + } } } let cssVariableManager: CssVariableManager; @@ -145,9 +185,9 @@ function cssVariableEditorController(events: Registry) { cssVariableManager.setVariable(event.variableName, event.value); }); - events.on("action_export", () => { + events.on("action_export", event => { events.fire_async("notify_export_result", { - config: cssVariableManager.exportConfig() + config: cssVariableManager.exportConfig(event.allValues) }); }); diff --git a/shared/js/ui/modal/css-editor/Definitions.ts b/shared/js/ui/modal/css-editor/Definitions.ts index 5fff4ac4..12aa5901 100644 --- a/shared/js/ui/modal/css-editor/Definitions.ts +++ b/shared/js/ui/modal/css-editor/Definitions.ts @@ -18,7 +18,7 @@ export interface CssEditorEvents { action_reset: { }, action_randomize: {}, - action_export: {}, + action_export: { allValues: boolean }, action_import: { config: string } query_css_variables: {}, diff --git a/shared/js/ui/modal/css-editor/Renderer.tsx b/shared/js/ui/modal/css-editor/Renderer.tsx index 892621df..e17104a4 100644 --- a/shared/js/ui/modal/css-editor/Renderer.tsx +++ b/shared/js/ui/modal/css-editor/Renderer.tsx @@ -324,7 +324,8 @@ const ControlButtons = (props: { events: Registry }) => { color={"blue"} type={"normal"} className={cssStyle.button} - onClick={() => props.events.fire("action_export")} + onClick={event => props.events.fire("action_export", { allValues: event.shiftKey })} + title={tr("Click to export the changed values, Shift click to export all values")} >Export