diff --git a/js/main.js b/js/main.js
index e2c90c4..8ca2a73 100644
--- a/js/main.js
+++ b/js/main.js
@@ -15,12 +15,16 @@ const cuteCustomStyles = `
--cute-comfy-bar-height: 50px;
--cute-comfy-sidebar-width: 200px;
--cute-comfy-sidebar-bg: #49355a;
+ --cute-comfy-modal-border: #9d6fb9;
+ --cute-comfy-button-bg: #a66ed8;
+
+ --cute-comfy-fonts: 'Comfortaa', sans-serif !important;
}
#cute-comfy,
#cute-comfy *
{
- font-family: 'Comfortaa', sans-serif !important;
+ font-family: var(--cute-comfy-fonts);
font-size: 1rem;
}
@@ -57,7 +61,6 @@ const cuteCustomStyles = `
background: rgb(119, 86, 148);
background: linear-gradient(135deg, rgba(119, 86, 148, 1) 20%, rgba(36, 26, 45, 1) 100%);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
- z-index: 100;
}
.cute-comfy-top-bar-left
@@ -124,7 +127,7 @@ const cuteCustomStyles = `
.cute-comfy-button:hover
{
- background-color: #a66ed8;
+ background-color: var(--cute-comfy-button-bg);
color: #241a2d;
}
@@ -353,6 +356,168 @@ button:hover > .cute-hover-green
position: relative;
}
+/* Modals! */
+.comfy-modal
+{
+ background-color: var(--cute-comfy-sidebar-bg);
+ border: 1px solid var(--cute-comfy-modal-border);
+ box-shadow: 4px 4px 18px 5px rgba(0, 0, 0, 0.7);
+ border-radius: 3px;
+
+ font-family: var(--cute-comfy-fonts);
+ text-align: center;
+}
+
+.comfy-modal:before
+{
+ content: 'CUTE!';
+
+ display: block;
+ position: absolute;
+ top: 15px;
+ left: -30px;
+
+ background-color: rgb(239,51,145);
+ color: white;
+ line-height: 1.2;
+ font-weight: 600;
+ overflow: hidden;
+
+ padding: 3px 40px 1px;
+ transform-origin: 50%;
+ transform: rotate(-35deg);
+}
+
+.comfy-modal .comfy-modal-content hr
+{
+ height: 1px;
+ border: none;
+ background-color: rgb(239,51,145);
+ margin: 1rem -4rem;
+ width: 200%;
+}
+
+.comfy-modal .comfy-modal-content br + hr
+{
+ margin-top: 0;
+}
+
+.comfy-modal .comfy-modal-content hr + br
+{
+ display: none;
+}
+
+.comfy-modal .comfy-modal-content
+{
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: flex-start;
+}
+
+.comfy-modal .comfy-modal-content > tr:first-of-type
+{
+ background-color: unset !important;
+ padding: 0 !important;
+ margin-top: 1rem !important;
+ height: unset !important;
+}
+
+.comfy-modal .comfy-modal-content button
+{
+ display: inline !important;
+ width: unset !important;
+ background-color: transparent !important;
+ border: unset !important;
+ box-shadow: unset !important;
+ border-radius: unset !important;
+ margin-bottom: 0.5rem;
+ font-size: 1.3rem;
+ color: white;
+}
+
+.comfy-modal .comfy-modal-content button:hover
+{
+ background-color: var(--cute-comfy-button-bg) !important;
+ color: #111;
+}
+
+.comfy-modal .comfy-modal-content button > svg
+{
+ margin-right: 0.5rem;
+}
+
+.comfy-modal .comfy-modal-content select
+{
+ background-color: rgba(0, 0, 0, 0.1);
+ color: white;
+ border: 1px solid hotpink;
+ margin: 0.5rem 0;
+ padding: 0.3rem;
+ border-radius: 3px;
+ font-family: var(--cute-comfy-fonts);
+}
+
+.comfy-modal .comfy-modal-content select > option
+{
+ background-color: white;
+ color: #222;
+}
+
+/* Main Settings Dialog */
+#comfy-settings-dialog
+{
+ border: 2px solid #b04480;
+ border-radius: 3px;
+
+ max-height: 80vh !important;
+ height: 80vh !important;
+ top: 5vh !important;
+
+ box-shadow: 6px 6px 20px 4px rgba(0, 0, 0, 0.6);
+
+ overflow-y: auto;
+ overflow-x: visible;
+}
+
+#comfy-settings-dialog,
+#comfy-settings-dialog tr,
+#comfy-settings-dialog caption
+{
+ font-family: var(--cute-comfy-fonts);
+ background-color: var(--cute-comfy-sidebar-bg);
+}
+
+#comfy-settings-dialog td
+{
+ border: none !important;
+}
+
+#comfy-settings-dialog caption
+{
+ background-color: #2c2036;
+ color: white !important;
+}
+
+#comfy-settings-dialog tr:nth-child(2n-1)
+{
+ background-color: #423051;
+}
+
+#comfy-settings-dialog tr td
+{
+ font-size: 14px;
+}
+
+#comfy-settings-dialog table > caption,
+#comfy-settings-dialog table > button
+{
+ position: sticky;
+ top: 0;
+ bottom: 0;
+
+ font-size: 1.2rem;
+}
+
/* Overrides the built-in media query for small screens, argh...! */
@media only screen and (max-height: 850px)
{
@@ -371,7 +536,13 @@ button:hover > .cute-hover-green
function moveElement(elementSelector, destinationParentSelector, newClass, append = false)
{
- let element = document.querySelector(elementSelector);
+ if (typeof elementSelector !== "string" && typeof elementSelector !== "object")
+ {
+ console.warn("moveElement: elementSelector must be a string. Instead, got: " + (typeof elementSelector), elementSelector);
+ return null;
+ }
+
+ let element = typeof elementSelector === 'object' ? elementSelector : document.querySelector(elementSelector);
if (newClass)
{
element.classList.add(newClass);
@@ -403,17 +574,32 @@ function surroundElement(elementSelector, surroundElementName)
}
// Blocks until the element is visible
-function waitForElementVisibility(selector, timeout = 5000)
+function waitForElementVisibility(selector, timeout = 5000, all = false)
{
let start = Date.now();
- let element = document.querySelector(selector);
- while (element == null || element.offsetParent === null)
+ if (!all)
{
- if (Date.now() - start > timeout)
+ let element = document.querySelector(selector);
+ while (element == null || element.offsetParent === null)
{
- throw new Error(`Timed out waiting for element ${selector} to appear.`);
+ if (Date.now() - start > timeout)
+ {
+ throw new Error(`Timed out waiting for element ${selector} to appear.`);
+ }
+ element = document.querySelector(selector);
+ }
+ }
+ else
+ {
+ let elements = document.querySelectorAll(selector);
+ while (elements.length == 0)
+ {
+ if (Date.now() - start > timeout)
+ {
+ throw new Error(`Timed out waiting for element ${selector} to appear.`);
+ }
+ elements = document.querySelectorAll(selector);
}
- element = document.querySelector(selector);
}
}
@@ -470,7 +656,7 @@ async function initCuteness() {
document.querySelector(".comfy-menu-btns").style.display = "none";
// Settings cog button
-
+
// Right Side
var infiniteCheck = moveElement('#autoQueueCheckbox', ".cute-comfy-top-bar-right", null, true);
surroundElement('#autoQueueCheckbox', "div");
@@ -494,8 +680,8 @@ async function initCuteness() {
var queueTop = moveElement("#queue-front-button", ".cute-comfy-top-bar-right", "cute-comfy-button", true);
queueTop.innerHTML = ``;
queueTop.title = "Queue Next";
-
- // Custom addon support
+
+ // Custom addon support - find any .comfy-settings-btn that does not have a ⚙️ in the inner text
var otherButtons = document.querySelectorAll(".comfy-settings-btn");
for (let i = 0; i < otherButtons.length; i++) {
if (otherButtons[i].innerHTML.includes("⚙️")) {
@@ -524,7 +710,7 @@ async function initCuteness() {
btn.title = "Upload a workflow JSON file. Will replace the current workflow.";
btn = moveElement('#comfy-refresh-button', ".cute-comfy-top-bar-left", "cute-comfy-button", true);
btn.innerHTML = ` Refresh`;
- btn.title = "Refreshes metadatata (selection lists, etc) inside nodes.";
+ btn.title = "Refreshes metadatata (selection lists, etc) inside nodes.";
// Append the menu
document.querySelector(".cute-comfy-top-bar-left").appendChild(menu);
@@ -695,6 +881,75 @@ async function initCuteness() {
subtree: true
});
+ // Inside .cute-comfy-menu, find a button with the innertext of "Manage"
+ var manageBtn = Array.from(document.querySelectorAll(".cute-comfy-menu button")).filter((btn) => btn.innerText.toLowerCase().includes("manager"));
+ if (manageBtn.length > 0)
+ {
+ // Install a click handler on the button
+ manageBtn[0].addEventListener("click", (e) =>
+ {
+ setTimeout(() =>
+ {
+ waitForElementVisibility(".comfy-modal-content button", 5000, true);
+
+ // Add icons to the buttons on the main menu.
+ // Loop through each button element inside .comfy-modal-content
+ var buttons = document.querySelectorAll(".comfy-modal .comfy-modal-content button");
+ for (let i = 0; i < buttons.length; i++)
+ {
+ // Switch on the button's inner text
+ switch (buttons[i].innerText.trim().toLowerCase())
+ {
+ case "install custom nodes":
+ buttons[i].innerHTML = ` Manage Custom Nodes`;
+ buttons[i].title = "Opens the node manager where you can install, update, and manage custom nodes.";
+ break;
+ case "install missing custom nodes":
+ buttons[i].innerHTML = ` Install Missing Custom Nodes`;
+ buttons[i].title = "If your workflow has any missing nodes, this will attempt to install them.";
+ break;
+ case "install models":
+ buttons[i].innerHTML = ` Install Models`;
+ buttons[i].title = "Browse and install models (checkpoints, upscalers, embeddings, etc).";
+ break;
+ case "update all":
+ buttons[i].innerHTML = ` Update ComfyUI + Extensions`;
+ buttons[i].title = "Updates everything (ComfyUI and any installed extensions).";
+ break;
+ case "update comfyui":
+ buttons[i].innerHTML = ` Update ComfyUI`;
+ buttons[i].title = "Updates ComfyUI.";
+ break;
+ case "fetch updates":
+ buttons[i].innerHTML = ` Check for Updates`;
+ buttons[i].title = "Attempts to fetch any updates for any installed custom extensions.";
+ break;
+ case "alternatives of a1111":
+ buttons[i].innerHTML = ` Custom Node Alternatives to A1111`;
+ buttons[i].title = "View a filtered list of custom nodes that substitutes functionality in Automatic1111's Stable Diffusion Web UI.";
+ break;
+ case "comfyui community manual":
+ buttons[i].innerHTML = ` ComfyUI Community Manual `;
+ buttons[i].title = "Open the ComfyUI documentation.";
+ break;
+ case "comfyui workflow gallery":
+ buttons[i].innerHTML = ` ComfyUI Workflow Gallery `;
+ buttons[i].title = "Open the ComfyUI example workflow gallery.";
+ break;
+ case "comfyui nodes info":
+ buttons[i].innerHTML = ` ComfyUI Nodes Info `;
+ buttons[i].title = "Open the documentation for various node types.";
+ break;
+ case "close":
+ buttons[i].innerHTML = ` Close`;
+ buttons[i].title = "Close this popup.";
+ break;
+ }
+ }
+ }, 10);
+ });
+ }
+
console.log("🟣 ALL DONE! ^_^");
console.groupEnd();
}