Merge pull request #8569 from missionfloyd/extra-networks-toggle

Make extra networks button togglable

javascript/hints.js

@@ -21,8 +21,7 @@ titles = {
     "\u{1f5d1}\ufe0f": "Clear prompt",
     "\u{1f4cb}": "Apply selected styles to current prompt",
     "\u{1f4d2}": "Paste available values into the field",
-    "\u{1f3b4}": "Show extra networks",
-
+    "\u{1f3b4}": "Show/hide extra networks",
 
     "Inpaint a part of image": "Draw a mask over an image, and the script will regenerate the masked area with content according to prompt",
     "SD upscale": "Upscale image normally, split result into tiles, improve each tile using img2img, merge whole image back",

modules/ui_extra_networks.py

@@ -252,10 +252,10 @@ def create_ui(container, button, tabname):
 
     def toggle_visibility(is_visible):
         is_visible = not is_visible
-        return is_visible, gr.update(visible=is_visible)
+        return is_visible, gr.update(visible=is_visible), gr.update(variant=("primary" if is_visible else "tool"))
 
     state_visible = gr.State(value=False)
-    button.click(fn=toggle_visibility, inputs=[state_visible], outputs=[state_visible, container])
+    button.click(fn=toggle_visibility, inputs=[state_visible], outputs=[state_visible, container, button])
 
     def refresh():
         res = []

style.css

@@ -810,3 +810,10 @@ footer {
 .extra-network-cards .card ul a:hover{
     color: red;
 }
+
+button[id$='_extra_networks'] {
+    max-width: 2.2em;
+    min-width: 2.2em !important;
+    height: 2.4em;
+    line-height: 1em !important;
+}