From 01e817fa289ca478a1aa5baec9b0c870474d7f2f Mon Sep 17 00:00:00 2001
From: Christian Bastian <80225746+cdb-boop@users.noreply.github.com>
Date: Fri, 26 Jul 2024 01:04:51 -0400
Subject: [PATCH] Hide search and clear search buttons in settings.
---
README.md | 4 +-
__init__.py | 20 +++--
web/model-manager.js | 176 ++++++++++++++++++++++++++++++-------------
3 files changed, 140 insertions(+), 60 deletions(-)
diff --git a/README.md b/README.md
index 05b27d2..25dd292 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,9 @@ Download, browse and delete models in ComfyUI.
- View model metadata and file info.
-- Read, edit and save notes in a `.txt` file beside the model. (Autosave optional.)
+- Read, edit and save notes in a `.txt` file beside the model.
+ - `Ctrl+S` to save when note textarea is in focus.
+ - Optionally enable autosave.
- Change or remove a model's preview image (add a different one using a url or local upload).
- Rename, move or **permanently** remove model files.
diff --git a/__init__.py b/__init__.py
index 3aca269..25cbf6d 100644
--- a/__init__.py
+++ b/__init__.py
@@ -174,25 +174,33 @@ def model_type_to_dir_name(model_type):
def ui_rules():
Rule = config_loader.Rule
return [
- Rule("sidebar-default-height", 0.5, float, 0.0, 1.0),
- Rule("sidebar-default-width", 0.5, float, 0.0, 1.0),
- Rule("sidebar-control-always-compact", False, bool),
Rule("model-search-always-append", "", str),
Rule("model-default-browser-model-type", "checkpoints", str),
Rule("model-real-time-search", True, bool),
Rule("model-persistent-search", True, bool),
- Rule("model-show-label-extensions", False, bool),
- Rule("model-info-autosave-notes", False, bool),
+
+ Rule("model-preview-thumbnail-type", "AUTO", str),
Rule("model-preview-fallback-search-safetensors-thumbnail", False, bool),
+ Rule("model-show-label-extensions", False, bool),
Rule("model-show-add-button", True, bool),
Rule("model-show-copy-button", True, bool),
Rule("model-show-load-workflow-button", True, bool),
Rule("model-info-button-on-left", False, bool),
- Rule("model-preview-thumbnail-type", "AUTO", str),
+
Rule("model-add-embedding-extension", False, bool),
Rule("model-add-drag-strict-on-field", False, bool),
Rule("model-add-offset", 25, int),
+
+ Rule("model-info-autosave-notes", False, bool),
+
Rule("download-save-description-as-text-file", True, bool),
+
+ Rule("sidebar-default-height", 0.5, float, 0.0, 1.0),
+ Rule("sidebar-default-width", 0.5, float, 0.0, 1.0),
+ Rule("sidebar-control-always-compact", False, bool),
+ Rule("text-input-always-hide-search-button", False, bool),
+ Rule("text-input-always-hide-clear-button", False, bool),
+
Rule("tag-generator-sampler-method", "Frequency", str),
Rule("tag-generator-count", 10, int),
Rule("tag-generator-threshold", 2, int),
diff --git a/web/model-manager.js b/web/model-manager.js
index 33fac1a..9e9ffea 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -3206,17 +3206,22 @@ class DownloadView {
/** @type {HTMLDivElement} */ infos: null,
/** @type {HTMLInputElement} */ overwrite: null,
/** @type {HTMLInputElement} */ downloadNotes: null,
+ /** @type {HTMLButtonElement} */ searchButton: null,
+ /** @type {HTMLButtonElement} */ clearSearchButton: null,
};
/** @type {DOMParser} */
#domParser = null;
+ /** @type {Object.} */
+ #settings = null;
+
/** @type {() => Promise} */
#updateModels = () => {};
/**
* @param {ModelData} modelData
- * @param {any} settings
+ * @param {Object.} settings
* @param {() => Promise} updateModels
*/
constructor(modelData, settings, updateModels) {
@@ -3229,6 +3234,49 @@ class DownloadView {
$el("h1", ["Input a URL to select a model to download."])
);
};
+
+ const searchButton = new ComfyButton({
+ icon: "magnify",
+ tooltip: "Search url",
+ classList: "comfyui-button icon-button",
+ action: async(e) => {
+ const [button, icon, span] = comfyButtonDisambiguate(e.target);
+ button.disabled = true;
+ if (this.elements.url.value === "") {
+ reset();
+ }
+ else {
+ await update();
+ }
+ button.disabled = false;
+ },
+ }).element;
+ settings["model-real-time-search"].addEventListener("change", () => {
+ const hideSearchButton = settings["text-input-always-hide-search-button"].checked;
+ searchButton.style.display = hideSearchButton ? "none" : "";
+ });
+ settings["text-input-always-hide-search-button"].addEventListener("change", () => {
+ const hideSearchButton = settings["text-input-always-hide-search-button"].checked;
+ searchButton.style.display = hideSearchButton ? "none" : "";
+ });
+ this.elements.searchButton = searchButton;
+
+ const clearSearchButton = new ComfyButton({
+ icon: "close",
+ tooltip: "Clear search",
+ classList: "comfyui-button icon-button",
+ action: async(e) => {
+ e.stopPropagation();
+ this.elements.url.value = "";
+ reset();
+ },
+ }).element;
+ settings["text-input-always-hide-clear-button"].addEventListener("change", () => {
+ const hideClearButton = settings["text-input-always-hide-clear-button"].checked;
+ clearSearchButton.style.display = hideClearButton ? "none" : "";
+ });
+ this.elements.clearSearchButton = clearSearchButton;
+
$el("div.tab-header", {
$: (el) => (this.element = el),
}, [
@@ -3252,32 +3300,8 @@ class DownloadView {
}
},
}),
- new ComfyButton({
- icon: "close",
- tooltip: "Clear search",
- classList: "comfyui-button icon-button",
- action: async(e) => {
- e.stopPropagation();
- this.elements.url.value = "";
- reset();
- },
- }).element,
- new ComfyButton({
- icon: "magnify",
- tooltip: "Search url",
- classList: "comfyui-button icon-button",
- action: async(e) => {
- const [button, icon, span] = comfyButtonDisambiguate(e.target);
- button.disabled = true;
- if (this.elements.url.value === "") {
- reset();
- }
- else {
- await update();
- }
- button.disabled = false;
- },
- }).element,
+ clearSearchButton,
+ searchButton,
]),
$el("div.download-model-infos", {
$: (el) => (this.elements.infos = el),
@@ -3540,6 +3564,12 @@ class DownloadView {
const infosHtml = this.elements.infos;
infosHtml.innerHTML = "";
infosHtml.append.apply(infosHtml, modelInfosHtml);
+
+ const hideSearchButtons = settings["text-input-always-hide-search-button"].checked;
+ this.elements.searchButton.style.display = hideSearchButtons ? "none" : "";
+
+ const hideClearSearchButtons = settings["text-input-always-hide-clear-button"].checked;
+ this.elements.clearSearchButton.style.display = hideClearSearchButtons ? "none" : "";
}
}
@@ -3553,6 +3583,7 @@ class BrowseView {
/** @type {HTMLSelectElement} */ modelSortSelect: null,
/** @type {HTMLInputElement} */ modelContentFilter: null,
/** @type {HTMLButtonElement} */ searchButton: null,
+ /** @type {HTMLButtonElement} */ clearSearchButton: null,
};
/** @type {Array} */
@@ -3624,8 +3655,14 @@ class BrowseView {
);
updateModelGridCallback();
- const searchButtonIsVisible = this.#settingsElements["model-real-time-search"].checked ? "none" : "";
- this.elements.searchButton.style.display = searchButtonIsVisible;
+ const hideSearchButtons = (
+ this.#settingsElements["model-real-time-search"].checked |
+ this.#settingsElements["text-input-always-hide-search-button"].checked
+ );
+ this.elements.searchButton.style.display = hideSearchButtons ? "none" : "";
+
+ const hideClearSearchButtons = this.#settingsElements["text-input-always-hide-clear-button"].checked;
+ this.elements.clearSearchButton.style.display = hideClearSearchButtons ? "none" : "";
}
this.updateModelGrid = updateModelGrid;
@@ -3653,15 +3690,40 @@ class BrowseView {
},
}).element;
settingsElements["model-real-time-search"].addEventListener("change", () => {
- if (this.#settingsElements["model-real-time-search"].checked) {
- searchButton.style.display = "none";
- }
- else {
- searchButton.style.display = "";
- }
+ const hideSearchButton = (
+ this.#settingsElements["text-input-always-hide-search-button"].checked ||
+ this.#settingsElements["model-real-time-search"].checked
+ );
+ searchButton.style.display = hideSearchButton ? "none" : "";
+ });
+ settingsElements["text-input-always-hide-search-button"].addEventListener("change", () => {
+ const hideSearchButton = (
+ this.#settingsElements["text-input-always-hide-search-button"].checked ||
+ this.#settingsElements["model-real-time-search"].checked
+ );
+ searchButton.style.display = hideSearchButton ? "none" : "";
});
this.elements.searchButton = searchButton;
+ const clearSearchButton = new ComfyButton({
+ icon: "close",
+ tooltip: "Clear search",
+ classList: "comfyui-button icon-button",
+ action: (e) => {
+ e.stopPropagation();
+ const [button, icon, span] = comfyButtonDisambiguate(e.target);
+ button.disabled = true;
+ this.elements.modelContentFilter.value = "";
+ updateModelGrid();
+ button.disabled = false;
+ },
+ }).element;
+ settingsElements["text-input-always-hide-clear-button"].addEventListener("change", () => {
+ const hideClearSearchButton = this.#settingsElements["text-input-always-hide-clear-button"].checked;
+ clearSearchButton.style.display = hideClearSearchButton ? "none" : "";
+ });
+ this.elements.clearSearchButton = clearSearchButton;
+
this.element = $el("div", [
$el("div.row.tab-header", [
$el("div.row.tab-header-flex-block", [
@@ -3714,19 +3776,7 @@ class BrowseView {
searchInput,
searchDropdown.element,
]),
- new ComfyButton({
- icon: "close",
- tooltip: "Clear search",
- classList: "comfyui-button icon-button",
- action: (e) => {
- e.stopPropagation();
- const [button, icon, span] = comfyButtonDisambiguate(e.target);
- button.disabled = true;
- this.elements.modelContentFilter.value = "";
- updateModelGrid();
- button.disabled = false;
- },
- }).element,
+ clearSearchButton,
searchButton,
]),
]),
@@ -3768,6 +3818,8 @@ class SettingsView {
//"sidebar-default-height": null,
//"sidebar-default-width": null,
/** @type {HTMLInputElement} */ "sidebar-control-always-compact": null,
+ /** @type {HTMLInputElement} */ "text-input-always-hide-search-button": null,
+ /** @type {HTMLInputElement} */ "text-input-always-hide-clear-button": null,
/** @type {HTMLInputElement} */ "tag-generator-sampler-method": null,
/** @type {HTMLInputElement} */ "tag-generator-count": null,
@@ -3782,7 +3834,7 @@ class SettingsView {
* @param {Object} settingsData
* @param {boolean} updateModels
*/
- #setSettings(settingsData, updateModels) {
+ async #setSettings(settingsData, updateModels) {
const settings = this.elements.settings;
for (const [key, value] of Object.entries(settingsData)) {
const setting = settings[key];
@@ -3801,7 +3853,7 @@ class SettingsView {
}
if (updateModels) {
- this.#updateModels(); // Is this slow?
+ await this.#updateModels(); // Is this slow?
}
}
@@ -3812,7 +3864,7 @@ class SettingsView {
async reload(updateModels) {
const data = await request("/model-manager/settings/load");
const settingsData = data["settings"];
- this.#setSettings(settingsData, updateModels);
+ await this.#setSettings(settingsData, updateModels);
comfyButtonAlert(this.elements.reloadButton, true);
}
@@ -3846,7 +3898,7 @@ class SettingsView {
const success = data["success"];
if (success) {
const settingsData = data["settings"];
- this.#setSettings(settingsData, true);
+ await this.#setSettings(settingsData, true);
}
comfyButtonAlert(this.elements.saveButton, success);
}
@@ -4016,7 +4068,6 @@ class SettingsView {
textContent: "Save notes by default.",
}),
$el("h2", ["Window"]),
- sidebarControl,
/*
$el("input", {
$: (el) => (settings["sidebar-default-width"] = el),
@@ -4039,6 +4090,15 @@ class SettingsView {
step: 0.05,
}),
*/
+ sidebarControl,
+ $checkbox({
+ $: (el) => (settings["text-input-always-hide-search-button"] = el),
+ textContent: "Always hide \"Search\" buttons.",
+ }),
+ $checkbox({
+ $: (el) => (settings["text-input-always-hide-clear-button"] = el),
+ textContent: "Always hide \"Clear Search\" buttons.",
+ }),
$el("h2", ["Model Preview Images"]),
$el("div", [
correctPreviewsButton,
@@ -4413,6 +4473,16 @@ class ModelManager extends ComfyDialog {
async #init() {
await this.#settingsView.reload(false);
await this.#refreshModels();
+
+ const settings = this.#settingsView.elements.settings;
+ console.log(settings);
+
+ {
+ const hideSearchButtons = settings["text-input-always-hide-search-button"].checked;
+ const hideClearSearchButtons = settings["text-input-always-hide-clear-button"].checked;
+ this.#downloadView.elements.searchButton.style.display = hideSearchButtons ? "none" : "";
+ this.#downloadView.elements.clearSearchButton.style.display = hideClearSearchButtons ? "none" : "";
+ }
}
#resetManagerContentsScroll = () => {