From 2310cd66e5381fbe6b966894381c6ee7b762898f Mon Sep 17 00:00:00 2001
From: Sj-Si <sjw.jetty@gmail.com>
Date: Sat, 20 Jan 2024 11:43:45 -0500
Subject: Add toggle button for tree view. Use default settings for sortmode
 and direction.

---
 html/extra-networks-pane.html | 55 +++++++++++++++++++++++++++++++++++++++----
 html/extra-networks-tree.html | 37 -----------------------------
 2 files changed, 51 insertions(+), 41 deletions(-)

(limited to 'html')

diff --git a/html/extra-networks-pane.html b/html/extra-networks-pane.html
index bf46ca16..73dad2ab 100644
--- a/html/extra-networks-pane.html
+++ b/html/extra-networks-pane.html
@@ -1,8 +1,55 @@
 <div id='{tabname}_{extra_networks_tabname}_pane' class='extra-network-pane'>
-    <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree'>
-        {tree_html}
+    <div class="extra-network-control">
+        <div class="extra-network-control--search">
+            <input
+                id="{tabname}_{extra_networks_tabname}_extra_search"
+                class="extra-network-control--search-text"
+                type="search"
+                placeholder="Filter files"
+            >
+        </div>
+        <div 
+            id="{tabname}_{extra_networks_tabname}_extra_sort"
+            class="extra-network-control--sort"
+            data-sortmode="{data_sortmode}"
+            data-sortkey="{data_sortkey}"
+            title="Sort by path"
+            onclick="extraNetworksControlSortOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--sort-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_sort_dir"
+            class="extra-network-control--sort-dir"
+            data-sortdir="{data_sortdir}"
+            title="Sort ascending"
+            onclick="extraNetworksControlSortDirOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--sort-dir-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_tree_view"
+            class="extra-network-control--tree-view extra-network-control--enabled"
+            title="Enable Tree View"
+            onclick="extraNetworksControlTreeViewOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--tree-view-icon"></i>
+        </div>
+        <div
+            id="{tabname}_{extra_networks_tabname}_extra_refresh"
+            class="extra-network-control--refresh"
+            title="Refresh page"
+            onclick="extraNetworksControlRefreshOnClick(event, '{tabname}', '{extra_networks_tabname}');"
+        >
+            <i class="extra-network-control--refresh-icon"></i>
+        </div>
     </div>
-    <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
-        {items_html}
+    <div class="extra-network-pane-content">
+        <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree'>
+            {tree_html}
+        </div>
+        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
+            {items_html}
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/html/extra-networks-tree.html b/html/extra-networks-tree.html
index 23f6af10..39649e86 100644
--- a/html/extra-networks-tree.html
+++ b/html/extra-networks-tree.html
@@ -1,41 +1,4 @@
 <div class="tree-list">
-    <div class="tree-list-controls">
-        <div class="tree-list-search">
-            <input
-                id="{tabname}_{extra_networks_tabname}_extra_search"
-                class="tree-list-search-text"
-                type="search"
-                placeholder="Filter files"
-            >
-        </div>
-        <div 
-            id="{tabname}_{extra_networks_tabname}_extra_sort"
-            class="tree-list-sort"
-            data-sortmode="path"
-            data-sortkey="sortPath-Ascending-640"
-            title="Sort by path"
-            onclick="extraNetworksTreeSortOnClick(event, '{tabname}', '{extra_networks_tabname}');"
-        >
-            <i class="tree-list-sort-icon"></i>
-        </div>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_sort_dir"
-            class="tree-list-sort-dir"
-            data-sortdir="Ascending"
-            title="Sort ascending"
-            onclick="extraNetworksTreeSortDirOnClick(event, '{tabname}', '{extra_networks_tabname}');"
-        >
-            <i class="tree-list-sort-dir-icon"></i>
-        </div>
-        <div
-            id="{tabname}_{extra_networks_tabname}_extra_refresh"
-            class="tree-list-refresh"
-            title="Refresh page"
-            onclick="extraNetworksTreeRefreshOnClick(event, '{tabname}', '{extra_networks_tabname}');"
-        >
-            <i class="tree-list-refresh-icon"></i>
-        </div>
-    </div>
     <div class="tree-list-container">
         {tree}
     </div>
-- 
cgit v1.2.3