From 9b6b0676e1cc2b18fafa236456b22d0bea92654f Mon Sep 17 00:00:00 2001 From: David Date: Sat, 13 Dec 2025 20:46:31 +0800 Subject: [PATCH] - Themed model manager and snapshot manager - fixed incorrect id in gui builder --- js/comfyui-gui-builder.js | 4 +-- js/comfyui-manager.js | 4 +-- js/custom-nodes-manager.css | 5 ++- js/model-manager.css | 38 ++++++++++++++++++---- js/model-manager.js | 63 +++++++++++++++++------------------ js/snapshot.css | 65 +++++++++++++++++++++++++++++++++++++ js/snapshot.js | 61 ++++++++++++++++++++-------------- 7 files changed, 169 insertions(+), 71 deletions(-) create mode 100644 js/snapshot.css diff --git a/js/comfyui-gui-builder.js b/js/comfyui-gui-builder.js index 73357edd..e6de81c6 100644 --- a/js/comfyui-gui-builder.js +++ b/js/comfyui-gui-builder.js @@ -77,7 +77,7 @@ export function buildGuiFrame(dialogId, title, iconClass, content, owner) { $el("div", [ $el("div", { - id: "cm-manager", + id: "frame-title-container", }, [ $el("h2.px-4", [ @@ -182,7 +182,7 @@ export function buildGuiFrameCustomHeader(dialogId, customHeader, content, owner $el("div", [ $el("div", { - id: "cm-manager", + id: "frame-title-container", }, Array.isArray(_customHeader) ? _customHeader : [_customHeader] ) diff --git a/js/comfyui-manager.js b/js/comfyui-manager.js index e94c515f..60e38740 100644 --- a/js/comfyui-manager.js +++ b/js/comfyui-manager.js @@ -1107,7 +1107,7 @@ class ManagerMenuDialog extends ComfyDialog { shareSetttingItem, componentSetttingItem, updateSetttingItem, - + //[TODO] replace mt-2 with wrapper div with flex column gap $el("filedset.cm-experimental.mt-auto", {}, [ $el("legend.cm-experimental-legend", {}, ["EXPERIMENTAL"]), $el("button.p-button.p-component.cm-button.cm-experimental-button", { @@ -1120,7 +1120,7 @@ class ManagerMenuDialog extends ComfyDialog { SnapshotManager.instance.show(); } }), - $el("button.p-button.p-component.cm-button.cm-experimental-button", { + $el("button.p-button.p-component.cm-button.cm-experimental-button.mt-2", { type: "button", textContent: "Install PIP packages", onclick: diff --git a/js/custom-nodes-manager.css b/js/custom-nodes-manager.css index 4e0dd4d5..4ea82580 100644 --- a/js/custom-nodes-manager.css +++ b/js/custom-nodes-manager.css @@ -27,7 +27,6 @@ background-color: var(--comfy-input-bg); border-color: var(--border-color); margin: 0; - padding: 4px 8px; min-width: 100px; } @@ -615,6 +614,10 @@ height: 100%; } +.cn-install-buttons button { + padding: 4px 8px; +} + .cn-selected-buttons { display: flex; gap: 5px; diff --git a/js/model-manager.css b/js/model-manager.css index 3a34cb2d..6c9ab04a 100644 --- a/js/model-manager.css +++ b/js/model-manager.css @@ -1,13 +1,15 @@ .cmm-manager { --grid-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; z-index: 1099; - width: 80%; - height: 80%; + width: 80vw; + height: 75vh; + min-height: 30em; display: flex; flex-direction: column; gap: 10px; color: var(--fg-color); font-family: arial, sans-serif; + margin: calc(var(--spacing)*2); } .cmm-manager .cmm-flex-auto { @@ -18,14 +20,15 @@ font-size: 16px; color: var(--input-text); background-color: var(--comfy-input-bg); - border-radius: 8px; border-color: var(--border-color); - border-style: solid; margin: 0; - padding: 4px 8px; min-width: 100px; } +.cmm-manager button:hover { + filter: brightness(125%); +} + .cmm-manager button:disabled, .cmm-manager input:disabled, .cmm-manager select:disabled { @@ -38,7 +41,7 @@ .cmm-manager .cmm-manager-refresh { display: none; - background-color: #000080; + background-color: #000080 !important; color: white; } @@ -53,7 +56,6 @@ flex-wrap: wrap; gap: 5px; align-items: center; - padding: 0 5px; } .cmm-manager-header label { @@ -67,16 +69,34 @@ .cmm-manager-filter { height: 28px; line-height: 28px; + + cursor: pointer; + padding: 0.5em 0.5em; + border: 1px solid var(--border-color); + border-radius: 6px; + background: var(--comfy-input-bg); +} + +.cmm-manager-type:hover, +.cmm-manager-base:hover, +.cmm-manager-filter:hover { + filter: brightness(125%); } .cmm-manager-keywords { height: 28px; line-height: 28px; padding: 0 5px 0 26px; + background: var(--comfy-input-bg); background-size: 16px; background-position: 5px center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20pointer-events%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m21%2021-4.486-4.494M19%2010.5a8.5%208.5%200%201%201-17%200%208.5%208.5%200%200%201%2017%200%22%2F%3E%3C%2Fsvg%3E"); + + border: 1px solid var(--border-color); + border-radius: 6px; + + outline-color: transparent; } .cmm-manager-status { @@ -148,6 +168,10 @@ color: white; } +.cmm-btn-install { + padding: 4px 8px; +} + .cmm-btn-download { width: 18px; height: 18px; diff --git a/js/model-manager.js b/js/model-manager.js index 076dbb78..0f0de552 100644 --- a/js/model-manager.js +++ b/js/model-manager.js @@ -9,39 +9,22 @@ import { api } from "../../scripts/api.js"; // https://cenfun.github.io/turbogrid/api.html import TG from "./turbogrid.esm.js"; +import { buildGuiFrameCustomHeader, createSettingsCombo } from "./comfyui-gui-builder.js"; loadCss("./model-manager.css"); const gridId = "model"; const pageHtml = ` -
- - - - -
-
-
-
-
-
-
- - - -
+
+
+
+
+
+ + +
+
`; @@ -64,11 +47,23 @@ export class ModelManager { } init() { - this.element = $el("div", { - parent: document.body, - className: "comfy-modal cmm-manager" - }); - this.element.innerHTML = pageHtml; + const header = $el("div.cmm-manager-header", {}, [ + createSettingsCombo("Filter", $el("select.cmm-manager-filter")), + createSettingsCombo("Type", $el("select.cmm-manager-type")), + createSettingsCombo("Base", $el("select.cmm-manager-base")), + $el("input.cmm-manager-keywords.p-inputtext.p-component", { type: "search", placeholder: "Search" }), + $el("div.cmm-manager-status"), + $el("div.cmm-flex-auto") + ]); + + const frame = buildGuiFrameCustomHeader( + 'cmm-manager-dialog', // dialog id + header, // custom header element + pageHtml, // dialog content element + this + ); // send this so we can attach close functions + + this.element = frame; this.initFilter(); this.bindEvents(); this.initGrid(); @@ -347,7 +342,7 @@ export class ModelManager { if (installed === "True") { return `
${icons.passed}
`; } - return ``; + return ``; } }, { id: 'url', @@ -420,7 +415,7 @@ export class ModelManager { } this.selectedModels = selectedList; - this.showSelection(`Selected ${selectedList.length} models `); + this.showSelection(`Selected ${selectedList.length} models `); } focusInstall(item) { diff --git a/js/snapshot.css b/js/snapshot.css new file mode 100644 index 00000000..a06eb99b --- /dev/null +++ b/js/snapshot.css @@ -0,0 +1,65 @@ +.snapshot-manager { + --grid-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + z-index: 1099; + width: 80vw; + height: 75vh; + min-height: 30em; + display: flex; + flex-direction: column; + gap: 10px; + color: var(--fg-color); + font-family: arial, sans-serif; + text-underline-offset: 3px; + outline: none; + margin: calc(var(--spacing)*2); +} + +.snapshot-manager button { + width: auto; + position: relative; + overflow: hidden; + font-size: 16px; + color: var(--input-text); + background-color: var(--comfy-input-bg); + border-color: var(--border-color); + margin: 0; + min-width: 100px; + padding: 4px 8px; +} + +.snapshot-manager .snapshot-restore-btn { + background-color: #00158f !important; + border-color: #2025b9 !important; + color: white !important; +} + +.snapshot-manager .snapshot-remove-btn { + background-color: #970000 !important; + border-color: #be2127 !important; + color: white !important; +} + +.snapshot-manager button:hover { + filter: brightness(125%); +} + +.snapshot-manager .data-btns { + display: flex; + flex-direction: column; + gap: calc(var(--spacing)*2); + padding: calc(var(--spacing)*2); + align-items: center; + justify-content: center; + height: 100%; +} + +.snapshot-footer { + display: flex; + flex-wrap: wrap; + gap: 10px; + align-items: center; +} + +.snapshot-manager .cn-flex-auto { + flex: auto; +} \ No newline at end of file diff --git a/js/snapshot.js b/js/snapshot.js index 5e2900fa..b5dc0817 100644 --- a/js/snapshot.js +++ b/js/snapshot.js @@ -1,8 +1,10 @@ import { app } from "../../scripts/app.js"; import { api } from "../../scripts/api.js" import { ComfyDialog, $el } from "../../scripts/ui.js"; -import { manager_instance, rebootAPI, show_message, handle403Response } from "./common.js"; +import { manager_instance, rebootAPI, show_message, handle403Response, loadCss } from "./common.js"; +import { buildGuiFrame } from "./comfyui-gui-builder.js"; +loadCss("./snapshot.css"); async function restore_snapshot(target) { if(SnapshotManager.instance) { @@ -27,7 +29,7 @@ async function restore_snapshot(target) { } finally { await SnapshotManager.instance.invalidateControl(); - SnapshotManager.instance.updateMessage("
To apply the snapshot, please ComfyUI. And refresh browser.", 'cm-reboot-button2'); + SnapshotManager.instance.updateMessage("
To apply the snapshot, please ComfyUI. And refresh browser.", 'cm-reboot-button2'); } } } @@ -88,6 +90,8 @@ export class SnapshotManager extends ComfyDialog { message_box = null; data = null; + content = $el("div.snapshot-manager"); + clear() { this.restore_buttons = []; this.message_box = null; @@ -96,9 +100,18 @@ export class SnapshotManager extends ComfyDialog { constructor(app, manager_dialog) { super(); - this.manager_dialog = manager_dialog; + // this.manager_dialog = manager_dialog; this.search_keyword = ''; - this.element = $el("div.comfy-modal", { parent: document.body }, []); + + const frame = buildGuiFrame( + 'snapshot-manager-dialog', // dialog id + 'Snapshot Manager', // title + 'i.mdi.mdi-puzzle', // icon class + this.content, // dialog content element + this + ); // send this so we can attach close functions + + this.element = frame; } async remove_item() { @@ -109,7 +122,7 @@ export class SnapshotManager extends ComfyDialog { createControls() { return [ - $el("button.cm-small-button", { + $el("button.p-button.p-component", { type: "button", textContent: "Close", onclick: () => { this.close(); } @@ -132,8 +145,8 @@ export class SnapshotManager extends ComfyDialog { this.clear(); this.data = (await getSnapshotList()).items; - while (this.element.children.length) { - this.element.removeChild(this.element.children[0]); + while (this.content.children.length) { + this.content.removeChild(this.content.children[0]); } await this.createGrid(); @@ -204,20 +217,21 @@ export class SnapshotManager extends ComfyDialog { data2.innerHTML = ` ${data}`; var data_button = document.createElement('td'); data_button.style.textAlign = "center"; + data_button.className = "data-btns"; var restoreBtn = document.createElement('button'); + restoreBtn.className = "snapshot-restore-btn p-button p-component"; restoreBtn.innerHTML = 'Restore'; restoreBtn.style.width = "100px"; - restoreBtn.style.backgroundColor = 'blue'; restoreBtn.addEventListener('click', function() { restore_snapshot(data); }); var removeBtn = document.createElement('button'); + removeBtn.className = "snapshot-remove-btn p-button p-component"; removeBtn.innerHTML = 'Remove'; removeBtn.style.width = "100px"; - removeBtn.style.backgroundColor = 'red'; removeBtn.addEventListener('click', function() { remove_snapshot(data); @@ -241,13 +255,14 @@ export class SnapshotManager extends ComfyDialog { let self = this; const panel = document.createElement('div'); panel.style.width = "100%"; + panel.style.height = "100%"; panel.appendChild(grid); function handleResize() { const parentHeight = self.element.clientHeight; const gridHeight = parentHeight - 200; - grid.style.height = gridHeight + "px"; + // grid.style.height = gridHeight + "px"; } window.addEventListener("resize", handleResize); @@ -256,25 +271,17 @@ export class SnapshotManager extends ComfyDialog { grid.style.width = "100%"; grid.style.height = "100%"; grid.style.overflowY = "scroll"; - this.element.style.height = "85%"; - this.element.style.width = "80%"; - this.element.appendChild(panel); + + this.content.appendChild(panel); handleResize(); } async createBottomControls() { - var close_button = document.createElement("button"); - close_button.className = "cm-small-button"; - close_button.innerHTML = "Close"; - close_button.onclick = () => { this.close(); } - close_button.style.display = "inline-block"; - var save_button = document.createElement("button"); - save_button.className = "cm-small-button"; + save_button.className = "p-button p-component"; save_button.innerHTML = "Save snapshot"; save_button.onclick = () => { save_current_snapshot(); } - save_button.style.display = "inline-block"; save_button.style.horizontalAlign = "right"; save_button.style.width = "170px"; @@ -282,15 +289,19 @@ export class SnapshotManager extends ComfyDialog { this.message_box.style.height = '60px'; this.message_box.style.verticalAlign = 'middle'; - this.element.appendChild(this.message_box); - this.element.appendChild(close_button); - this.element.appendChild(save_button); + const footer = $el("div.snapshot-footer"); + const spacer = $el("div.cn-flex-auto"); + footer.appendChild(spacer); + footer.appendChild(save_button); + + this.content.appendChild(this.message_box); + this.content.appendChild(footer); } async show() { try { this.invalidateControl(); - this.element.style.display = "block"; + this.element.style.display = "flex"; this.element.style.zIndex = 1099; } catch(exception) {