From 7b8ea3434795905de4deb7c6bd6c0cfd4423d135 Mon Sep 17 00:00:00 2001 From: rgthree Date: Sun, 9 Jun 2024 15:29:16 -0400 Subject: [PATCH] Add css vars for colors for custom themeing. For #239 --- src_web/comfyui/rgthree.scss | 1 - src_web/common/progress_bar.ts | 34 ++++++++++++++++------------------ web/comfyui/rgthree.css | 1 - web/common/progress_bar.js | 31 ++++++++++++++++--------------- 4 files changed, 32 insertions(+), 35 deletions(-) diff --git a/src_web/comfyui/rgthree.scss b/src_web/comfyui/rgthree.scss index dd44fc9..a3a5dee 100644 --- a/src_web/comfyui/rgthree.scss +++ b/src_web/comfyui/rgthree.scss @@ -256,7 +256,6 @@ rgthree-progress-bar { font-size: 10px; width: 100%; overflow: hidden; - background: rgba(23, 23, 23, 0.9); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.25), diff --git a/src_web/common/progress_bar.ts b/src_web/common/progress_bar.ts index afb6c55..343a116 100644 --- a/src_web/common/progress_bar.ts +++ b/src_web/common/progress_bar.ts @@ -3,6 +3,7 @@ */ import { SERVICE as PROMPT_SERVICE, type PromptExecution } from "rgthree/common/prompt_service.js"; +import { createElement } from "./utils_dom.js"; /** * The progress bar web component. @@ -121,17 +122,24 @@ export class RgthreeProgressBar extends HTMLElement { this.shadow = this.attachShadow({ mode: "open" }); const sheet = new CSSStyleSheet(); sheet.replaceSync(` + :host { position: relative; overflow: hidden; box-sizing: border-box; + background: var(--rgthree-progress-bg-color); + --rgthree-progress-bg-color: rgba(23, 23, 23, 0.9); + --rgthree-progress-nodes-bg-color: rgb(0, 128, 0); + --rgthree-progress-steps-bg-color: rgb(0, 128, 0); + --rgthree-progress-error-bg-color: rgb(128, 0, 0); + --rgthree-progress-text-color: #fff; } :host * { box-sizing: inherit; } :host > div.bar { - background: rgba(0, 128, 0); + background: var(--rgthree-progress-nodes-bg-color); position: absolute; left: 0; top: 0; @@ -141,12 +149,13 @@ export class RgthreeProgressBar extends HTMLElement { transition: width 50ms ease-in-out; } :host > div.bar + div.bar { + background: var(--rgthree-progress-steps-bg-color); top: 50%; height: 50%; z-index: 2; } :host > div.bar.-error { - background: rgba(128, 0, 0); + background: var(--rgthree-progress-error-bg-color); } :host > .overlay { @@ -173,7 +182,7 @@ export class RgthreeProgressBar extends HTMLElement { padding: 0 6px; align-items: center; justify-content: start; - color: #fff; + color: var(--rgthree-progress-text-color); text-shadow: black 0px 0px 2px; } @@ -188,21 +197,10 @@ export class RgthreeProgressBar extends HTMLElement { `); this.shadow.adoptedStyleSheets = [sheet]; - const overlayEl = document.createElement("div"); - overlayEl.classList.add("overlay"); - this.shadow.appendChild(overlayEl); - - this.progressNodesEl = document.createElement("div"); - this.progressNodesEl.classList.add("bar"); - this.shadow.appendChild(this.progressNodesEl); - - this.progressStepsEl = document.createElement("div"); - this.progressStepsEl.classList.add("bar"); - this.shadow.appendChild(this.progressStepsEl); - - this.progressTextEl = document.createElement("span"); - this.progressTextEl.innerText = "Idle"; - this.shadow.appendChild(this.progressTextEl); + const overlayEl = createElement(`div.overlay[part="overlay"]`, {parent: this.shadow}); + this.progressNodesEl = createElement(`div.bar[part="progress-nodes"]`, {parent: this.shadow}); + this.progressStepsEl = createElement(`div.bar[part="progress-steps"]`, {parent: this.shadow}); + this.progressTextEl = createElement(`span[part="text"]`, {text: 'Idle', parent: this.shadow}); } disconnectedCallback() { diff --git a/web/comfyui/rgthree.css b/web/comfyui/rgthree.css index dd8c5be..96dd616 100644 --- a/web/comfyui/rgthree.css +++ b/web/comfyui/rgthree.css @@ -530,7 +530,6 @@ rgthree-progress-bar { font-size: 10px; width: 100%; overflow: hidden; - background: rgba(23, 23, 23, 0.9); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.25), 0px 1px 0px rgba(255, 255, 255, 0.125); } diff --git a/web/common/progress_bar.js b/web/common/progress_bar.js index fe52007..e8ef762 100644 --- a/web/common/progress_bar.js +++ b/web/common/progress_bar.js @@ -1,4 +1,5 @@ import { SERVICE as PROMPT_SERVICE } from "../common/prompt_service.js"; +import { createElement } from "./utils_dom.js"; export class RgthreeProgressBar extends HTMLElement { static create() { return document.createElement(RgthreeProgressBar.NAME); @@ -90,17 +91,24 @@ export class RgthreeProgressBar extends HTMLElement { this.shadow = this.attachShadow({ mode: "open" }); const sheet = new CSSStyleSheet(); sheet.replaceSync(` + :host { position: relative; overflow: hidden; box-sizing: border-box; + background: var(--rgthree-progress-bg-color); + --rgthree-progress-bg-color: rgba(23, 23, 23, 0.9); + --rgthree-progress-nodes-bg-color: rgb(0, 128, 0); + --rgthree-progress-steps-bg-color: rgb(0, 128, 0); + --rgthree-progress-error-bg-color: rgb(128, 0, 0); + --rgthree-progress-text-color: #fff; } :host * { box-sizing: inherit; } :host > div.bar { - background: rgba(0, 128, 0); + background: var(--rgthree-progress-nodes-bg-color); position: absolute; left: 0; top: 0; @@ -110,12 +118,13 @@ export class RgthreeProgressBar extends HTMLElement { transition: width 50ms ease-in-out; } :host > div.bar + div.bar { + background: var(--rgthree-progress-steps-bg-color); top: 50%; height: 50%; z-index: 2; } :host > div.bar.-error { - background: rgba(128, 0, 0); + background: var(--rgthree-progress-error-bg-color); } :host > .overlay { @@ -142,7 +151,7 @@ export class RgthreeProgressBar extends HTMLElement { padding: 0 6px; align-items: center; justify-content: start; - color: #fff; + color: var(--rgthree-progress-text-color); text-shadow: black 0px 0px 2px; } @@ -156,18 +165,10 @@ export class RgthreeProgressBar extends HTMLElement { } `); this.shadow.adoptedStyleSheets = [sheet]; - const overlayEl = document.createElement("div"); - overlayEl.classList.add("overlay"); - this.shadow.appendChild(overlayEl); - this.progressNodesEl = document.createElement("div"); - this.progressNodesEl.classList.add("bar"); - this.shadow.appendChild(this.progressNodesEl); - this.progressStepsEl = document.createElement("div"); - this.progressStepsEl.classList.add("bar"); - this.shadow.appendChild(this.progressStepsEl); - this.progressTextEl = document.createElement("span"); - this.progressTextEl.innerText = "Idle"; - this.shadow.appendChild(this.progressTextEl); + const overlayEl = createElement(`div.overlay[part="overlay"]`, { parent: this.shadow }); + this.progressNodesEl = createElement(`div.bar[part="progress-nodes"]`, { parent: this.shadow }); + this.progressStepsEl = createElement(`div.bar[part="progress-steps"]`, { parent: this.shadow }); + this.progressTextEl = createElement(`span[part="text"]`, { text: 'Idle', parent: this.shadow }); } disconnectedCallback() { this.connected = false;