diff --git a/js/comfyui-manager.js b/js/comfyui-manager.js
index e65a2c65..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: 290px;
- height: 230px;
+ width: auto;
+ height: 280px;
overflow: auto;
color: var(--input-text);
border: 1px solid var(--descrip-text);
@@ -238,68 +243,54 @@ 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 {
+ margin-bottom: calc(var(--spacing)*2);
}
.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 {
- width: 310px;
border: 1px solid #555;
border-radius: 5px;
padding: 10px;
@@ -326,8 +317,10 @@ const style = `
.cm-menu-combo {
cursor: pointer;
- width: 310px;
- box-sizing: border-box;
+ padding: 0.5em 0.5em;
+ border: 1px solid #52525b;
+ border-radius: 6px;
+ background: #09090b;
}
.cm-small-button {
@@ -831,7 +824,7 @@ class ManagerMenuDialog extends ComfyDialog {
const isElectron = 'electronAPI' in window;
update_comfyui_button =
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button",
textContent: "Update ComfyUI",
style: {
@@ -842,7 +835,7 @@ class ManagerMenuDialog extends ComfyDialog {
});
switch_comfyui_button =
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button",
textContent: "Switch ComfyUI",
style: {
@@ -853,7 +846,7 @@ class ManagerMenuDialog extends ComfyDialog {
});
restart_stop_button =
- $el("button.cm-button-red", {
+ $el("button.p-button.p-component.cm-column-button.cm-button-red", {
type: "button",
textContent: "Restart",
onclick: () => restartOrStop()
@@ -861,7 +854,7 @@ class ManagerMenuDialog extends ComfyDialog {
if(isElectron) {
update_all_button =
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button",
textContent: "Update All Custom Nodes",
onclick:
@@ -870,7 +863,7 @@ class ManagerMenuDialog extends ComfyDialog {
}
else {
update_all_button =
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button",
textContent: "Update All",
onclick:
@@ -880,7 +873,7 @@ class ManagerMenuDialog extends ComfyDialog {
const res =
[
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button",
textContent: "Custom Nodes Manager",
onclick:
@@ -892,7 +885,7 @@ class ManagerMenuDialog extends ComfyDialog {
}
}),
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button",
textContent: "Install Missing Custom Nodes",
onclick:
@@ -904,7 +897,7 @@ class ManagerMenuDialog extends ComfyDialog {
}
}),
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button",
textContent: "Custom Nodes In Workflow",
onclick:
@@ -917,7 +910,7 @@ class ManagerMenuDialog extends ComfyDialog {
}),
$el("br", {}, []),
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button",
textContent: "Model Manager",
onclick:
@@ -929,7 +922,7 @@ class ManagerMenuDialog extends ComfyDialog {
}
}),
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button",
textContent: "Install via Git URL",
onclick: async () => {
@@ -960,12 +953,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 = "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)' }, []));
api.fetchApi('/manager/db_mode')
.then(response => response.text())
@@ -975,14 +969,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 = "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)' }, []));
+ preview_combo.appendChild($el('option', { value: 'none', text: 'None (very fast)' }, []));
api.fetchApi('/manager/preview_method')
.then(response => response.text())
@@ -992,10 +988,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 = "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 => {
@@ -1004,7 +1002,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 +1017,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 = "cm-menu-combo p-select p-component p-inputwrapper p-inputwrapper-filled";
const share_options = [
['none', 'None'],
['openart', 'OpenArt AI'],
@@ -1034,7 +1034,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 +1056,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 = "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' }, []));
api.fetchApi('/manager/policy/component')
.then(response => response.text())
.then(data => {
@@ -1074,15 +1076,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 = "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')
.then(response => response.text())
.then(data => {
@@ -1093,20 +1094,25 @@ class ManagerMenuDialog extends ComfyDialog {
api.fetchApi(`/manager/policy/update?value=${event.target.value}`);
});
- return [
- $el("br", {}, []),
- this.datasrc_combo,
- channel_combo,
- preview_combo,
- share_combo,
- component_policy_combo,
- update_policy_combo,
- $el("br", {}, []),
+ const updateSetttingItem = this.createSettingsCombo("Update", update_policy_combo);
+
+ if(isElectron)
+ updateSetttingItem.style.display = 'none';
- $el("br", {}, []),
- $el("filedset.cm-experimental", {}, [
+ return [
+ // $el("br", {}, []),
+ dbRetrievalSetttingItem,
+ channelSetttingItem,
+ previewSetttingItem,
+ shareSetttingItem,
+ componentSetttingItem,
+ updateSetttingItem,
+ // $el("br", {}, []),
+
+ // $el("br", {}, []),
+ $el("filedset.cm-experimental.mt-auto", {}, [
$el("legend.cm-experimental-legend", {}, ["EXPERIMENTAL"]),
- $el("button.cm-experimental-button", {
+ $el("button.p-button.p-component.cm-button.cm-experimental-button.cm-column-button", {
type: "button",
textContent: "Snapshot Manager",
onclick:
@@ -1116,7 +1122,7 @@ class ManagerMenuDialog extends ComfyDialog {
SnapshotManager.instance.show();
}
}),
- $el("button.cm-experimental-button", {
+ $el("button.p-button.p-component.cm-button.cm-experimental-button", {
type: "button",
textContent: "Install PIP packages",
onclick:
@@ -1134,7 +1140,7 @@ class ManagerMenuDialog extends ComfyDialog {
createControlsRight() {
const elts = [
- $el("button.cm-button", {
+ $el("button.p-button.p-component.cm-button.cm-column-button", {
id: 'cm-manual-button',
type: "button",
textContent: "Community Manual",
@@ -1185,11 +1191,11 @@ class ManagerMenuDialog extends ComfyDialog {
})
]),
- $el("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")
@@ -1212,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)',
@@ -1228,13 +1234,12 @@ class ManagerMenuDialog extends ComfyDialog {
})
]),
- $el("button.cm-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");
@@ -1246,34 +1251,154 @@ 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();
- 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: "1000"
+ },
+ onclick: (e) => {
+ if (e.target === dialog_mask) {
+ this.close();
+ }
+ }
+ // 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",
+ [
+ $el("div", [
+ $el("div",
+ {
+ id: "cm-manager",
+ },
+ [
+ $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("br", {}, []),
- close_button,
- ]
- );
+ $el("div.cm-menu-column", [...this.createControlsLeft()]),
+ $el("div.cm-menu-column", [...this.createControlsMid()]),
+ $el("div.cm-menu-column", [...this.createControlsRight()])
+ ]),
+ ]
+ );
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 +1406,7 @@ class ManagerMenuDialog extends ComfyDialog {
}
show() {
- this.element.style.display = "block";
+ this.element.style.display = "flex";
}
toggleVisibility() {