From fb07a6069003bebe06d708bbf26276cd0a6b7e76 Mon Sep 17 00:00:00 2001 From: Sj-Si Date: Fri, 15 Mar 2024 19:11:30 -0400 Subject: [PATCH] clean up presentation of dirs view. need to resolve issue with initial load of tree view. --- html/extra-networks-dirs-view-button.html | 2 +- html/extra-networks-pane-dirs.html | 4 +- html/extra-networks-pane-tree.html | 2 +- javascript/extraNetworks.js | 43 +++++++++++++++++++-- modules/ui_extra_networks.py | 2 +- style.css | 47 +++++++++++++++-------- 6 files changed, 75 insertions(+), 25 deletions(-) diff --git a/html/extra-networks-dirs-view-button.html b/html/extra-networks-dirs-view-button.html index 3ea116297..8e05e4854 100644 --- a/html/extra-networks-dirs-view-button.html +++ b/html/extra-networks-dirs-view-button.html @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/html/extra-networks-pane-dirs.html b/html/extra-networks-pane-dirs.html index 74f00d1a5..3ded6f12a 100644 --- a/html/extra-networks-pane-dirs.html +++ b/html/extra-networks-pane-dirs.html @@ -1,5 +1,5 @@ -
-
+
+
{dirs_html}
diff --git a/html/extra-networks-pane-tree.html b/html/extra-networks-pane-tree.html index 134fa1ea8..2ee0d3c0b 100644 --- a/html/extra-networks-pane-tree.html +++ b/html/extra-networks-pane-tree.html @@ -1,4 +1,4 @@ -
+
{ + delete elem.dataset.selected; + }); + } + + function _select_button(elem) { + _deselect_all(); + // Update search input with select button's path. + elem.dataset.selected = ""; + txt_search.value = elem.textContent.trim(); + } + + function _deselect_button(elem) { + delete elem.dataset.selected; + txt_search.value = ""; + } + + + if ("selected" in event.target.dataset) { + _deselect_button(event.target); + } else { + _select_button(event.target); + } + + updateInput(txt_search); applyExtraNetworkFilter(tabname_full); } function extraNetworksControlSearchClearOnClick(event, tabname_full) { /** Clears the search text. */ let clear_btn = event.target.closest(".extra-network-control--search-clear"); + + // Deselect all buttons from both dirs view and tree view + gradioApp().querySelectorAll(".extra-network-dirs-view-button").forEach((elem) => { + delete elem.dataset.selected; + }); + + gradioApp().querySelectorAll(".tree-list-item").forEach((elem) => { + delete elem.dataset.selected; + }); + let txt_search = clear_btn.previousElementSibling; txt_search.value = ""; txt_search.dispatchEvent(new CustomEvent("extra-network-control--search-clear", {})); diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index d62aa2a14..00d3eb318 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -588,7 +588,7 @@ class ExtraNetworksPage: subdirs[subdir] = 1 if subdirs: - subdirs = {"": 1, **subdirs} + subdirs = {**subdirs} subdirs_html = "".join([ self.btn_dirs_view_tpl.format(**{ diff --git a/style.css b/style.css index a3d010827..f4ae11339 100644 --- a/style.css +++ b/style.css @@ -1208,17 +1208,17 @@ body.resizing .resize-handle { } .clusterize-scroll::-webkit-scrollbar { - background-color: transparent; + background: transparent; width: var(--text-lg); } .clusterize-scroll::-webkit-scrollbar-track { - background-color: transparent; + background: transparent; background-clip: content-box; } .clusterize-scroll::-webkit-scrollbar-thumb { - background-color: var(--border-color-primary); + background: var(--border-color-primary); border-radius: var(--radius-xl); border: calc(var(--button-border-width) * 4) solid var(--background-fill-primary); } @@ -1237,20 +1237,19 @@ body.resizing .resize-handle { overflow: hidden; } -.extra-network-pane .extra-network-pane-content-dirs { +.extra-network-content { display: flex; - flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; } -.extra-network-pane .extra-network-pane-content-tree { - display: flex; +.extra-network-content--tree { flex-direction: row; - flex-wrap: nowrap; - width: 100%; - height: 100%; +} + +.extra-network-content--dirs { + flex-direction: column; } .resize-handle-row:has(> .extra-network-tree.hidden) { @@ -1276,7 +1275,7 @@ body.resizing .resize-handle { font-size: var(--body-text-size); text-align: left; user-select: none; - background-color: transparent; + background: transparent; border: none; gap: var(--spacing-sm); align-items: start; @@ -1424,20 +1423,20 @@ body.resizing .resize-handle { mask-repeat: no-repeat; mask-position: center center; mask-size: 100%; - background-color: var(--input-placeholder-color); + background: var(--input-placeholder-color); } .extra-network-control .extra-network-control--enabled { - background-color: rgba(0, 0, 0, 0.1); + background: rgba(0, 0, 0, 0.1); border-radius: 0.25rem; } .dark .extra-network-control .extra-network-control--enabled { - background-color: rgba(255, 255, 255, 0.15); + background: rgba(255, 255, 255, 0.15); } .extra-network-control .extra-network-control--enabled .extra-network-control--icon{ - background-color: var(--button-secondary-text-color); + background: var(--button-secondary-text-color); } /* ==== REFRESH ICON ACTIONS ==== */ @@ -1508,7 +1507,7 @@ body.resizing .resize-handle { } .tree-list-item[data-selected] { - background-color: var(--button-secondary-background-fill); + background: var(--button-secondary-background-fill); } .tree-list-item > span { @@ -1610,3 +1609,19 @@ body.resizing .resize-handle { padding: 0; margin: 0; } + +.extra-network-dirs-view { + display: flex; + flex-direction: row; + gap: var(--spacing-sm); +} + +.extra-network-dirs-view-button:hover { + -webkit-transition: all 0.05s ease-in-out; + transition: all 0.05s ease-in-out; + background: var(--button-secondary-background-fill-hover); +} + +.extra-network-dirs-view-button[data-selected] { + background: var(--button-primary-background-fill); +} \ No newline at end of file