- Themed model manager and snapshot manager

- fixed incorrect id in gui builder

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]
 					)

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:

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;

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%;
+	width: 80vw;
-	height: 80%;
+	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;

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 = `
-<div class="cmm-manager-header">
+<div class="cmm-manager cmm-manager-dark">
-	<label>Filter
+	<div class="cmm-manager-grid"></div>
-		<select class="cmm-manager-filter"></select>
+	<div class="cmm-manager-selection"></div>
-	</label>
+	<div class="cmm-manager-message"></div>
-	<label>Type
+	<div class="cmm-manager-footer">
-		<select class="cmm-manager-type"></select>
+		<button class="cmm-manager-refresh p-button p-component">Refresh</button>
-	</label>
+		<button class="cmm-manager-stop p-button p-component">Stop</button>
-	<label>Base
+		<div class="cmm-flex-auto"></div>
-		<select class="cmm-manager-base"></select>
+	</div>
-	</label>
-	<input class="cmm-manager-keywords" type="search" placeholder="Search" />
-	<div class="cmm-manager-status"></div>
-	<div class="cmm-flex-auto"></div>
-</div>
-<div class="cmm-manager-grid"></div>
-<div class="cmm-manager-selection"></div>
-<div class="cmm-manager-message"></div>
-<div class="cmm-manager-footer">
-	<button class="cmm-manager-back">
-		<svg class="arrow-icon" width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-			<path d="M2 8H18M2 8L8 2M2 8L8 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-		</svg>
-		Back
-	</button>
-	<button class="cmm-manager-refresh">Refresh</button>
-	<button class="cmm-manager-stop">Stop</button>
-	<div class="cmm-flex-auto"></div>
 </div>
 `;
 
@@ -64,11 +47,23 @@ export class ModelManager {
 	}
 
 	init() {
-		this.element = $el("div", {
+		const header = $el("div.cmm-manager-header", {}, [
-			parent: document.body,
+			createSettingsCombo("Filter", $el("select.cmm-manager-filter")),
-			className: "comfy-modal cmm-manager"
+			createSettingsCombo("Type", $el("select.cmm-manager-type")),
-		});
+			createSettingsCombo("Base", $el("select.cmm-manager-base")),
-		this.element.innerHTML = pageHtml;
+			$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 `<div class="cmm-icon-passed">${icons.passed}</div>`;
 				}
-				return `<button class="cmm-btn-install" mode="install">Install</button>`;
+				return `<button class="cmm-btn-install p-button p-component" mode="install">Install</button>`;
 			}
 		}, {
 			id: 'url',
@@ -420,7 +415,7 @@ export class ModelManager {
 		}
 
 		this.selectedModels = selectedList;
-		this.showSelection(`<span>Selected <b>${selectedList.length}</b> models <button class="cmm-btn-install" mode="install">Install</button>`);
+		this.showSelection(`<span>Selected <b>${selectedList.length}</b> models <button class="cmm-btn-install p-button p-component" mode="install">Install</button>`);
 	}
 
 	focusInstall(item) {

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;
+}

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("<BR>To apply the snapshot, please <button id='cm-reboot-button2' class='cm-small-button'>RESTART</button> ComfyUI. And refresh browser.", 'cm-reboot-button2');
+			SnapshotManager.instance.updateMessage("<BR>To apply the snapshot, please <button id='cm-reboot-button2' class='p-button p-component'>RESTART</button> 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) {
+		while (this.content.children.length) {
-			this.element.removeChild(this.element.children[0]);
+			this.content.removeChild(this.content.children[0]);
 		}
 
 		await this.createGrid();
@@ -204,20 +217,21 @@ export class SnapshotManager extends ComfyDialog {
 				data2.innerHTML = `&nbsp;${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.content.appendChild(panel);
-		this.element.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);
+		const footer = $el("div.snapshot-footer");
-		this.element.appendChild(close_button);
+		const spacer = $el("div.cn-flex-auto");
-		this.element.appendChild(save_button);
+		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) {