improve: layout

feat: show button on update available dialog
mid-dev-media · Dec 16, 2023 · 464c8e9 · 464c8e9
1 parent 316f67a
commit 464c8e9
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 28 deletions.
diff --git a/__init__.py b/__init__.py
@@ -20,7 +20,7 @@
 import torch
 
 
-version = [1, 13, 7]
+version = [1, 14]
 version_str = f"V{version[0]}.{version[1]}" + (f'.{version[2]}' if len(version) > 2 else '')
 print(f"### Loading: ComfyUI-Manager ({version_str})")
 

diff --git a/extension-node-map.json b/extension-node-map.json
@@ -5363,7 +5363,8 @@
     ],
     "https://github.com/vienteck/ComfyUI-Chat-GPT-Integration": [
         [
-            "ChatGptPrompt"
+            "ChatGptPrompt",
+            "ChatGptTextConcat"
         ],
         {
             "title_aux": "ComfyUI-Chat-GPT-Integration"

diff --git a/js/comfyui-manager.js b/js/comfyui-manager.js
@@ -13,7 +13,7 @@ var docStyle = document.createElement('style');
 docStyle.innerHTML = `
 #cm-manager-dialog {
 	width: 1000px;
-	height: 410px;
+	height: 420px;
 	box-sizing: content-box;
 	z-index: 10000;
 }
@@ -119,13 +119,15 @@ const style = `
 	padding: 0px !important;
 	position: relative;
 	overflow: hidden;
+	font-size: 17px !important;
 }
 #cm-nodeinfo-button {
 	width: 310px;
 	height: 27px;
 	padding: 0px !important;
 	position: relative;
 	overflow: hidden;
+	font-size: 17px !important;
 }
 #cm-manual-button {
 	width: 310px;
@@ -142,6 +144,43 @@ const style = `
 	font-size: 17px !important;
 }
 
+.cm-experimental-button {
+	width: 290px;
+	height: 30px;
+	position: relative;
+	overflow: hidden;
+	font-size: 17px !important;
+}
+
+.cm-experimental {
+	width: 310px;
+	border: 1px solid #555;
+	border-radius: 5px;
+	padding: 10px;
+	align-items: center;
+	text-align: center;
+	justify-content: center;
+	box-sizing: border-box;
+}
+
+.cm-experimental-legend {
+	margin-top: -20px;
+	margin-left: 95px;
+	width:100px;
+	height:20px;
+	font-size: 13px;
+	font-weight: bold;
+	background-color: #990000;
+	color: #CCFFFF;
+	border-radius: 5px;
+}
+
+.cm-menu-combo {
+	cursor: pointer;
+	width: 310px;
+	box-sizing: border-box;
+}
+
 .cm-small-button {
 	width: 120px;
 	height: 30px;
@@ -151,6 +190,15 @@ const style = `
 	font-size: 17px !important;
 }
 
+#cm-install-customnodes-button {
+	width: 200px;
+	height: 30px;
+	position: relative;
+	overflow: hidden;
+	box-sizing: border-box;
+	font-size: 17px !important;
+}
+
 .cm-search-filter {
 	width: 200px;
 	height: 30px !important;
@@ -394,7 +442,20 @@ async function fetchUpdates(update_check_checkbox) {
 		}
 
 		if (response.status == 201) {
-			app.ui.dialog.show('There is an updated extension available.<BR><BR><P><B>NOTE:<BR>Fetch Updates is not an update.<BR>Please update from "Install Custom Nodes".</B></P>');
+			app.ui.dialog.show("There is an updated extension available.<BR><BR><P><B>NOTE:<BR>Fetch Updates is not an update.<BR>Please update from <button id='cm-install-customnodes-button'>Install Custom Nodes</button> </B></P>");
+
+			const button = document.getElementById('cm-install-customnodes-button');
+			button.addEventListener("click",
+				async function() {
+					app.ui.dialog.close();
+
+					if(!CustomNodesInstaller.instance)
+						CustomNodesInstaller.instance = new CustomNodesInstaller(app, self);
+
+					await CustomNodesInstaller.instance.show(CustomNodesInstaller.ShowMode.UPDATE);
+				}
+			);
+
 			app.ui.dialog.element.style.zIndex = 10010;
 			update_check_checkbox.checked = false;
 		}
@@ -531,7 +592,7 @@ class ManagerMenuDialog extends ComfyDialog {
 						() => {
 							if(!CustomNodesInstaller.instance)
 								CustomNodesInstaller.instance = new CustomNodesInstaller(app, self);
-							CustomNodesInstaller.instance.show(false);
+							CustomNodesInstaller.instance.show(CustomNodesInstaller.ShowMode.NORMAL);
 						}
 				}),
 
@@ -542,7 +603,7 @@ class ManagerMenuDialog extends ComfyDialog {
 						() => {
 							if(!CustomNodesInstaller.instance)
 								CustomNodesInstaller.instance = new CustomNodesInstaller(app, self);
-							CustomNodesInstaller.instance.show(true);
+							CustomNodesInstaller.instance.show(CustomNodesInstaller.ShowMode.MISSING_NODES);
 						}
 				}),
 
@@ -589,14 +650,14 @@ class ManagerMenuDialog extends ComfyDialog {
 
 		// db mode
 		this.datasrc_combo = document.createElement("select");
-		this.datasrc_combo.style.cursor = "pointer";
+		this.datasrc_combo.className = "cm-menu-combo";
 		this.datasrc_combo.appendChild($el('option', { value: 'cache', text: 'DB: Channel (1day cache)' }, []));
 		this.datasrc_combo.appendChild($el('option', { value: 'local', text: 'DB: Local' }, []));
 		this.datasrc_combo.appendChild($el('option', { value: 'url', text: 'DB: Channel (remote)' }, []));
 
 		// preview method
 		let preview_combo = document.createElement("select");
-		preview_combo.style.cursor = "pointer";
+		preview_combo.className = "cm-menu-combo";
 		preview_combo.appendChild($el('option', { value: 'auto', text: 'Preview method: Auto' }, []));
 		preview_combo.appendChild($el('option', { value: 'taesd', text: 'Preview method: TAESD (slow)' }, []));
 		preview_combo.appendChild($el('option', { value: 'latent2rgb', text: 'Preview method: Latent2RGB (fast)' }, []));
@@ -612,7 +673,7 @@ class ManagerMenuDialog extends ComfyDialog {
 
 		// nickname
 		let badge_combo = document.createElement("select");
-		badge_combo.style.cursor = "pointer";
+		badge_combo.className = "cm-menu-combo";
 		badge_combo.appendChild($el('option', { value: 'none', text: 'Badge: None' }, []));
 		badge_combo.appendChild($el('option', { value: 'nick', text: 'Badge: Nickname' }, []));
 		badge_combo.appendChild($el('option', { value: 'nick_hide', text: 'Badge: Nickname (hide built-in)' }, []));
@@ -631,7 +692,7 @@ class ManagerMenuDialog extends ComfyDialog {
 
 		// channel
 		let channel_combo = document.createElement("select");
-		channel_combo.style.cursor = "pointer";
+		channel_combo.className = "cm-menu-combo";
 		api.fetchApi('/manager/channel_url_list')
 			.then(response => response.json())
 			.then(async data => {
@@ -657,7 +718,7 @@ class ManagerMenuDialog extends ComfyDialog {
 
 		// share
 		let share_combo = document.createElement("select");
-		share_combo.style.cursor = "pointer";
+		share_combo.className = "cm-menu-combo";
 		const share_options = [
 			['none', 'None'],
 			['openart', 'OpenArt AI'],
@@ -696,20 +757,7 @@ class ManagerMenuDialog extends ComfyDialog {
 			badge_combo,
 			channel_combo,
 			share_combo,
-
-			$el("hr", {}, []),
-			$el("center", {}, ["!! EXPERIMENTAL !!"]),
 			$el("br", {}, []),
-			$el("button.cm-button", {
-				type: "button",
-				textContent: "Snapshot Manager",
-				onclick:
-					() => {
-						if(!SnapshotManager.instance)
-						SnapshotManager.instance = new SnapshotManager(app, self);
-						SnapshotManager.instance.show();
-					}
-			}),
 			$el("button.cm-button", {
 				type: "button",
 				textContent: "Install via Git URL",
@@ -721,6 +769,21 @@ class ManagerMenuDialog extends ComfyDialog {
 					}
 				}
 			}),
+
+			$el("br", {}, []),
+			$el("filedset.cm-experimental", {}, [
+					$el("legend.cm-experimental-legend", {}, ["EXPERIMENTAL"]),
+					$el("button.cm-experimental-button", {
+						type: "button",
+						textContent: "Snapshot Manager",
+						onclick:
+							() => {
+								if(!SnapshotManager.instance)
+								SnapshotManager.instance = new SnapshotManager(app, self);
+								SnapshotManager.instance.show();
+							}
+					})
+				]),
 		];
 	}
 

diff --git a/js/custom-nodes-downloader.js b/js/custom-nodes-downloader.js
@@ -3,6 +3,7 @@ import { api } from "../../scripts/api.js"
 import { ComfyDialog, $el } from "../../scripts/ui.js";
 import { install_checked_custom_node, manager_instance, rebootAPI } from  "./common.js";
 
+
 async function getCustomNodes() {
 	var mode = manager_instance.datasrc_combo.value;
 
@@ -91,6 +92,12 @@ export class CustomNodesInstaller extends ComfyDialog {
 	message_box = null;
 	data = null;
 
+	static ShowMode = {
+	  NORMAL: 0,
+	  MISSING_NODES: 1,
+	  UPDATE: 2,
+	};
+
 	clear() {
 		this.install_buttons = [];
 		this.message_box = null;
@@ -235,7 +242,7 @@ export class CustomNodesInstaller extends ComfyDialog {
 
 		this.conflict_mappings = await getConflictMappings();
 
-		if(this.is_missing_node_mode)
+		if(this.show_mode == CustomNodesInstaller.ShowMode.MISSING_NODES)
 			this.data = await this.filter_missing_node(this.data);
 
 		this.element.removeChild(msg);
@@ -661,6 +668,13 @@ export class CustomNodesInstaller extends ComfyDialog {
 			combo.appendChild(option);
 		});
 
+		if(this.show_mode == CustomNodesInstaller.ShowMode.UPDATE) {
+			this.filter = 'Update';
+		}
+		else if(this.show_mode == CustomNodesInstaller.ShowMode.MISSING_NODES) {
+			this.filter = '*';
+		}
+
 		let self = this;
 		combo.addEventListener('change', function(event) {
 			self.filter = event.target.value;
@@ -736,8 +750,13 @@ export class CustomNodesInstaller extends ComfyDialog {
 		this.element.appendChild(close_button);
 	}
 
-	async show(is_missing_node_mode) {
-		this.is_missing_node_mode = is_missing_node_mode;
+	async show(show_mode) {
+		this.show_mode = show_mode;
+
+		if(this.show_mode != CustomNodesInstaller.ShowMode.NORMAL) {
+			this.search_keyword = '';
+		}
+
 		try {
 			this.invalidateControl();
 

diff --git a/node_db/new/extension-node-map.json b/node_db/new/extension-node-map.json
@@ -5363,7 +5363,8 @@
     ],
     "https://github.com/vienteck/ComfyUI-Chat-GPT-Integration": [
         [
-            "ChatGptPrompt"
+            "ChatGptPrompt",
+            "ChatGptTextConcat"
         ],
         {
             "title_aux": "ComfyUI-Chat-GPT-Integration"