diff --git a/pyproject.toml b/pyproject.toml index 2a9872e..904e14e 100644 --- a/pyproject.toml +++ b/pyproject.toml @@ -1,7 +1,7 @@ [project] name = "bilbox-comfyui" description = "Nodes: BilboX's PromptGeek Photo Prompt. This provides a convenient way to compose photorealistic prompts into ComfyUI. Post-Processing: adds various post processing effects. Bonus: Option to show a distant server shutdown menu." -version = "1.0.0" +version = "1.0.1" license = {file = "LICENSE"} dependencies = ["colour-science>=0.4.3", "numpy>=1.19.0", "imageio>=2.31.0", "opencv-python>=4.8.1.78"] diff --git a/web/bilbox.css b/web/bilbox.css index 667d2e2..54b65ee 100644 --- a/web/bilbox.css +++ b/web/bilbox.css @@ -286,7 +286,13 @@ } -#bxRebootContextMenu .menu { +.bx-reboot-cm-new { + left: 50px; + bottom: 0px; + position:absolute; +} + +.bx-reboot-context-menu .menu { list-style: none; display: flex; flex-direction: column; @@ -295,7 +301,7 @@ box-shadow: 0 10px 20px rgb(64 64 64 / 5%); padding: 10px 0; } -#bxRebootContextMenu .menu > li > a { +.bx-reboot-context-menu .menu > li > a { font: inherit; border: 0; padding: 10px 30px 10px 15px; @@ -311,13 +317,13 @@ transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; } -#bxRebootContextMenu .menu > li > a:hover { +.bx-reboot-context-menu .menu > li > a:hover { background:#161616; color: #97a9c4; } -#bxRebootContextMenu .menu > li > a > i { +.bx-reboot-context-menu .menu > li > a > i { padding-right: 10px; } -#bxRebootContextMenu .menu > li.shutdown > a:hover { +.bx-reboot-context-menu .menu > li.shutdown > a:hover { color: red; } \ No newline at end of file diff --git a/web/reboot.js b/web/reboot.js index 3e5113b..388bcbf 100644 --- a/web/reboot.js +++ b/web/reboot.js @@ -6,36 +6,13 @@ app.registerExtension({ }, async setup() { - const menu = document.querySelector(".comfy-menu"); - const separator = document.createElement("hr"); - - separator.style.margin = "20px 0"; - separator.style.width = "100%"; - //menu.append(separator); - - const rebootButton = document.createElement("button"); - rebootButton.textContent = "Server..."; - rebootButton.onclick = () => { - - if (document.getElementById("bxRebootContextMenu") .style.display == "block"){ - document.getElementById("bxRebootContextMenu").style.display = "none" ; + function toggle_menu(el) { + if ( el.style.display == "block"){ + el.style.display = "none" ; }else{ - var menu = document.getElementById("bxRebootContextMenu") - menu.style.display = 'block'; + el.style.display = 'block'; } - } - menu.append(rebootButton); - - - menu.insertAdjacentHTML('beforeend',' \ -
'); + } function apiReboot(type) { api.fetchApi('/bilbox/reboot?mode='+type) @@ -50,14 +27,58 @@ app.registerExtension({ }); } - menu.querySelector(".lock").onclick = () => { apiReboot("lock");} - menu.querySelector(".logout").onclick = () => { apiReboot("logout");} - menu.querySelector(".reboot").onclick = () => { apiReboot("reboot");} - menu.querySelector(".shutdown").onclick = () => { apiReboot("shutdown");} + function create_menu(el, id, isnew=false) { + + let cl = "bx-reboot-context-menu"; + if(isnew) + cl = "bx-reboot-cm-new " + cl; + el.insertAdjacentHTML('beforeend',' \ + '); + + el.querySelector(".lock").onclick = () => { apiReboot("lock");} + el.querySelector(".logout").onclick = () => { apiReboot("logout");} + el.querySelector(".reboot").onclick = () => { apiReboot("reboot");} + el.querySelector(".shutdown").onclick = () => { apiReboot("shutdown");} + } + + // Old Interface + const menu = document.querySelector(".comfy-menu"); + if(menu) + { + const rebootButton = document.createElement("button"); + rebootButton.id = "bxRebootButtonOld"; + rebootButton.textContent = "Server..."; + rebootButton.onclick = () => { toggle_menu(document.getElementById("bxRebootContextMenuOld")) } + rebootButton.style.background = "linear-gradient(90deg, #442222 0%, #222222 100%)"; + + menu.append(rebootButton); + + create_menu(menu, "bxRebootContextMenuOld") + } + + // New interface + const side_tb = document.querySelector(".side-tool-bar-end"); + const params_button = document.querySelector(".pi-cog"); + if(side_tb && params_button) + { + const shutButton = params_button.parentElement.cloneNode(true); + shutButton.id = "bxRebootButtonNew"; + let shuticon = shutButton.querySelector(".pi-cog"); + shuticon.classList.remove("pi-cog"); + shuticon.classList.add("pi-power-off"); + side_tb.append(shutButton); - rebootButton.style.background = "linear-gradient(90deg, #442222 0%, #222222 100%)"; - //rebootButton.style.color = "black"; + shutButton.onclick = () => { toggle_menu(document.getElementById("bxRebootContextMenuNew")) } + create_menu(document.querySelector(".side-tool-bar-container"), "bxRebootContextMenuNew", true) + } const setting = app.ui.settings.addSetting({ id: "BilboX.DistantShutdownMenu", @@ -65,13 +86,21 @@ app.registerExtension({ defaultValue: false, type: "boolean", onChange: async (v) => { - console.log("Value:",v, rebootButton); - rebootButton.style.display = v ? "block":"none"; - if(!v) - document.getElementById("bxRebootContextMenu").style.display = "none"; + let b_old = document.getElementById("bxRebootButtonOld"); + let m_old = document.getElementById("bxRebootContextMenuOld"); + if(b_old) + b_old.style.display = v ? "block":"none"; + if(!v && m_old) + m_old.style.display = "none"; + + let b_new = document.getElementById("bxRebootButtonNew"); + let m_new = document.getElementById("bxRebootContextMenuNew"); + if(b_new) + b_new.style.display = v ? "block":"none"; + if(!v && m_new) + m_new.style.display = "none"; } }); - }, }); \ No newline at end of file \ +