xinyun/ComfyUI-Manager
1
0
Fork 0
mirror of https://git.datalinker.icu/ltdrdata/ComfyUI-Manager synced 2025-12-09 22:24:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

Matched buttons and drop downs to match style of ComfyUI interface while keeping the colours the same as OG ComfyUI Manager

Browse Source
This commit is contained in:
David 2025-12-05 13:47:30 +08:00
parent 3ae99bc761
commit 76fd32f146
1 changed files with 49 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
js/comfyui-manager.js
View File

@ -44,12 +44,16 @@ docStyle.innerHTML = `
#cm-manager-dialog { #cm-manager-dialog {
width: 1000px; width: 1000px;
height: 455px; height: auto;
box-sizing: content-box; box-sizing: content-box;
z-index: 1000; z-index: 1000;
overflow-y: auto; overflow-y: auto;
} }
#cm-manager-dialog br {
margin-bottom: 1em;
}
.cb-widget { .cb-widget {
width: 400px; width: 400px;
height: 25px; height: 25px;
@ -80,6 +84,7 @@ docStyle.innerHTML = `
} }
.cm-menu-container { .cm-menu-container {
padding : calc(var(--spacing)*2);
column-gap: 20px; column-gap: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -140,8 +145,8 @@ docStyle.innerHTML = `
} }
.cm-notice-board { .cm-notice-board {
width: 287px; width: auto;
height: 230px; height: 280px;
overflow: auto; overflow: auto;
color: var(--input-text); color: var(--input-text);
border: 1px solid var(--descrip-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 // copied style from https://github.com/pythongosssss/ComfyUI-Custom-Scripts
const style = ` const style = `
#workflowgallery-button { #workflowgallery-button {
width: 310px; height: 50px;
height: 27px;
padding: 0px !important; padding: 0px !important;
position: relative;
overflow: hidden;
font-size: 17px !important;
} }
#cm-nodeinfo-button { #cm-nodeinfo-button {
width: 310px;
height: 27px;
padding: 0px !important;
position: relative;
overflow: hidden;
font-size: 17px !important;
} }
#cm-manual-button { #cm-manual-button {
width: 310px;
height: 27px;
position: relative;
overflow: hidden;
} }
.cm-column-button { .cm-column-button {
@ -265,41 +258,36 @@ const style = `
} }
.cm-button { .cm-button {
width: 310px; width: auto;
height: 30px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
font-size: 17px !important; background-color: #2b2a33;
border-color: #444454;
color: #ddd;
}
.cm-button:hover {
background-color: #52525e;
} }
.cm-button-red { .cm-button-red {
width: 310px;
height: 30px;
position: relative;
overflow: hidden;
font-size: 17px !important;
background-color: #500000 !important; background-color: #500000 !important;
border-color: #88181b !important;
color: white !important; color: white !important;
} }
.cm-button-red:hover {
background-color: #88181b !important;
}
.cm-button-orange { .cm-button-orange {
width: 310px;
height: 30px;
position: relative;
overflow: hidden;
font-size: 17px !important;
font-weight: bold; font-weight: bold;
background-color: orange !important; background-color: orange !important;
color: black !important; color: black !important;
} }
.cm-experimental-button { .cm-experimental-button {
width: 290px; width: 100%;
height: 30px;
position: relative;
overflow: hidden;
font-size: 17px !important;
} }
.cm-experimental { .cm-experimental {
@ -329,7 +317,10 @@ const style = `
.cm-menu-combo { .cm-menu-combo {
cursor: pointer; cursor: pointer;
padding: 0.5em 0.5em;
border: 1px solid #52525b;
border-radius: 6px;
background: #09090b;
} }
.cm-small-button { .cm-small-button {
@ -833,7 +824,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.cm-column-button", { $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Update ComfyUI", textContent: "Update ComfyUI",
style: { style: {
@ -844,7 +835,7 @@ class ManagerMenuDialog extends ComfyDialog {
}); });
switch_comfyui_button = switch_comfyui_button =
$el("button.cm-button.cm-column-button", { $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Switch ComfyUI", textContent: "Switch ComfyUI",
style: { style: {
@ -855,7 +846,7 @@ class ManagerMenuDialog extends ComfyDialog {
}); });
restart_stop_button = 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", type: "button",
textContent: "Restart", textContent: "Restart",
onclick: () => restartOrStop() onclick: () => restartOrStop()
@ -863,7 +854,7 @@ class ManagerMenuDialog extends ComfyDialog {
if(isElectron) { if(isElectron) {
update_all_button = update_all_button =
$el("button.cm-button.cm-column-button", { $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Update All Custom Nodes", textContent: "Update All Custom Nodes",
onclick: onclick:
@ -872,7 +863,7 @@ class ManagerMenuDialog extends ComfyDialog {
} }
else { else {
update_all_button = update_all_button =
$el("button.cm-button.cm-column-button", { $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Update All", textContent: "Update All",
onclick: onclick:
@ -882,7 +873,7 @@ class ManagerMenuDialog extends ComfyDialog {
const res = const res =
[ [
$el("button.cm-button.cm-column-button", { $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Custom Nodes Manager", textContent: "Custom Nodes Manager",
onclick: 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", type: "button",
textContent: "Install Missing Custom Nodes", textContent: "Install Missing Custom Nodes",
onclick: 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", type: "button",
textContent: "Custom Nodes In Workflow", textContent: "Custom Nodes In Workflow",
onclick: onclick:
@ -919,7 +910,7 @@ class ManagerMenuDialog extends ComfyDialog {
}), }),
$el("br", {}, []), $el("br", {}, []),
$el("button.cm-button.cm-column-button", { $el("button.p-button.p-component.cm-button.cm-column-button", {
type: "button", type: "button",
textContent: "Model Manager", textContent: "Model Manager",
onclick: 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", type: "button",
textContent: "Install via Git URL", textContent: "Install via Git URL",
onclick: async () => { onclick: async () => {
@ -1109,19 +1100,19 @@ class ManagerMenuDialog extends ComfyDialog {
updateSetttingItem.style.display = 'none'; updateSetttingItem.style.display = 'none';
return [ return [
$el("br", {}, []), // $el("br", {}, []),
dbRetrievalSetttingItem, dbRetrievalSetttingItem,
channelSetttingItem, channelSetttingItem,
previewSetttingItem, previewSetttingItem,
shareSetttingItem, shareSetttingItem,
componentSetttingItem, componentSetttingItem,
updateSetttingItem, updateSetttingItem,
$el("br", {}, []), // $el("br", {}, []),
$el("br", {}, []), // $el("br", {}, []),
$el("filedset.cm-experimental", {}, [ $el("filedset.cm-experimental.mt-auto", {}, [
$el("legend.cm-experimental-legend", {}, ["EXPERIMENTAL"]), $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", type: "button",
textContent: "Snapshot Manager", textContent: "Snapshot Manager",
onclick: onclick:
@ -1131,7 +1122,7 @@ class ManagerMenuDialog extends ComfyDialog {
SnapshotManager.instance.show(); SnapshotManager.instance.show();
} }
}), }),
$el("button.cm-experimental-button.cm-column-button", { $el("button.p-button.p-component.cm-button.cm-experimental-button", {
type: "button", type: "button",
textContent: "Install PIP packages", textContent: "Install PIP packages",
onclick: onclick:
@ -1149,7 +1140,7 @@ class ManagerMenuDialog extends ComfyDialog {
createControlsRight() { createControlsRight() {
const elts = [ const elts = [
$el("button.cm-button.cm-column-button", { $el("button.p-button.p-component.cm-button.cm-column-button", {
id: 'cm-manual-button', id: 'cm-manual-button',
type: "button", type: "button",
textContent: "Community Manual", 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', id: 'workflowgallery-button',
type: "button", type: "button",
style: { style: {
...(localStorage.getItem("wg_last_visited") ? {height: '50px'} : {}) // ...(localStorage.getItem("wg_last_visited") ? {height: '50px'} : {})
}, },
onclick: (e) => { onclick: (e) => {
const last_visited_site = localStorage.getItem("wg_last_visited") const last_visited_site = localStorage.getItem("wg_last_visited")
@ -1227,7 +1218,7 @@ class ManagerMenuDialog extends ComfyDialog {
}, [ }, [
$el("p", { $el("p", {
id: 'workflowgallery-button-last-visited-label', 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: { style: {
'text-align': 'center', 'text-align': 'center',
'color': 'var(--input-text)', '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', id: 'cm-nodeinfo-button',
type: "button", type: "button",
textContent: "Nodes Info", textContent: "Nodes Info",
onclick: () => { window.open("https://ltdrdata.github.io/", "comfyui-node-info"); } onclick: () => { window.open("https://ltdrdata.github.io/", "comfyui-node-info"); }
}), }),
$el("br", {}, []),
]; ];
var textarea = document.createElement("div"); 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.createControlsMid()]),
$el("div.cm-menu-column", [...this.createControlsRight()]) $el("div.cm-menu-column", [...this.createControlsRight()])
]), ]),
$el("br", {}, []),
] ]
); );