wangbo/ComfyUI-Manager
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI-Manager.git synced 2025-12-24 05:40:49 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

- Added layout formatting to components of the Manager dialog box

Browse Source 
- 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
This commit is contained in:
David 2025-12-05 12:38:54 +08:00
parent 457c93cd19
commit 1dde3c3ef0
1 changed files with 103 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
js/comfyui-manager.js
View File

@ -140,7 +140,7 @@ docStyle.innerHTML = `
} }
.cm-notice-board { .cm-notice-board {
width: 290px; width: 287px;
height: 230px; height: 230px;
overflow: auto; overflow: auto;
color: var(--input-text); color: var(--input-text);
@ -260,6 +260,10 @@ const style = `
overflow: hidden; overflow: hidden;
} }
.cm-column-button {
margin-bottom: calc(var(--spacing)*2);
}
.cm-button { .cm-button {
width: 310px; width: 310px;
height: 30px; height: 30px;
@ -299,7 +303,6 @@ const style = `
} }
.cm-experimental { .cm-experimental {
width: 310px;
border: 1px solid #555; border: 1px solid #555;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 10px;
@ -831,7 +834,7 @@ class ManagerMenuDialog extends ComfyDialog {
const isElectron = 'electronAPI' in window; const isElectron = 'electronAPI' in window;
update_comfyui_button = update_comfyui_button =
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Update ComfyUI", textContent: "Update ComfyUI",
style: { style: {
@ -842,7 +845,7 @@ class ManagerMenuDialog extends ComfyDialog {
}); });
switch_comfyui_button = switch_comfyui_button =
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Switch ComfyUI", textContent: "Switch ComfyUI",
style: { style: {
@ -853,7 +856,7 @@ class ManagerMenuDialog extends ComfyDialog {
}); });
restart_stop_button = restart_stop_button =
$el("button.cm-button-red", { $el("button.cm-column-button.cm-button-red", {
type: "button", type: "button",
textContent: "Restart", textContent: "Restart",
onclick: () => restartOrStop() onclick: () => restartOrStop()
@ -861,7 +864,7 @@ class ManagerMenuDialog extends ComfyDialog {
if(isElectron) { if(isElectron) {
update_all_button = update_all_button =
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Update All Custom Nodes", textContent: "Update All Custom Nodes",
onclick: onclick:
@ -870,7 +873,7 @@ class ManagerMenuDialog extends ComfyDialog {
} }
else { else {
update_all_button = update_all_button =
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Update All", textContent: "Update All",
onclick: onclick:
@ -880,7 +883,7 @@ class ManagerMenuDialog extends ComfyDialog {
const res = const res =
[ [
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Custom Nodes Manager", textContent: "Custom Nodes Manager",
onclick: onclick:
@ -888,11 +891,12 @@ class ManagerMenuDialog extends ComfyDialog {
if(!CustomNodesManager.instance) { if(!CustomNodesManager.instance) {
CustomNodesManager.instance = new CustomNodesManager(app, self); CustomNodesManager.instance = new CustomNodesManager(app, self);
} }
this.close();
CustomNodesManager.instance.show(CustomNodesManager.ShowMode.NORMAL); CustomNodesManager.instance.show(CustomNodesManager.ShowMode.NORMAL);
} }
}), }),
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Install Missing Custom Nodes", textContent: "Install Missing Custom Nodes",
onclick: onclick:
@ -900,11 +904,12 @@ class ManagerMenuDialog extends ComfyDialog {
if(!CustomNodesManager.instance) { if(!CustomNodesManager.instance) {
CustomNodesManager.instance = new CustomNodesManager(app, self); CustomNodesManager.instance = new CustomNodesManager(app, self);
} }
this.close()
CustomNodesManager.instance.show(CustomNodesManager.ShowMode.MISSING); CustomNodesManager.instance.show(CustomNodesManager.ShowMode.MISSING);
} }
}), }),
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Custom Nodes In Workflow", textContent: "Custom Nodes In Workflow",
onclick: onclick:
@ -912,12 +917,13 @@ class ManagerMenuDialog extends ComfyDialog {
if(!CustomNodesManager.instance) { if(!CustomNodesManager.instance) {
CustomNodesManager.instance = new CustomNodesManager(app, self); CustomNodesManager.instance = new CustomNodesManager(app, self);
} }
this.close()
CustomNodesManager.instance.show(CustomNodesManager.ShowMode.IN_WORKFLOW); CustomNodesManager.instance.show(CustomNodesManager.ShowMode.IN_WORKFLOW);
} }
}), }),
$el("br", {}, []), $el("br", {}, []),
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Model Manager", textContent: "Model Manager",
onclick: onclick:
@ -925,11 +931,12 @@ class ManagerMenuDialog extends ComfyDialog {
if(!ModelManager.instance) { if(!ModelManager.instance) {
ModelManager.instance = new ModelManager(app, self); ModelManager.instance = new ModelManager(app, self);
} }
this.close()
ModelManager.instance.show(); ModelManager.instance.show();
} }
}), }),
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Install via Git URL", textContent: "Install via Git URL",
onclick: async () => { onclick: async () => {
@ -960,12 +967,13 @@ class ManagerMenuDialog extends ComfyDialog {
let self = this; let self = this;
// db mode // db mode
this.datasrc_combo = document.createElement("select"); 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.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.className = "p-select p-component p-inputwrapper p-inputwrapper-filled";
this.datasrc_combo.appendChild($el('option', { value: 'cache', text: 'DB: Channel (1day cache)' }, [])); this.datasrc_combo.appendChild($el('option', { value: 'cache', text: 'Channel (1day cache)' }, []));
this.datasrc_combo.appendChild($el('option', { value: 'local', text: 'DB: Local' }, [])); this.datasrc_combo.appendChild($el('option', { value: 'local', text: 'Local' }, []));
this.datasrc_combo.appendChild($el('option', { value: 'remote', text: 'DB: Channel (remote)' }, [])); this.datasrc_combo.appendChild($el('option', { value: 'remote', text: 'Channel (remote)' }, []));
api.fetchApi('/manager/db_mode') api.fetchApi('/manager/db_mode')
.then(response => response.text()) .then(response => response.text())
@ -975,14 +983,16 @@ class ManagerMenuDialog extends ComfyDialog {
api.fetchApi(`/manager/db_mode?value=${event.target.value}`); api.fetchApi(`/manager/db_mode?value=${event.target.value}`);
}); });
const dbRetrievalSetttingItem = this.createSettingsCombo("DB", this.datasrc_combo);
// preview method // preview method
let preview_combo = document.createElement("select"); 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.setAttribute("title", "Configure how latent variables will be decoded during preview in the sampling process.");
preview_combo.className = "cm-menu-combo"; preview_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled";
preview_combo.appendChild($el('option', { value: 'auto', text: 'Preview method: Auto' }, [])); preview_combo.appendChild($el('option', { value: 'auto', text: 'Auto' }, []));
preview_combo.appendChild($el('option', { value: 'taesd', text: 'Preview method: TAESD (slow)' }, [])); preview_combo.appendChild($el('option', { value: 'taesd', text: 'TAESD (slow)' }, []));
preview_combo.appendChild($el('option', { value: 'latent2rgb', text: 'Preview method: Latent2RGB (fast)' }, [])); preview_combo.appendChild($el('option', { value: 'latent2rgb', text: 'Latent2RGB (fast)' }, []));
preview_combo.appendChild($el('option', { value: 'none', text: 'Preview method: None (very fast)' }, [])); preview_combo.appendChild($el('option', { value: 'none', text: 'None (very fast)' }, []));
api.fetchApi('/manager/preview_method') api.fetchApi('/manager/preview_method')
.then(response => response.text()) .then(response => response.text())
@ -992,10 +1002,12 @@ class ManagerMenuDialog extends ComfyDialog {
api.fetchApi(`/manager/preview_method?value=${event.target.value}`); api.fetchApi(`/manager/preview_method?value=${event.target.value}`);
}); });
const previewSetttingItem = this.createSettingsCombo("Preview method", preview_combo);
// channel // channel
let channel_combo = document.createElement("select"); 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.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') api.fetchApi('/manager/channel_url_list')
.then(response => response.json()) .then(response => response.json())
.then(async data => { .then(async data => {
@ -1004,7 +1016,7 @@ class ManagerMenuDialog extends ComfyDialog {
for (let i in urls) { for (let i in urls) {
if (urls[i] != '') { if (urls[i] != '') {
let name_url = urls[i].split('::'); 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 // share
let share_combo = document.createElement("select"); 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.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 = [ const share_options = [
['none', 'None'], ['none', 'None'],
['openart', 'OpenArt AI'], ['openart', 'OpenArt AI'],
@ -1034,7 +1048,7 @@ class ManagerMenuDialog extends ComfyDialog {
['all', 'All'], ['all', 'All'],
]; ];
for (const option of share_options) { 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') 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"); 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.setAttribute("title", "When loading the workflow, configure which version of the component to use.");
component_policy_combo.className = "cm-menu-combo"; component_policy_combo.className = "p-select p-component p-inputwrapper p-inputwrapper-filled";
component_policy_combo.appendChild($el('option', { value: 'workflow', text: 'Component: Use workflow version' }, [])); component_policy_combo.appendChild($el('option', { value: 'workflow', text: 'Use workflow version' }, []));
component_policy_combo.appendChild($el('option', { value: 'higher', text: 'Component: Use higher version' }, [])); component_policy_combo.appendChild($el('option', { value: 'higher', text: 'Use higher version' }, []));
component_policy_combo.appendChild($el('option', { value: 'mine', text: 'Component: Use my version' }, [])); component_policy_combo.appendChild($el('option', { value: 'mine', text: 'Use my version' }, []));
api.fetchApi('/manager/policy/component') api.fetchApi('/manager/policy/component')
.then(response => response.text()) .then(response => response.text())
.then(data => { .then(data => {
@ -1074,15 +1090,14 @@ class ManagerMenuDialog extends ComfyDialog {
set_component_policy(event.target.value); 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 = document.createElement("select");
update_policy_combo.style.display = 'none';
update_policy_combo.setAttribute("title", "Sets the policy to be applied when performing an update."); 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.className = "p-select p-component p-inputwrapper p-inputwrapper-filled";
update_policy_combo.appendChild($el('option', { value: 'stable-comfyui', text: 'Update: ComfyUI Stable Version' }, [])); update_policy_combo.appendChild($el('option', { value: 'stable-comfyui', text: 'ComfyUI Stable Version' }, []));
update_policy_combo.appendChild($el('option', { value: 'nightly-comfyui', text: 'Update: ComfyUI Nightly Version' }, [])); update_policy_combo.appendChild($el('option', { value: 'nightly-comfyui', text: 'ComfyUI Nightly Version' }, []));
api.fetchApi('/manager/policy/update') api.fetchApi('/manager/policy/update')
.then(response => response.text()) .then(response => response.text())
.then(data => { .then(data => {
@ -1093,20 +1108,25 @@ class ManagerMenuDialog extends ComfyDialog {
api.fetchApi(`/manager/policy/update?value=${event.target.value}`); api.fetchApi(`/manager/policy/update?value=${event.target.value}`);
}); });
const updateSetttingItem = this.createSettingsCombo("Update", update_policy_combo);
if(isElectron)
updateSetttingItem.style.display = 'none';
return [ return [
$el("br", {}, []), $el("br", {}, []),
this.datasrc_combo, dbRetrievalSetttingItem,
channel_combo, channelSetttingItem,
preview_combo, previewSetttingItem,
share_combo, shareSetttingItem,
component_policy_combo, componentSetttingItem,
update_policy_combo, updateSetttingItem,
$el("br", {}, []), $el("br", {}, []),
$el("br", {}, []), $el("br", {}, []),
$el("filedset.cm-experimental", {}, [ $el("filedset.cm-experimental", {}, [
$el("legend.cm-experimental-legend", {}, ["EXPERIMENTAL"]), $el("legend.cm-experimental-legend", {}, ["EXPERIMENTAL"]),
$el("button.cm-experimental-button", { $el("button.cm-experimental-button.cm-column-button", {
type: "button", type: "button",
textContent: "Snapshot Manager", textContent: "Snapshot Manager",
onclick: onclick:
@ -1116,7 +1136,7 @@ class ManagerMenuDialog extends ComfyDialog {
SnapshotManager.instance.show(); SnapshotManager.instance.show();
} }
}), }),
$el("button.cm-experimental-button", { $el("button.cm-experimental-button.cm-column-button", {
type: "button", type: "button",
textContent: "Install PIP packages", textContent: "Install PIP packages",
onclick: onclick:
@ -1134,7 +1154,7 @@ class ManagerMenuDialog extends ComfyDialog {
createControlsRight() { createControlsRight() {
const elts = [ const elts = [
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
id: 'cm-manual-button', id: 'cm-manual-button',
type: "button", type: "button",
textContent: "Community Manual", textContent: "Community Manual",
@ -1185,7 +1205,7 @@ class ManagerMenuDialog extends ComfyDialog {
}) })
]), ]),
$el("button", { $el("button.cm-column-button", {
id: 'workflowgallery-button', id: 'workflowgallery-button',
type: "button", type: "button",
style: { style: {
@ -1228,7 +1248,7 @@ class ManagerMenuDialog extends ComfyDialog {
}) })
]), ]),
$el("button.cm-button", { $el("button.cm-button.cm-column-button", {
id: 'cm-nodeinfo-button', id: 'cm-nodeinfo-button',
type: "button", type: "button",
textContent: "Nodes Info", textContent: "Nodes Info",
@ -1246,6 +1266,36 @@ class ManagerMenuDialog extends ComfyDialog {
return elts; 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() { constructor() {
super(); super();
@ -1261,9 +1311,13 @@ class ManagerMenuDialog extends ComfyDialog {
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
pointerEvents: "auto", 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" // data-pc-section="mask"
}); });
@ -1289,17 +1343,12 @@ class ManagerMenuDialog extends ComfyDialog {
} }
); );
const dialog_header = $el("div.p-dialog-header", { const dialog_header = $el("div.p-dialog-header",
// [FIXME]
// data-pc-section:"header"
},
[ [
$el("div", [ $el("div", [
$el("div", $el("div",
{ {
id: "cm-manager", id: "cm-manager",
// [FIXME]
// data-v-#########:""
}, },
[ [
$el("h2.px-4", [ $el("h2.px-4", [