From 998e574ac482050b04b86410703fd953bdd370bc Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Sun, 12 May 2024 12:37:58 -0400
Subject: [PATCH] move clear filters button

---
 html/extra-networks-pane.html | 31 ++++++++++++++++++-------------
 javascript/extraNetworks.js   | 13 ++-----------
 style.css                     |  9 ++-------
 3 files changed, 22 insertions(+), 31 deletions(-)

diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index 22a284ddb..27b189f18 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -16,6 +16,20 @@
                 </svg>
             </button>
         </div>
+        <div class="extra-network-controls--container">
+            <div class="extra-network-controls--header">Clear Filters</div>
+            <div class="extra-network-controls--buttons">
+                <button class="extra-network-control extra-network-control--clear-filters"
+                    title="Clear all directory filters">
+                    <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
+                        fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="1">
+                        <path d="M 2 2 V 4 L 6 8 V 13 L 9 14 V 12 M 12 5 L 13 4 V 2 H 2" />
+                        <path d="M 9 10 L 12 7 M 9 7 L 12 10" />
+                    </svg>
+                </button>
+            </div>
+        </div>
         <div class="extra-network-controls--container">
             <div class="extra-network-controls--header">Sort Mode</div>
             <div class="extra-network-controls--buttons">
@@ -135,7 +149,8 @@
             {dirs_html}
         </div>
         <div class="extra-network-content--tree-and-cards-view resize-handle-row">
-            <div class="extra-network-content extra-network-content--tree-view resize-handle-col" style="{tree_view_style}">
+            <div class="extra-network-content extra-network-content--tree-view resize-handle-col"
+                style="{tree_view_style}">
                 <div id='{tabname}_{extra_networks_tabname}_tree_list_loading_splash' class='extra-network-list-splash'>
                     {tree_list_loading_splash_content}</div>
                 <div id='{tabname}_{extra_networks_tabname}_tree_list_no_data_splash'
@@ -146,18 +161,8 @@
                         class='extra-network-tree-content clusterize-content'></div>
                 </div>
             </div>
-            <div class="extra-network-content extra-network-content--card-view extra-network-cards resize-handle-col" style="{card_view_style}">
-                <div class="extra-network-controls--buttons">
-                    <button class="extra-network-control extra-network-control--clear-filters hidden"
-                        title="Clear all directory filters">
-                        <svg class="extra-network-control--icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
-                            fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                            stroke-width="1">
-                            <path d="M 2 2 V 4 L 6 8 V 13 L 9 14 V 12 M 12 5 L 13 4 V 2 H 2" />
-                            <path d="M 9 10 L 12 7 M 9 7 L 12 10" />
-                        </svg>
-                    </button>
-                </div>
+            <div class="extra-network-content extra-network-content--card-view extra-network-cards resize-handle-col"
+                style="{card_view_style}">
                 <div id='{tabname}_{extra_networks_tabname}_card_list_loading_splash' class='extra-network-list-splash'>
                     {card_list_loading_splash_content}</div>
                 <div id='{tabname}_{extra_networks_tabname}_card_list_no_data_splash'
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index e6ec75893..ba6243f14 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -437,17 +437,11 @@ class ExtraNetworksTab {
         recurse = recurse === true || recurse === false ? recurse : false;
         this.card_list.addDirectoryFilter(div_id, filter_str, recurse);
         this.directory_filters[div_id] = {filter_str: filter_str, recurse: recurse};
-
-        const clear_btn = this.container_elem.querySelector(".extra-network-control--clear-filters");
-        clear_btn.classList.toggle("hidden", !Object.keys(this.directory_filters).length);
     }
 
     removeDirectoryFilter(div_id) {
         this.card_list.removeDirectoryFilter(div_id);
         delete this.directory_filters[div_id];
-
-        const clear_btn = this.container_elem.querySelector(".extra-network-control--clear-filters");
-        clear_btn.classList.toggle("hidden", !Object.keys(this.directory_filters).length);
     }
 
     clearDirectoryFilters({excluded_div_ids} = {}) {
@@ -466,9 +460,6 @@ class ExtraNetworksTab {
             }
             delete this.directory_filters[div_id];
         }
-
-        const clear_btn = this.container_elem.querySelector(".extra-network-control--clear-filters");
-        clear_btn.classList.toggle("hidden", !Object.keys(this.directory_filters).length);
     }
 
     setDirectoryFilters() {
@@ -1136,8 +1127,8 @@ function extraNetworksControlSearchClearOnClick(event) {
 function extraNetworksControlClearFiltersOnClick(event) {
     /** Clears all directory filters applied to the cards list. */
     const btn = event.target.closest(".extra-network-control--clear-filters");
-    const pane = btn.closest(".extra-network-pane");
-    const tab = extra_networks_tabs[pane.dataset.tabnameFull];
+    const controls = btn.closest(".extra-network-controls");
+    const tab = extra_networks_tabs[controls.dataset.tabnameFull];
 
     tab.clearSelectedButtons();
     tab.clearDirectoryFilters();
diff --git a/style.css b/style.css
index 3dee34617..d295c2e9e 100644
--- a/style.css
+++ b/style.css
@@ -1378,6 +1378,7 @@ body.resizing .resize-handle {
     gap: var(--spacing-sm);
     box-sizing: border-box;
     background: var(--input-background-fill);
+    overflow: hidden;
 }
 
 /* Add outline to the contianer when the inner search-text <input> has focus. */
@@ -1425,8 +1426,7 @@ body.resizing .resize-handle {
 /* "Clear" button on right of container. Invisible until user enters text in <input>. */
 .extra-network-control--search .extra-network-control--search-clear {
     visibility: hidden;
-    border-radius: 0 var(--input-radius) var(--input-radius) 0;
-    border: var(--input-border-width) solid transparent;
+    border-radius: 0;
     transition: background var(--button-transition);
     user-select: none;
     cursor: pointer;
@@ -1462,11 +1462,6 @@ body.resizing .resize-handle {
     stroke: var(--input-placeholder-color);
 }
 
-.extra-network-control--clear-filters {
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
 /* ==== ICONS ==== */
 .extra-network-control--refresh:hover .extra-network-control--icon {
     animation: extra-network-control--refresh-keyframe-rotate 3s infinite;