From 457c93cd198083d8a874d5ed9eb969f72ab0d8f0 Mon Sep 17 00:00:00 2001 From: David Date: Thu, 4 Dec 2025 11:58:22 +0800 Subject: [PATCH 1/4] Started changing UI to match the rest of ComfyUI Completed Main Container --- js/comfyui-manager.js | 131 ++++++++++++++++++++++++++++++++++++------ 1 file changed, 112 insertions(+), 19 deletions(-) diff --git a/js/comfyui-manager.js b/js/comfyui-manager.js index e65a2c65..ebf4edd2 100644 --- a/js/comfyui-manager.js +++ b/js/comfyui-manager.js @@ -1249,31 +1249,124 @@ class ManagerMenuDialog extends ComfyDialog { constructor() { super(); - const close_button = $el("button", { id: "cm-close-button", type: "button", textContent: "Close", onclick: () => this.close() }); + const dialog_mask = $el("div.p-dialog-mask.p-overlay-mask.p-overlay-mask-enter", { + parent: document.body, + style: { + position: "fixed", + height: "100%", + width: "100%", + left: "0px", + top: "0px", + display: "flex", + justifyContent: "center", + alignItems: "center", + pointerEvents: "auto", + zIndex: "3203" + }, + // [FIXME] Make clicking the mask close the dialog + // data-pc-section="mask" + }); - const content = - $el("div.comfy-modal-content", + const header_actions = $el("div.p-dialog-header-actions", { + // [FIXME] + // data-pc-section="headeractions" + } + ); + + const close_button = $el("button.p-button.p-component.p-button-icon-only.p-button-secondary.p-button-rounded.p-button-text.p-dialog-close-button", { + parent: header_actions, + type: "button", + ariaLabel: "Close", + onclick: () => this.close(), + // "data-pc-name": "pcclosebutton", + // "data-p-disabled": "false", + // "data-p-severity": "secondary", + // "data-pc-group-section": "headericon", + // "data-pc-extend": "button", + // "data-pc-section": "root", + // [FIXME] Not sure how to do most of the SVG using $el + innerHTML: ' ' + } + ); + + const dialog_header = $el("div.p-dialog-header", { + // [FIXME] + // data-pc-section:"header" + }, + [ + $el("div", [ + $el("div", + { + id: "cm-manager", + // [FIXME] + // data-v-#########:"" + }, + [ + $el("h2.px-4", [ + // [TODO] Find better icon + $el("i.mdi.mdi-puzzle", { + style: { + "font-size": "1.25rem", + "margin-right": ".5rem" + } + }), + $el("span", { textContent: `ComfyUI Manager ${manager_version}` }) + ]) + ] + ) + ]), + header_actions + ] + ); + + const content = $el("div.p-dialog-content", + [ + $el("div.cm-menu-container", [ - $el("tr.cm-title", {}, [ - $el("font", {size:6, color:"white"}, [`ComfyUI Manager ${manager_version}`])] - ), - $el("br", {}, []), - $el("div.cm-menu-container", - [ - $el("div.cm-menu-column", [...this.createControlsLeft()]), - $el("div.cm-menu-column", [...this.createControlsMid()]), - $el("div.cm-menu-column", [...this.createControlsRight()]) - ]), + $el("div.cm-menu-column", [...this.createControlsLeft()]), + $el("div.cm-menu-column", [...this.createControlsMid()]), + $el("div.cm-menu-column", [...this.createControlsRight()]) + ]), - $el("br", {}, []), - close_button, - ] - ); + $el("br", {}, []), + ] + ); content.style.width = '100%'; content.style.height = '100%'; - this.element = $el("div.comfy-modal", { id:'cm-manager-dialog', parent: document.body }, [ content ]); + const manager_dialog = $el("div.p-dialog.p-component.global-dialog", { + id:'cm-manager-dialog', + parent: dialog_mask, + style: { + 'display': 'flex', + 'flex-direction': 'column', + 'pointer-events': 'auto', + 'margin': '0px', + }, + role: 'dialog', + ariaModal: 'true', + // [FIXME] + // ariaLabbelledby: 'cm-title', + // maximized: 'false', + // data-pc-name: 'dialog', + // data-pc-section: 'root', + // data-pd-focustrap: 'true' + }, + [ dialog_header, content ] + ); + + const hidden_accessible = $el("span.p-hidden-accessible.p-hidden-focusable", { + parent: manager_dialog, + tabindex: "0", + role: "presentation", + ariaHidden: "true", + "data-p-hidden-accessible": "true", + "data-p-hidden-focusable": "true", + "data-pc-section": "firstfocusableelement" + }); + + this.element = dialog_mask; } get isVisible() { @@ -1281,7 +1374,7 @@ class ManagerMenuDialog extends ComfyDialog { } show() { - this.element.style.display = "block"; + this.element.style.display = "flex"; } toggleVisibility() { From 1dde3c3ef06aab9602e849f3983010ac11e3d082 Mon Sep 17 00:00:00 2001 From: David Date: Fri, 5 Dec 2025 12:38:54 +0800 Subject: [PATCH 2/4] - Added layout formatting to components of the Manager dialog box - Pulled name from select and put it into a label (eg "DB: Channel" now has a label of DB and a dropdown with channel, etc) - Fixed incorrect z-index --- js/comfyui-manager.js | 157 +++++++++++++++++++++++++++--------------- 1 file changed, 103 insertions(+), 54 deletions(-) diff --git a/js/comfyui-manager.js b/js/comfyui-manager.js index ebf4edd2..23df42af 100644 --- a/js/comfyui-manager.js +++ b/js/comfyui-manager.js @@ -140,7 +140,7 @@ docStyle.innerHTML = ` } .cm-notice-board { - width: 290px; + width: 287px; height: 230px; overflow: auto; color: var(--input-text); @@ -260,6 +260,10 @@ const style = ` overflow: hidden; } +.cm-column-button { + margin-bottom: calc(var(--spacing)*2); +} + .cm-button { width: 310px; height: 30px; @@ -299,7 +303,6 @@ const style = ` } .cm-experimental { - width: 310px; border: 1px solid #555; border-radius: 5px; padding: 10px; @@ -831,7 +834,7 @@ class ManagerMenuDialog extends ComfyDialog { const isElectron = 'electronAPI' in window; update_comfyui_button = - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { type: "button", textContent: "Update ComfyUI", style: { @@ -842,7 +845,7 @@ class ManagerMenuDialog extends ComfyDialog { }); switch_comfyui_button = - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { type: "button", textContent: "Switch ComfyUI", style: { @@ -853,7 +856,7 @@ class ManagerMenuDialog extends ComfyDialog { }); restart_stop_button = - $el("button.cm-button-red", { + $el("button.cm-column-button.cm-button-red", { type: "button", textContent: "Restart", onclick: () => restartOrStop() @@ -861,7 +864,7 @@ class ManagerMenuDialog extends ComfyDialog { if(isElectron) { update_all_button = - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { type: "button", textContent: "Update All Custom Nodes", onclick: @@ -870,7 +873,7 @@ class ManagerMenuDialog extends ComfyDialog { } else { update_all_button = - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { type: "button", textContent: "Update All", onclick: @@ -880,7 +883,7 @@ class ManagerMenuDialog extends ComfyDialog { const res = [ - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { type: "button", textContent: "Custom Nodes Manager", onclick: @@ -888,11 +891,12 @@ class ManagerMenuDialog extends ComfyDialog { if(!CustomNodesManager.instance) { CustomNodesManager.instance = new CustomNodesManager(app, self); } + this.close(); CustomNodesManager.instance.show(CustomNodesManager.ShowMode.NORMAL); } }), - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { type: "button", textContent: "Install Missing Custom Nodes", onclick: @@ -900,11 +904,12 @@ class ManagerMenuDialog extends ComfyDialog { if(!CustomNodesManager.instance) { CustomNodesManager.instance = new CustomNodesManager(app, self); } + this.close() CustomNodesManager.instance.show(CustomNodesManager.ShowMode.MISSING); } }), - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { type: "button", textContent: "Custom Nodes In Workflow", onclick: @@ -912,12 +917,13 @@ class ManagerMenuDialog extends ComfyDialog { if(!CustomNodesManager.instance) { CustomNodesManager.instance = new CustomNodesManager(app, self); } + this.close() CustomNodesManager.instance.show(CustomNodesManager.ShowMode.IN_WORKFLOW); } }), $el("br", {}, []), - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { type: "button", textContent: "Model Manager", onclick: @@ -925,11 +931,12 @@ class ManagerMenuDialog extends ComfyDialog { if(!ModelManager.instance) { ModelManager.instance = new ModelManager(app, self); } + this.close() ModelManager.instance.show(); } }), - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { type: "button", textContent: "Install via Git URL", onclick: async () => { @@ -960,12 +967,13 @@ class ManagerMenuDialog extends ComfyDialog { let self = this; // db mode + this.datasrc_combo = document.createElement("select"); this.datasrc_combo.setAttribute("title", "Configure where to retrieve node/model information. If set to 'local,' the channel is ignored, and if set to 'channel (remote),' it fetches the latest information each time the list is opened."); - this.datasrc_combo.className = "cm-menu-combo"; - this.datasrc_combo.appendChild($el('option', { value: 'cache', text: 'DB: Channel (1day cache)' }, [])); - this.datasrc_combo.appendChild($el('option', { value: 'local', text: 'DB: Local' }, [])); - this.datasrc_combo.appendChild($el('option', { value: 'remote', text: 'DB: Channel (remote)' }, [])); + this.datasrc_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + this.datasrc_combo.appendChild($el('option', { value: 'cache', text: 'Channel (1day cache)' }, [])); + this.datasrc_combo.appendChild($el('option', { value: 'local', text: 'Local' }, [])); + this.datasrc_combo.appendChild($el('option', { value: 'remote', text: 'Channel (remote)' }, [])); api.fetchApi('/manager/db_mode') .then(response => response.text()) @@ -975,14 +983,16 @@ class ManagerMenuDialog extends ComfyDialog { api.fetchApi(`/manager/db_mode?value=${event.target.value}`); }); + const dbRetrievalSetttingItem = this.createSettingsCombo("DB", this.datasrc_combo); + // preview method let preview_combo = document.createElement("select"); preview_combo.setAttribute("title", "Configure how latent variables will be decoded during preview in the sampling process."); - preview_combo.className = "cm-menu-combo"; - preview_combo.appendChild($el('option', { value: 'auto', text: 'Preview method: Auto' }, [])); - preview_combo.appendChild($el('option', { value: 'taesd', text: 'Preview method: TAESD (slow)' }, [])); - preview_combo.appendChild($el('option', { value: 'latent2rgb', text: 'Preview method: Latent2RGB (fast)' }, [])); - preview_combo.appendChild($el('option', { value: 'none', text: 'Preview method: None (very fast)' }, [])); + preview_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + preview_combo.appendChild($el('option', { value: 'auto', text: 'Auto' }, [])); + preview_combo.appendChild($el('option', { value: 'taesd', text: 'TAESD (slow)' }, [])); + preview_combo.appendChild($el('option', { value: 'latent2rgb', text: 'Latent2RGB (fast)' }, [])); + preview_combo.appendChild($el('option', { value: 'none', text: 'None (very fast)' }, [])); api.fetchApi('/manager/preview_method') .then(response => response.text()) @@ -992,10 +1002,12 @@ class ManagerMenuDialog extends ComfyDialog { api.fetchApi(`/manager/preview_method?value=${event.target.value}`); }); + const previewSetttingItem = this.createSettingsCombo("Preview method", preview_combo); + // channel let channel_combo = document.createElement("select"); channel_combo.setAttribute("title", "Configure the channel for retrieving data from the Custom Node list (including missing nodes) or the Model list."); - channel_combo.className = "cm-menu-combo"; + channel_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; api.fetchApi('/manager/channel_url_list') .then(response => response.json()) .then(async data => { @@ -1004,7 +1016,7 @@ class ManagerMenuDialog extends ComfyDialog { for (let i in urls) { if (urls[i] != '') { let name_url = urls[i].split('::'); - channel_combo.appendChild($el('option', { value: name_url[0], text: `Channel: ${name_url[0]}` }, [])); + channel_combo.appendChild($el('option', { value: name_url[0], text: `${name_url[0]}` }, [])); } } @@ -1019,11 +1031,13 @@ class ManagerMenuDialog extends ComfyDialog { } }); + const channelSetttingItem = this.createSettingsCombo("Channel", channel_combo); + // share let share_combo = document.createElement("select"); share_combo.setAttribute("title", "Hide the share button in the main menu or set the default action upon clicking it. Additionally, configure the default share site when sharing via the context menu's share button."); - share_combo.className = "cm-menu-combo"; + share_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; const share_options = [ ['none', 'None'], ['openart', 'OpenArt AI'], @@ -1034,7 +1048,7 @@ class ManagerMenuDialog extends ComfyDialog { ['all', 'All'], ]; for (const option of share_options) { - share_combo.appendChild($el('option', { value: option[0], text: `Share: ${option[1]}` }, [])); + share_combo.appendChild($el('option', { value: option[0], text: `${option[1]}` }, [])); } api.fetchApi('/manager/share_option') @@ -1056,12 +1070,14 @@ class ManagerMenuDialog extends ComfyDialog { } }); + const shareSetttingItem = this.createSettingsCombo("Share", share_combo); + let component_policy_combo = document.createElement("select"); component_policy_combo.setAttribute("title", "When loading the workflow, configure which version of the component to use."); - component_policy_combo.className = "cm-menu-combo"; - component_policy_combo.appendChild($el('option', { value: 'workflow', text: 'Component: Use workflow version' }, [])); - component_policy_combo.appendChild($el('option', { value: 'higher', text: 'Component: Use higher version' }, [])); - component_policy_combo.appendChild($el('option', { value: 'mine', text: 'Component: Use my version' }, [])); + component_policy_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + component_policy_combo.appendChild($el('option', { value: 'workflow', text: 'Use workflow version' }, [])); + component_policy_combo.appendChild($el('option', { value: 'higher', text: 'Use higher version' }, [])); + component_policy_combo.appendChild($el('option', { value: 'mine', text: 'Use my version' }, [])); api.fetchApi('/manager/policy/component') .then(response => response.text()) .then(data => { @@ -1074,15 +1090,14 @@ class ManagerMenuDialog extends ComfyDialog { set_component_policy(event.target.value); }); - update_policy_combo = document.createElement("select"); + const componentSetttingItem = this.createSettingsCombo("Component", component_policy_combo); - if(isElectron) - update_policy_combo.style.display = 'none'; + update_policy_combo = document.createElement("select"); update_policy_combo.setAttribute("title", "Sets the policy to be applied when performing an update."); - update_policy_combo.className = "cm-menu-combo"; - update_policy_combo.appendChild($el('option', { value: 'stable-comfyui', text: 'Update: ComfyUI Stable Version' }, [])); - update_policy_combo.appendChild($el('option', { value: 'nightly-comfyui', text: 'Update: ComfyUI Nightly Version' }, [])); + update_policy_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + update_policy_combo.appendChild($el('option', { value: 'stable-comfyui', text: 'ComfyUI Stable Version' }, [])); + update_policy_combo.appendChild($el('option', { value: 'nightly-comfyui', text: 'ComfyUI Nightly Version' }, [])); api.fetchApi('/manager/policy/update') .then(response => response.text()) .then(data => { @@ -1093,20 +1108,25 @@ class ManagerMenuDialog extends ComfyDialog { api.fetchApi(`/manager/policy/update?value=${event.target.value}`); }); + const updateSetttingItem = this.createSettingsCombo("Update", update_policy_combo); + + if(isElectron) + updateSetttingItem.style.display = 'none'; + return [ $el("br", {}, []), - this.datasrc_combo, - channel_combo, - preview_combo, - share_combo, - component_policy_combo, - update_policy_combo, + dbRetrievalSetttingItem, + channelSetttingItem, + previewSetttingItem, + shareSetttingItem, + componentSetttingItem, + updateSetttingItem, $el("br", {}, []), $el("br", {}, []), $el("filedset.cm-experimental", {}, [ $el("legend.cm-experimental-legend", {}, ["EXPERIMENTAL"]), - $el("button.cm-experimental-button", { + $el("button.cm-experimental-button.cm-column-button", { type: "button", textContent: "Snapshot Manager", onclick: @@ -1116,7 +1136,7 @@ class ManagerMenuDialog extends ComfyDialog { SnapshotManager.instance.show(); } }), - $el("button.cm-experimental-button", { + $el("button.cm-experimental-button.cm-column-button", { type: "button", textContent: "Install PIP packages", onclick: @@ -1134,7 +1154,7 @@ class ManagerMenuDialog extends ComfyDialog { createControlsRight() { const elts = [ - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { id: 'cm-manual-button', type: "button", textContent: "Community Manual", @@ -1185,7 +1205,7 @@ class ManagerMenuDialog extends ComfyDialog { }) ]), - $el("button", { + $el("button.cm-column-button", { id: 'workflowgallery-button', type: "button", style: { @@ -1228,7 +1248,7 @@ class ManagerMenuDialog extends ComfyDialog { }) ]), - $el("button.cm-button", { + $el("button.cm-button.cm-column-button", { id: 'cm-nodeinfo-button', type: "button", textContent: "Nodes Info", @@ -1246,6 +1266,36 @@ class ManagerMenuDialog extends ComfyDialog { return elts; } + createSettingsCombo(label, content) { + const settingItem = $el("div.setting-item.mb-4", {}, [ + $el("div.flex.flex-row.items-center.gap-2",[ + $el("div.form-label.flex.grow.items-center", [ + $el("span.text-muted", { textContent: label },) + ]), + $el("div.form-input.flex.justify-end", + [content] + ) + ] + ) + ]); + return settingItem; + } + + createSettingsButton(label, content) { + const settingItem = $el("div.setting-item.mb-4", {}, [ + $el("div.flex.flex-row.items-center.gap-2",[ + $el("div.form-label.flex.grow.items-center", [ + $el("span.text-muted", { textContent: label },) + ]), + $el("div.form-input.flex.justify-end", + [content] + ) + ] + ) + ]); + return settingItem; + } + constructor() { super(); @@ -1261,9 +1311,13 @@ class ManagerMenuDialog extends ComfyDialog { justifyContent: "center", alignItems: "center", pointerEvents: "auto", - zIndex: "3203" + zIndex: "1000" }, - // [FIXME] Make clicking the mask close the dialog + onclick: (e) => { + if (e.target === dialog_mask) { + this.close(); + } + } // data-pc-section="mask" }); @@ -1289,17 +1343,12 @@ class ManagerMenuDialog extends ComfyDialog { } ); - const dialog_header = $el("div.p-dialog-header", { - // [FIXME] - // data-pc-section:"header" - }, + const dialog_header = $el("div.p-dialog-header", [ $el("div", [ $el("div", { id: "cm-manager", - // [FIXME] - // data-v-#########:"" }, [ $el("h2.px-4", [ From 3ae99bc761ec43ca3e6707306d9bdaf445bf84a8 Mon Sep 17 00:00:00 2001 From: David Date: Fri, 5 Dec 2025 12:46:40 +0800 Subject: [PATCH 3/4] Removed this.close() I added before finding z-index issue. --- js/comfyui-manager.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/js/comfyui-manager.js b/js/comfyui-manager.js index 23df42af..f3d760c3 100644 --- a/js/comfyui-manager.js +++ b/js/comfyui-manager.js @@ -329,8 +329,7 @@ const style = ` .cm-menu-combo { cursor: pointer; - width: 310px; - box-sizing: border-box; + } .cm-small-button { @@ -891,7 +890,6 @@ class ManagerMenuDialog extends ComfyDialog { if(!CustomNodesManager.instance) { CustomNodesManager.instance = new CustomNodesManager(app, self); } - this.close(); CustomNodesManager.instance.show(CustomNodesManager.ShowMode.NORMAL); } }), @@ -904,7 +902,6 @@ class ManagerMenuDialog extends ComfyDialog { if(!CustomNodesManager.instance) { CustomNodesManager.instance = new CustomNodesManager(app, self); } - this.close() CustomNodesManager.instance.show(CustomNodesManager.ShowMode.MISSING); } }), @@ -917,7 +914,6 @@ class ManagerMenuDialog extends ComfyDialog { if(!CustomNodesManager.instance) { CustomNodesManager.instance = new CustomNodesManager(app, self); } - this.close() CustomNodesManager.instance.show(CustomNodesManager.ShowMode.IN_WORKFLOW); } }), @@ -931,7 +927,6 @@ class ManagerMenuDialog extends ComfyDialog { if(!ModelManager.instance) { ModelManager.instance = new ModelManager(app, self); } - this.close() ModelManager.instance.show(); } }), @@ -970,7 +965,7 @@ class ManagerMenuDialog extends ComfyDialog { this.datasrc_combo = document.createElement("select"); this.datasrc_combo.setAttribute("title", "Configure where to retrieve node/model information. If set to 'local,' the channel is ignored, and if set to 'channel (remote),' it fetches the latest information each time the list is opened."); - this.datasrc_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + this.datasrc_combo.className = "cm-menu-combo p-select p-component p-inputwrapper p-inputwrapper-filled "; this.datasrc_combo.appendChild($el('option', { value: 'cache', text: 'Channel (1day cache)' }, [])); this.datasrc_combo.appendChild($el('option', { value: 'local', text: 'Local' }, [])); this.datasrc_combo.appendChild($el('option', { value: 'remote', text: 'Channel (remote)' }, [])); @@ -988,7 +983,7 @@ class ManagerMenuDialog extends ComfyDialog { // preview method let preview_combo = document.createElement("select"); preview_combo.setAttribute("title", "Configure how latent variables will be decoded during preview in the sampling process."); - preview_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + preview_combo.className = "cm-menu-combo p-select p-component p-inputwrapper p-inputwrapper-filled"; preview_combo.appendChild($el('option', { value: 'auto', text: 'Auto' }, [])); preview_combo.appendChild($el('option', { value: 'taesd', text: 'TAESD (slow)' }, [])); preview_combo.appendChild($el('option', { value: 'latent2rgb', text: 'Latent2RGB (fast)' }, [])); @@ -1007,7 +1002,7 @@ class ManagerMenuDialog extends ComfyDialog { // channel let channel_combo = document.createElement("select"); channel_combo.setAttribute("title", "Configure the channel for retrieving data from the Custom Node list (including missing nodes) or the Model list."); - channel_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + channel_combo.className = "cm-menu-combo p-select p-component p-inputwrapper p-inputwrapper-filled"; api.fetchApi('/manager/channel_url_list') .then(response => response.json()) .then(async data => { @@ -1037,7 +1032,7 @@ class ManagerMenuDialog extends ComfyDialog { // share let share_combo = document.createElement("select"); share_combo.setAttribute("title", "Hide the share button in the main menu or set the default action upon clicking it. Additionally, configure the default share site when sharing via the context menu's share button."); - share_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + share_combo.className = "cm-menu-combo p-select p-component p-inputwrapper p-inputwrapper-filled"; const share_options = [ ['none', 'None'], ['openart', 'OpenArt AI'], @@ -1074,7 +1069,7 @@ class ManagerMenuDialog extends ComfyDialog { let component_policy_combo = document.createElement("select"); component_policy_combo.setAttribute("title", "When loading the workflow, configure which version of the component to use."); - component_policy_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + component_policy_combo.className = "cm-menu-combo p-select p-component p-inputwrapper p-inputwrapper-filled"; component_policy_combo.appendChild($el('option', { value: 'workflow', text: 'Use workflow version' }, [])); component_policy_combo.appendChild($el('option', { value: 'higher', text: 'Use higher version' }, [])); component_policy_combo.appendChild($el('option', { value: 'mine', text: 'Use my version' }, [])); @@ -1095,7 +1090,7 @@ class ManagerMenuDialog extends ComfyDialog { update_policy_combo = document.createElement("select"); update_policy_combo.setAttribute("title", "Sets the policy to be applied when performing an update."); - update_policy_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled"; + update_policy_combo.className = "cm-menu-combo p-select p-component p-inputwrapper p-inputwrapper-filled"; update_policy_combo.appendChild($el('option', { value: 'stable-comfyui', text: 'ComfyUI Stable Version' }, [])); update_policy_combo.appendChild($el('option', { value: 'nightly-comfyui', text: 'ComfyUI Nightly Version' }, [])); api.fetchApi('/manager/policy/update') From 76fd32f1460fdd931a12969f53432779edfef312 Mon Sep 17 00:00:00 2001 From: David Date: Fri, 5 Dec 2025 13:47:30 +0800 Subject: [PATCH 4/4] Matched buttons and drop downs to match style of ComfyUI interface while keeping the colours the same as OG ComfyUI Manager --- js/comfyui-manager.js | 110 +++++++++++++++++++----------------------- 1 file changed, 49 insertions(+), 61 deletions(-) diff --git a/js/comfyui-manager.js b/js/comfyui-manager.js index f3d760c3..7f83b6ad 100644 --- a/js/comfyui-manager.js +++ b/js/comfyui-manager.js @@ -44,12 +44,16 @@ docStyle.innerHTML = ` #cm-manager-dialog { width: 1000px; - height: 455px; + height: auto; box-sizing: content-box; z-index: 1000; overflow-y: auto; } +#cm-manager-dialog br { + margin-bottom: 1em; +} + .cb-widget { width: 400px; height: 25px; @@ -80,6 +84,7 @@ docStyle.innerHTML = ` } .cm-menu-container { + padding : calc(var(--spacing)*2); column-gap: 20px; display: flex; flex-wrap: wrap; @@ -140,8 +145,8 @@ docStyle.innerHTML = ` } .cm-notice-board { - width: 287px; - height: 230px; + width: auto; + height: 280px; overflow: auto; color: var(--input-text); border: 1px solid var(--descrip-text); @@ -238,26 +243,14 @@ var is_updating = false; // copied style from https://github.com/pythongosssss/ComfyUI-Custom-Scripts const style = ` #workflowgallery-button { - width: 310px; - height: 27px; + height: 50px; padding: 0px !important; - position: relative; - overflow: hidden; - font-size: 17px !important; } #cm-nodeinfo-button { - width: 310px; - height: 27px; - padding: 0px !important; - position: relative; - overflow: hidden; - font-size: 17px !important; + } #cm-manual-button { - width: 310px; - height: 27px; - position: relative; - overflow: hidden; + } .cm-column-button { @@ -265,41 +258,36 @@ const style = ` } .cm-button { - width: 310px; - height: 30px; + width: auto; position: relative; overflow: hidden; - font-size: 17px !important; + background-color: #2b2a33; + border-color: #444454; + color: #ddd; +} + +.cm-button:hover { + background-color: #52525e; } .cm-button-red { - width: 310px; - height: 30px; - position: relative; - overflow: hidden; - font-size: 17px !important; background-color: #500000 !important; + border-color: #88181b !important; color: white !important; } +.cm-button-red:hover { + background-color: #88181b !important; +} .cm-button-orange { - width: 310px; - height: 30px; - position: relative; - overflow: hidden; - font-size: 17px !important; font-weight: bold; background-color: orange !important; color: black !important; } .cm-experimental-button { - width: 290px; - height: 30px; - position: relative; - overflow: hidden; - font-size: 17px !important; + width: 100%; } .cm-experimental { @@ -329,7 +317,10 @@ const style = ` .cm-menu-combo { cursor: pointer; - + padding: 0.5em 0.5em; + border: 1px solid #52525b; + border-radius: 6px; + background: #09090b; } .cm-small-button { @@ -833,7 +824,7 @@ class ManagerMenuDialog extends ComfyDialog { const isElectron = 'electronAPI' in window; update_comfyui_button = - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { type: "button", textContent: "Update ComfyUI", style: { @@ -844,7 +835,7 @@ class ManagerMenuDialog extends ComfyDialog { }); switch_comfyui_button = - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { type: "button", textContent: "Switch ComfyUI", style: { @@ -855,7 +846,7 @@ class ManagerMenuDialog extends ComfyDialog { }); restart_stop_button = - $el("button.cm-column-button.cm-button-red", { + $el("button.p-button.p-component.cm-column-button.cm-button-red", { type: "button", textContent: "Restart", onclick: () => restartOrStop() @@ -863,7 +854,7 @@ class ManagerMenuDialog extends ComfyDialog { if(isElectron) { update_all_button = - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { type: "button", textContent: "Update All Custom Nodes", onclick: @@ -872,7 +863,7 @@ class ManagerMenuDialog extends ComfyDialog { } else { update_all_button = - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { type: "button", textContent: "Update All", onclick: @@ -882,7 +873,7 @@ class ManagerMenuDialog extends ComfyDialog { const res = [ - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { type: "button", textContent: "Custom Nodes Manager", onclick: @@ -894,7 +885,7 @@ class ManagerMenuDialog extends ComfyDialog { } }), - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { type: "button", textContent: "Install Missing Custom Nodes", onclick: @@ -906,7 +897,7 @@ class ManagerMenuDialog extends ComfyDialog { } }), - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { type: "button", textContent: "Custom Nodes In Workflow", onclick: @@ -919,7 +910,7 @@ class ManagerMenuDialog extends ComfyDialog { }), $el("br", {}, []), - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { type: "button", textContent: "Model Manager", onclick: @@ -931,7 +922,7 @@ class ManagerMenuDialog extends ComfyDialog { } }), - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { type: "button", textContent: "Install via Git URL", onclick: async () => { @@ -1109,19 +1100,19 @@ class ManagerMenuDialog extends ComfyDialog { updateSetttingItem.style.display = 'none'; return [ - $el("br", {}, []), + // $el("br", {}, []), dbRetrievalSetttingItem, channelSetttingItem, previewSetttingItem, shareSetttingItem, componentSetttingItem, updateSetttingItem, - $el("br", {}, []), + // $el("br", {}, []), - $el("br", {}, []), - $el("filedset.cm-experimental", {}, [ + // $el("br", {}, []), + $el("filedset.cm-experimental.mt-auto", {}, [ $el("legend.cm-experimental-legend", {}, ["EXPERIMENTAL"]), - $el("button.cm-experimental-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-experimental-button.cm-column-button", { type: "button", textContent: "Snapshot Manager", onclick: @@ -1131,7 +1122,7 @@ class ManagerMenuDialog extends ComfyDialog { SnapshotManager.instance.show(); } }), - $el("button.cm-experimental-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-experimental-button", { type: "button", textContent: "Install PIP packages", onclick: @@ -1149,7 +1140,7 @@ class ManagerMenuDialog extends ComfyDialog { createControlsRight() { const elts = [ - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { id: 'cm-manual-button', type: "button", textContent: "Community Manual", @@ -1200,11 +1191,11 @@ class ManagerMenuDialog extends ComfyDialog { }) ]), - $el("button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { id: 'workflowgallery-button', type: "button", style: { - ...(localStorage.getItem("wg_last_visited") ? {height: '50px'} : {}) + // ...(localStorage.getItem("wg_last_visited") ? {height: '50px'} : {}) }, onclick: (e) => { const last_visited_site = localStorage.getItem("wg_last_visited") @@ -1227,7 +1218,7 @@ class ManagerMenuDialog extends ComfyDialog { }, [ $el("p", { id: 'workflowgallery-button-last-visited-label', - textContent: `(${localStorage.getItem("wg_last_visited") ? localStorage.getItem("wg_last_visited").split('/')[2] : ''})`, + textContent: `(${localStorage.getItem("wg_last_visited") ? localStorage.getItem("wg_last_visited").split('/')[2] : 'none selected'})`, style: { 'text-align': 'center', 'color': 'var(--input-text)', @@ -1243,13 +1234,12 @@ class ManagerMenuDialog extends ComfyDialog { }) ]), - $el("button.cm-button.cm-column-button", { + $el("button.p-button.p-component.cm-button.cm-column-button", { id: 'cm-nodeinfo-button', type: "button", textContent: "Nodes Info", onclick: () => { window.open("https://ltdrdata.github.io/", "comfyui-node-info"); } }), - $el("br", {}, []), ]; var textarea = document.createElement("div"); @@ -1371,8 +1361,6 @@ class ManagerMenuDialog extends ComfyDialog { $el("div.cm-menu-column", [...this.createControlsMid()]), $el("div.cm-menu-column", [...this.createControlsRight()]) ]), - - $el("br", {}, []), ] );