298977887/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-01-11 02:15:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style modals to match rest of UI

Browse Source
This commit is contained in:
missionfloyd 2023-04-05 15:56:41 -06:00
parent 30f274bf48
commit 1a74611c6e
2 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/scripts/ui.js
View File

@ -115,14 +115,6 @@ function dragElement(dragEl, settings) {
savePos = value;
},
});
settings.addSetting({
id: "Comfy.ConfirmClear",
name: "Require confirmation when clearing workflow",
type: "boolean",
defaultValue: true,
});
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
@ -170,7 +162,7 @@ class ComfyDialog {
$el("p", { $: (p) => (this.textElement = p) }),
$el("button", {
type: "button",
textContent: "CLOSE",
textContent: "Close",
onclick: () => this.close(),
}),
]),
@ -233,6 +225,7 @@ class ComfySettingsDialog extends ComfyDialog {
};
let element;
value = this.getSettingValue(id, defaultValue);
if (typeof type === "function") {
element = type(name, setter, value, attrs);
@ -289,6 +282,16 @@ class ComfySettingsDialog extends ComfyDialog {
return element;
},
});
const self = this;
return {
get value() {
return self.getSettingValue(id, defaultValue);
},
set value(v) {
self.setSettingValue(id, v);
},
};
}
show() {
@ -410,6 +413,13 @@ export class ComfyUI {
this.history.update();
});
const confirmClear = this.settings.addSetting({
id: "Comfy.ConfirmClear",
name: "Require confirmation when clearing workflow",
type: "boolean",
defaultValue: true,
});
const fileInput = $el("input", {
type: "file",
accept: ".json,image/png",
@ -517,13 +527,13 @@ export class ComfyUI {
$el("button", { textContent: "Load", onclick: () => fileInput.click() }),
$el("button", { textContent: "Refresh", onclick: () => app.refreshComboInNodes() }),
$el("button", { textContent: "Clear", onclick: () => {
if (localStorage.getItem("Comfy.Settings.Comfy.ConfirmClear") == "false" || confirm("Clear workflow?")) {
if (!confirmClear.value || confirm("Clear workflow?")) {
app.clean();
app.graph.clear();
}
}}),
$el("button", { textContent: "Load Default", onclick: () => {
if (localStorage.getItem("Comfy.Settings.Comfy.ConfirmClear") == "false" || confirm("Load default workflow?")) {
if (!confirmClear.value || confirm("Load default workflow?")) {
app.loadGraphData()
}
}}),

71
web/style.css
View File

@ -39,18 +39,19 @@ body {
position: fixed; /* Stay in place */
z-index: 100; /* Sit on top */
padding: 30px 30px 10px 30px;
background-color: #ff0000; /* Modal background */
background-color: #353535; /* Modal background */
color: #ff4444;
box-shadow: 0px 0px 20px #888888;
border-radius: 10px;
text-align: center;
top: 50%;
left: 50%;
max-width: 80vw;
max-height: 80vh;
transform: translate(-50%, -50%);
overflow: hidden;
min-width: 60%;
justify-content: center;
font-family: monospace;
font-size: 15px;
}
.comfy-modal-content {
@ -70,23 +71,6 @@ body {
margin: 3px 3px 3px 4px;
}
.comfy-modal button {
cursor: pointer;
color: #aaaaaa;
border: none;
background-color: transparent;
font-size: 24px;
font-weight: bold;
width: 100%;
}
.comfy-modal button:hover,
.comfy-modal button:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.comfy-menu {
width: 200px;
font-size: 15px;
@ -109,7 +93,8 @@ body {
box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
}
.comfy-menu button {
.comfy-menu button,
.comfy-modal button {
font-size: 20px;
}
@ -130,7 +115,8 @@ body {
.comfy-menu > button,
.comfy-menu-btns button,
.comfy-menu .comfy-list button {
.comfy-menu .comfy-list button,
.comfy-modal button{
color: #ddd;
background-color: #222;
border-radius: 8px;
@ -220,11 +206,22 @@ button.comfy-queue-btn {
}
.comfy-modal.comfy-settings {
background-color: var(--bg-color);
color: var(--fg-color);
text-align: center;
font-family: sans-serif;
color: #999;
z-index: 99;
}
.comfy-modal input,
.comfy-modal select {
color: #ddd;
background-color: #222;
border-radius: 8px;
border-color: #4e4e4e;
border-style: solid;
font-size: inherit;
}
@media only screen and (max-height: 850px) {
.comfy-menu {
top: 0 !important;
@ -239,26 +236,26 @@ button.comfy-queue-btn {
}
.graphdialog {
min-height: 1em;
min-height: 1em;
}
.graphdialog .name {
font-size: 14px;
font-family: sans-serif;
color: #999999;
font-size: 14px;
font-family: sans-serif;
color: #999999;
}
.graphdialog button {
margin-top: unset;
vertical-align: unset;
height: 1.6em;
padding-right: 8px;
margin-top: unset;
vertical-align: unset;
height: 1.6em;
padding-right: 8px;
}
.graphdialog input, .graphdialog textarea, .graphdialog select {
background-color: #222;
border: 2px solid;
border-color: #444444;
color: #ddd;
border-radius: 12px 0 0 12px;
background-color: #222;
border: 2px solid;
border-color: #444444;
color: #ddd;
border-radius: 12px 0 0 12px;
}