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

fix: layout

Browse Source 
Fixing the issue caused by the workflow manager.
This commit is contained in:
Dr.Lt.Data 2023-12-07 16:16:08 +09:00
parent 1a9646fc6c
commit d84ebefad8
1 changed files with 69 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
js/comfyui-manager.js
View File

@ -11,25 +11,38 @@ import { manager_instance, setManagerInstance, install_via_git_url, rebootAPI }
var docStyle = document.createElement('style'); var docStyle = document.createElement('style');
docStyle.innerHTML = ` docStyle.innerHTML = `
#cm-manager-dialog {
width: 1000px;
height: 360px;
box-sizing: content-box;
z-index: 10000;
}
.cm-menu-container { .cm-menu-container {
column-gap: 20px; column-gap: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
box-sizing: content-box;
} }
.cm-menu-column { .cm-menu-column {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto; flex: 1 1 auto;
width: 300px;
box-sizing: content-box;
} }
.cm-title { .cm-title {
padding: 10px 10px 0 10p;
background-color: black; background-color: black;
text-align: center; text-align: center;
height: 45px; height: 40px;
width: calc(100% - 10px);
font-weight: bold; font-weight: bold;
justify-content: center;
align-content: center;
vertical-align: middle;
} }
#cm-channel-badge { #cm-channel-badge {
@ -51,8 +64,9 @@ docStyle.innerHTML = `
} }
.cm-notice-board { .cm-notice-board {
width: 320px; width: 310px;
height: 160px; padding: 0px !important;
height: 150px;
overflow: auto; overflow: auto;
color: var(--input-text); color: var(--input-text);
border: 1px solid var(--descrip-text); border: 1px solid var(--descrip-text);
@ -100,13 +114,40 @@ let share_option = 'all';
// copied style from https://github.com/pythongosssss/ComfyUI-Custom-Scripts // copied style from https://github.com/pythongosssss/ComfyUI-Custom-Scripts
const style = ` const style = `
#comfyworkflows-button { #comfyworkflows-button {
width: 310px;
height: 27px;
padding: 0px !important;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
#cm-manual-button { #cm-nodeinfo-button {
width: 310px;
height: 27px;
padding: 0px !important;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
#cm-manual-button {
width: 310px;
height: 27px;
position: relative;
overflow: hidden;
}
.cm-button {
width: 310px;
height: 27px;
position: relative;
overflow: hidden;
}
#cm-close-button {
width: calc(100% - 65px);
bottom: 10px;
position: absolute;
overflow: hidden;
}
.pysssss-workflow-arrow-2 { .pysssss-workflow-arrow-2 {
position: absolute; position: absolute;
top: 0; top: 0;
@ -359,7 +400,7 @@ class ManagerMenuDialog extends ComfyDialog {
let self = this; let self = this;
update_comfyui_button = update_comfyui_button =
$el("button", { $el("button.cm-button", {
type: "button", type: "button",
textContent: "Update ComfyUI", textContent: "Update ComfyUI",
onclick: onclick:
@ -367,7 +408,7 @@ class ManagerMenuDialog extends ComfyDialog {
}); });
fetch_updates_button = fetch_updates_button =
$el("button", { $el("button.cm-button", {
type: "button", type: "button",
textContent: "Fetch Updates", textContent: "Fetch Updates",
onclick: onclick:
@ -375,7 +416,7 @@ class ManagerMenuDialog extends ComfyDialog {
}); });
update_all_button = update_all_button =
$el("button", { $el("button.cm-button", {
type: "button", type: "button",
textContent: "Update All", textContent: "Update All",
onclick: onclick:
@ -384,7 +425,7 @@ class ManagerMenuDialog extends ComfyDialog {
const res = const res =
[ [
$el("button", { $el("button.cm-button", {
type: "button", type: "button",
textContent: "Install Custom Nodes", textContent: "Install Custom Nodes",
onclick: onclick:
@ -395,7 +436,7 @@ class ManagerMenuDialog extends ComfyDialog {
} }
}), }),
$el("button", { $el("button.cm-button", {
type: "button", type: "button",
textContent: "Install Missing Custom Nodes", textContent: "Install Missing Custom Nodes",
onclick: onclick:
@ -406,7 +447,7 @@ class ManagerMenuDialog extends ComfyDialog {
} }
}), }),
$el("button", { $el("button.cm-button", {
type: "button", type: "button",
textContent: "Install Models", textContent: "Install Models",
onclick: onclick:
@ -423,7 +464,7 @@ class ManagerMenuDialog extends ComfyDialog {
fetch_updates_button, fetch_updates_button,
$el("br", {}, []), $el("br", {}, []),
$el("button", { $el("button.cm-button", {
type: "button", type: "button",
textContent: "Alternatives of A1111", textContent: "Alternatives of A1111",
onclick: onclick:
@ -432,9 +473,7 @@ class ManagerMenuDialog extends ComfyDialog {
AlternativesInstaller.instance = new AlternativesInstaller(app, self); AlternativesInstaller.instance = new AlternativesInstaller(app, self);
AlternativesInstaller.instance.show(); AlternativesInstaller.instance.show();
} }
}), })
$el("br", {}, []),
]; ];
return res; return res;
@ -560,7 +599,7 @@ class ManagerMenuDialog extends ComfyDialog {
$el("hr", {}, []), $el("hr", {}, []),
$el("center", {}, ["!! EXPERIMENTAL !!"]), $el("center", {}, ["!! EXPERIMENTAL !!"]),
$el("br", {}, []), $el("br", {}, []),
$el("button", { $el("button.cm-button", {
type: "button", type: "button",
textContent: "Snapshot Manager", textContent: "Snapshot Manager",
onclick: onclick:
@ -570,7 +609,7 @@ class ManagerMenuDialog extends ComfyDialog {
SnapshotManager.instance.show(); SnapshotManager.instance.show();
} }
}), }),
$el("button", { $el("button.cm-button", {
type: "button", type: "button",
textContent: "Install via Git URL", textContent: "Install via Git URL",
onclick: () => { onclick: () => {
@ -586,10 +625,10 @@ class ManagerMenuDialog extends ComfyDialog {
createControlsRight() { createControlsRight() {
const elts = [ const elts = [
$el("button", { $el("button.cm-button", {
id: 'cm-manual-button', id: 'cm-manual-button',
type: "button", type: "button",
textContent: "ComfyUI Community Manual", textContent: "Community Manual",
onclick: () => { window.open("https://blenderneko.github.io/ComfyUI-docs/", "comfyui-community-manual"); } onclick: () => { window.open("https://blenderneko.github.io/ComfyUI-docs/", "comfyui-community-manual"); }
}, [ }, [
$el("div.pysssss-workflow-arrow-2", { $el("div.pysssss-workflow-arrow-2", {
@ -636,7 +675,7 @@ class ManagerMenuDialog extends ComfyDialog {
$el("button", { $el("button", {
id: 'comfyworkflows-button', id: 'comfyworkflows-button',
type: "button", type: "button",
textContent: "ComfyUI Workflow Gallery", textContent: "Workflow Gallery",
onclick: () => { window.open("https://comfyworkflows.com/", "comfyui-workflow-gallery"); } onclick: () => { window.open("https://comfyworkflows.com/", "comfyui-workflow-gallery"); }
}, [ }, [
$el("div.pysssss-workflow-arrow-2", { $el("div.pysssss-workflow-arrow-2", {
@ -698,9 +737,10 @@ class ManagerMenuDialog extends ComfyDialog {
}) })
]), ]),
$el("button", { $el("button.cm-button", {
id: 'cm-nodeinfo-button',
type: "button", type: "button",
textContent: "ComfyUI 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", {}, []), $el("br", {}, []),
@ -718,15 +758,12 @@ class ManagerMenuDialog extends ComfyDialog {
constructor() { constructor() {
super(); super();
const close_button = $el("button", { type: "button", textContent: "Close", onclick: () => this.close() }); const close_button = $el("button", { id: "cm-close-button", type: "button", textContent: "Close", onclick: () => this.close() });
close_button.style.position = "absolute";
close_button.style.bottom = "20px";
close_button.style.width = "calc(100% - 60px)";
const content = const content =
$el("div.comfy-modal-content", $el("div.comfy-modal-content",
[ [
$el("tr.cm-title", {width:"100%"}, [ $el("tr.cm-title", {}, [
$el("font", {size:6, color:"white"}, [`ComfyUI Manager Menu`])] $el("font", {size:6, color:"white"}, [`ComfyUI Manager Menu`])]
), ),
$el("br", {}, []), $el("br", {}, []),
@ -736,6 +773,8 @@ 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", {}, []),
close_button, close_button,
] ]
); );
@ -743,10 +782,7 @@ class ManagerMenuDialog extends ComfyDialog {
content.style.width = '100%'; content.style.width = '100%';
content.style.height = '100%'; content.style.height = '100%';
this.element = $el("div.comfy-modal", { parent: document.body }, [ content ]); this.element = $el("div.comfy-modal", { id:'cm-manager-dialog', parent: document.body }, [ content ]);
this.element.style.width = '1000px';
this.element.style.height = '420px';
this.element.style.zIndex = 10000;
} }
show() { show() {