Add reboot button/menu compatibility with new UI

syllebra · Sep 13, 2024 · 5aedea2 · 5aedea2
1 parent fa98195
commit 5aedea2
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 45 deletions.
diff --git 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
@@ -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;
 }
diff --git 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',' \
-		<div id="bxRebootContextMenu" class="bx-reboot-context-menu" style="display: none"> \
-			<ul class="menu">  \
-				<li class="lock"><a href="#">Lock Session</a></li>  \
-				<li class="logout"><a href="#">Logout</a></li>  \
-				<li class="reboot"><a href="#">Reboot</a></li>  \
-				<li class="shutdown"><a href="#">Shutdown</a></li>  \
-			</ul>  \
-    	</div> ');
+		}
 
 		function apiReboot(type) {
 			api.fetchApi('/bilbox/reboot?mode='+type)
@@ -50,28 +27,80 @@ 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',' \
+				<div id="'+id+'" class="'+cl+'" style="display: none"> \
+					<ul class="menu">  \
+						<li class="lock"><a href="#">Lock Session</a></li>  \
+						<li class="logout"><a href="#">Logout</a></li>  \
+						<li class="reboot"><a href="#">Reboot</a></li>  \
+						<li class="shutdown"><a href="#">Shutdown</a></li>  \
+					</ul>  \
+				</div> ');
+
+			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",
 			name: "Show distant server shutdown menu",
 			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";
 			}	
 		});
 
-
 	},
 });