add search field to settings

5 files changed, 63 insertions, 18 deletions

diff --git a/javascript/settings.js b/javascript/settings.js
new file mode 100644
index 00000000..7889cf1c
--- /dev/null
+++ b/javascript/settings.js
@@ -0,0 +1,46 @@
+let settingsExcludeTabsFromShowAll = {
+    settings_tab_defaults: 1,
+    settings_tab_sysinfo: 1,
+    settings_tab_actions: 1,
+    settings_tab_licenses: 1,
+};
+
+function settingsShowAllTabs() {
+    gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
+        if (settingsExcludeTabsFromShowAll[elem.id]) return;
+
+        elem.style.display = "block";
+    });
+}
+
+function settingsShowOneTab() {
+    gradioApp().querySelector('#settings_show_one_page').click();
+}
+
+onUiLoaded(function() {
+    var edit = gradioApp().querySelector('#settings_search');
+    var editTextarea = gradioApp().querySelector('#settings_search > label > input');
+    var buttonShowAllPages = gradioApp().getElementById('settings_show_all_pages');
+    var settings_tabs = gradioApp().querySelector('#settings div');
+
+    onEdit('settingsSearch', editTextarea, 250, function() {
+        var searchText = (editTextarea.value || "").trim();
+
+        gradioApp().querySelectorAll('#settings > div[id^=settings_] div[id^=column_settings_] > *').forEach(function(elem) {
+            var visible = elem.textContent.trim().indexOf(searchText) != -1;
+            elem.style.display = visible ? "" : "none";
+        });
+
+        if (searchText != "") {
+            settingsShowAllTabs();
+        } else {
+            settingsShowOneTab();
+        }
+    });
+
+    settings_tabs.insertBefore(edit, settings_tabs.firstChild);
+    settings_tabs.appendChild(buttonShowAllPages);
+
+
+    buttonShowAllPages.addEventListener("click", settingsShowAllTabs);
+});
diff --git a/javascript/token-counters.js b/javascript/token-counters.js
index 710345eb..2ecc7d91 100644
--- a/javascript/token-counters.js
+++ b/javascript/token-counters.js
@@ -60,7 +60,7 @@ function setupTokenCounting(id, id_counter, id_button) {
     prompt.parentElement.insertBefore(counter, prompt);
     prompt.parentElement.style.position = "relative";
 
-    func = onEdit(id, textarea, 800, function() {
+    var func = onEdit(id, textarea, 800, function() {
         gradioApp().getElementById(id_button)?.click();
     });
     promptTokenCountUpdateFunctions[id] = func;
diff --git a/javascript/ui.js b/javascript/ui.js
index aee0d1da..2e262602 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -263,21 +263,6 @@ onAfterUiUpdate(function() {
     json_elem.parentElement.style.display = "none";
 
     setupTokenCounters();
-
-    var show_all_pages = gradioApp().getElementById('settings_show_all_pages');
-    var settings_tabs = gradioApp().querySelector('#settings div');
-    if (show_all_pages && settings_tabs) {
-        settings_tabs.appendChild(show_all_pages);
-        show_all_pages.onclick = function() {
-            gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
-                if (elem.id == "settings_tab_licenses") {
-                    return;
-                }
-
-                elem.style.display = "block";
-            });
-        };
-    }
 });
 
 onOptionsChanged(function() {
diff --git a/modules/ui_settings.py b/modules/ui_settings.py
index c6fe3604..74a3aef3 100644
--- a/modules/ui_settings.py
+++ b/modules/ui_settings.py
@@ -64,6 +64,9 @@ class UiSettings:
     quicksettings_list = None

     quicksettings_names = None

     text_settings = None

+    show_all_pages = None

+    show_one_page = None

+    search_input = None

 

     def run_settings(self, *args):

         changed = []

@@ -136,7 +139,7 @@ class UiSettings:
                         gr.Group()

                         current_tab = gr.TabItem(elem_id=f"settings_{elem_id}", label=text)

                         current_tab.__enter__()

-                        current_row = gr.Column(variant='compact')

+                        current_row = gr.Column(elem_id=f"column_settings_{elem_id}", variant='compact')

                         current_row.__enter__()

 

                         previous_section = item.section

@@ -183,7 +186,11 @@ class UiSettings:
                 with gr.TabItem("Licenses", id="licenses", elem_id="settings_tab_licenses"):

                     gr.HTML(shared.html("licenses.html"), elem_id="licenses")

 

-                gr.Button(value="Show all pages", elem_id="settings_show_all_pages")

+                self.show_all_pages = gr.Button(value="Show all pages", elem_id="settings_show_all_pages")

+                self.show_one_page = gr.Button(value="Show only one page", elem_id="settings_show_one_page", visible=False)

+                self.show_one_page.click(lambda: None)

+

+                self.search_input = gr.Textbox(value="", elem_id="settings_search", max_lines=1, placeholder="Search...", show_label=False)

 

                 self.text_settings = gr.Textbox(elem_id="settings_json", value=lambda: opts.dumpjson(), visible=False)

 

@@ -313,3 +320,8 @@ class UiSettings:
             outputs=[self.component_dict[k] for k in component_keys],

             queue=False,

         )

+

+    def search(self, text):

+        print(text)

+

+        return [gr.update(visible=text in (comp.label or "")) for comp in self.components]

diff --git a/style.css b/style.css
index 58eb29c1..eee50552 100644
--- a/style.css
+++ b/style.css
@@ -423,6 +423,7 @@ div#extras_scale_to_tab div.form{
 #settings > div{

     border: none;

     margin-left: 10em;

+    padding: 0 var(--spacing-xl);

 }

 

 #settings > div.tab-nav{

@@ -437,6 +438,7 @@ div#extras_scale_to_tab div.form{
     border: none;

     text-align: left;

     white-space: initial;

+    padding: 4px;

 }

 

 #settings_result{