resize handle for extra networks

html/extra-networks-pane.html

@@ -44,11 +44,11 @@
             <i class="extra-network-control--refresh-icon"></i>
         </div>
     </div>
-    <div class="extra-network-pane-content">
-        <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree {tree_view_div_extra_class}'>
+    <div class="extra-network-pane-content resize-handle-row" style="display: {extra_network_pane_content_default_display};">
+        <div id='{tabname}_{extra_networks_tabname}_tree' class='extra-network-tree {tree_view_div_extra_class}' style='flex-basis: {extra_networks_tree_view_min_width}px; display: {tree_view_div_default_display};'>
             {tree_html}
         </div>
-        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards'>
+        <div id='{tabname}_{extra_networks_tabname}_cards' class='extra-network-cards' style='flex-grow: 1;'>
             {items_html}
         </div>
     </div>

javascript/extraNetworks.js

@@ -447,7 +447,24 @@ function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabn
      * @param tabname                   The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
      * @param extra_networks_tabname    The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
      */
-    gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree").classList.toggle("hidden");
+    const tree = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree");
+    const parent = tree.parentElement;
+    let resizeHandle = parent.querySelector('.resize-handle');
+    tree.classList.toggle("hidden");
+
+    if (tree.classList.contains("hidden")){
+        tree.style.display = 'none';
+        resizeHandle.style.display = 'none';
+        parent.style.display = 'flex';
+    } else {
+        tree.style.display = 'block';
+        if (!resizeHandle) {
+            setupResizeHandle(parent);
+            resizeHandle = parent.querySelector('.resize-handle');
+        }
+        resizeHandle.style.display = 'block';
+        parent.style.display = 'grid';
+    }
     event.currentTarget.classList.toggle("extra-network-control--enabled");
 }
 

javascript/resizeHandle.js

@@ -39,7 +39,7 @@
 
             const ratio = newParentWidth / oldParentWidth;
 
-            const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH);
+            const newWidthL = Math.max(Math.floor(ratio * widthL), parent.minLeftColWidth);
             setLeftColGridTemplate(parent, newWidthL);
 
             R.parentWidth = newParentWidth;
@@ -54,7 +54,15 @@
 
         parent.style.display = 'grid';
         parent.style.gap = '0';
-        const gridTemplateColumns = `${parent.children[0].style.flexGrow}fr ${PAD}px ${parent.children[1].style.flexGrow}fr`;
+        let leftColTemplate = "";
+        if (parent.children[0].style.flexGrow) {
+            leftColTemplate = `${parent.children[0].style.flexGrow}fr`;
+            parent.minLeftColWidth = GRADIO_MIN_WIDTH;
+        } else {
+            leftColTemplate = parent.children[0].style.flexBasis;
+            parent.minLeftColWidth = parent.children[0].style.flexBasis.slice(0, -2);
+        }
+        const gridTemplateColumns = `${leftColTemplate} ${PAD}px ${parent.children[1].style.flexGrow}fr`;
         parent.style.gridTemplateColumns = gridTemplateColumns;
         parent.style.originalGridTemplateColumns = gridTemplateColumns;
 
@@ -119,7 +127,7 @@
                 } else {
                     delta = R.screenX - evt.changedTouches[0].screenX;
                 }
-                const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
+                const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), R.parent.minLeftColWidth);
                 setLeftColGridTemplate(R.parent, leftColWidth);
             }
         });
@@ -165,3 +173,11 @@ onUiLoaded(function() {
         }
     }
 });
+
+function setupExtraNetworksResizeHandle() {
+    for (var elem of document.body.querySelectorAll('.resize-handle-row')) {
+        if (!elem.querySelector('.resize-handle') && !elem.children[0].classList.contains("hidden")) {
+            setupResizeHandle(elem);
+        }
+    }
+}

modules/shared_options.py

@@ -258,6 +258,7 @@ options_templates.update(options_section(('extra_networks', "Extra Networks", "s
     "extra_networks_card_order_field": OptionInfo("Path", "Default order field for Extra Networks cards", gr.Dropdown, {"choices": ['Path', 'Name', 'Date Created', 'Date Modified']}).needs_reload_ui(),
     "extra_networks_card_order": OptionInfo("Ascending", "Default order for Extra Networks cards", gr.Dropdown, {"choices": ['Ascending', 'Descending']}).needs_reload_ui(),
     "extra_networks_tree_view_default_enabled": OptionInfo(False, "Enables the Extra Networks directory tree view by default").needs_reload_ui(),
+    "extra_networks_tree_view_min_width": OptionInfo(180, "Minimal width for the Extra Networks directory tree view", gr.Number).needs_reload_ui(),
     "extra_networks_add_text_separator": OptionInfo(" ", "Extra networks separator").info("extra text to add before <...> when adding extra network to prompt"),
     "ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order").needs_reload_ui(),
     "textual_inversion_print_at_load": OptionInfo(False, "Print a list of Textual Inversion embeddings when loading model"),

modules/ui_extra_networks.py

@@ -531,9 +531,13 @@ class ExtraNetworksPage:
         data_sortkey = f"{data_sortmode}-{data_sortdir}-{len(self.items)}"
         tree_view_btn_extra_class = ""
         tree_view_div_extra_class = "hidden"
+        tree_view_div_default_display = "none"
+        extra_network_pane_content_default_display = "flex"
         if shared.opts.extra_networks_tree_view_default_enabled:
             tree_view_btn_extra_class = "extra-network-control--enabled"
             tree_view_div_extra_class = ""
+            tree_view_div_default_display = "block"
+            extra_network_pane_content_default_display = "grid"
 
         return self.pane_tpl.format(
             **{
@@ -546,6 +550,9 @@ class ExtraNetworksPage:
                 "tree_view_div_extra_class": tree_view_div_extra_class,
                 "tree_html": self.create_tree_view_html(tabname),
                 "items_html": self.create_card_view_html(tabname, none_message="Loading..." if empty else None),
+                "extra_networks_tree_view_min_width": shared.opts.extra_networks_tree_view_min_width,
+                "tree_view_div_default_display": tree_view_div_default_display,
+                "extra_network_pane_content_default_display": extra_network_pane_content_default_display,
             }
         )
 
@@ -703,7 +710,7 @@ def create_ui(interface: gr.Blocks, unrelated_tabs, tabname):
             create_html()
         return ui.pages_contents
 
-    interface.load(fn=pages_html, inputs=[], outputs=ui.pages)
+    interface.load(fn=pages_html, inputs=[], outputs=ui.pages).then(fn=lambda: None, _js='setupExtraNetworksResizeHandle')
 
     return ui
 

style.css

@@ -1615,9 +1615,10 @@ body.resizing .resize-handle {
     display: inline-flex;
     visibility: hidden;
     color: var(--button-secondary-text-color);
-
+    width: 0;
 }
 
 .extra-network-tree .tree-list-content:hover .button-row {
     visibility: visible;
+    width: auto;
 }