Extra Networks settings custom size and visible rows for cards, added mobile custom spacing for theme editor

extensions-builtin/sd_theme_editor/javascript/ui_theme.js

@@ -76,8 +76,7 @@ function hslToHex(h, s, l) {
   return `#${f(0)}${f(8)}${f(4)}`;
 }
 
-function hsl2rgb(h,s,l) 
-{
+function hsl2rgb(h,s,l) {
    let a=s*Math.min(l,1-l);
    let f= (n,k=(n+h/30)%12) => l - a*Math.max(Math.min(k-3,9-k,1),-1);
    return [f(0),f(8),f(4)];
@@ -179,6 +178,8 @@ function offsetColorsHSV(ohsl){
 	
 	const preview_styles = gradioApp().querySelector('#preview-styles');
 	preview_styles.innerHTML = ':host {'+ inner_styles +'}';
+	preview_styles.innerHTML +='@media only screen and (max-width: 860px) {:host{--outside-gap-size: var(--mobile-outside-gap-size);--inside-padding-size: var(--mobile-inside-padding-size);}}';
+
 	
 	const vars_textarea = gradioApp().querySelector('#theme_vars textarea');
 	vars_textarea.value = inner_styles;			
@@ -216,12 +217,14 @@ function updateTheme(vars){
 	
 	if(preview_styles){
 		preview_styles.innerHTML = ':host {'+ inner_styles +'}';
+		preview_styles.innerHTML +='@media only screen and (max-width: 860px) {:host{--outside-gap-size: var(--mobile-outside-gap-size);--inside-padding-size: var(--mobile-inside-padding-size);}}';
 	}else{
 		
 		const r = gradioApp();		
 		const style = document.createElement('style');
 		style.id="preview-styles";
 		style.innerHTML = ':host {'+ inner_styles +'}';
+		style.innerHTML +='@media only screen and (max-width: 860px) {:host{--outside-gap-size: var(--mobile-outside-gap-size);--inside-padding-size: var(--mobile-inside-padding-size);}}';
 		r.appendChild(style);
 	}
 	
@@ -314,6 +317,7 @@ function initTheme() {
 			
 			vars = inner_styles.split(";");			
 			preview_styles.innerHTML = ':host {'+ inner_styles +'}';
+			preview_styles.innerHTML +='@media only screen and (max-width: 860px) {:host{--outside-gap-size: var(--mobile-outside-gap-size);--inside-padding-size: var(--mobile-inside-padding-size);}}';
 
 			vars_textarea.value = inner_styles;			
 			const vEvent = new Event("input");

extensions-builtin/sd_theme_editor/scripts/ui_theme.py

@@ -59,8 +59,12 @@ def on_ui_tabs():
                         gr.ColorPicker(elem_id="--input-focus-color", label="Input color")
 
                     with gr.Accordion(label="Spacing", open=True):
-                        gr.Slider(elem_id="--outside-gap-size", label='Gap size', minimum=0, maximum=16, step=1)
-                        gr.Slider(elem_id="--inside-padding-size", label='Padding size', minimum=0, maximum=16, step=1)                      
+                        gr.Slider(elem_id="--outside-gap-size", label='Gap size', minimum=1, maximum=16, step=1, interactive=True)
+                        gr.Slider(elem_id="--inside-padding-size", label='Padding size', minimum=1, maximum=16, step=1, interactive=True)   
+                    
+                    with gr.Accordion(label="Spacing (Modile)", open=True):
+                        gr.Slider(elem_id="--mobile-outside-gap-size", label='Mobile Gap size', minimum=1, maximum=16, step=1, interactive=True)
+                        gr.Slider(elem_id="--mobile-inside-padding-size", label='Mobile Padding size', minimum=1, maximum=16, step=1, interactive=True)                            
                                     
                     with gr.Accordion(label="Panel colors", open=True):                   
                         gr.ColorPicker(elem_id="--label-color", label="Label color")

html/extra-networks-card.html

@@ -1,12 +1,15 @@
-<div class='card' {preview_html} onclick={card_clicked}>
-	<div class='actions'>
-		<div class='additional'>
-			<ul>
-				<a href="#" title="replace preview image with currently selected in gallery" onclick={save_card_preview}>replace preview</a>
-			</ul>
-			<span style="display:none" class='search_term'>{search_term}</span>
+<div class='card-container' >	
+	<div class='card' {preview_html} onclick={card_clicked}>
+		<div class='actions'>
+			<div class='additional'>
+				<ul>
+					<a href="#" title="replace preview image with currently selected in gallery" onclick={save_card_preview}>replace preview</a>
+				</ul>
+				<span style="display:none" class='search_term'>{search_term}</span>
+			</div>
+			<span class='name'>{name}</span>
 		</div>
-		<span class='name'>{name}</span>
 	</div>
+	<i class="image-icon"></i>
 </div>
 

javascript/ui.js

@@ -505,12 +505,33 @@ onUiUpdate(function(){
 			}
 		})
 	}
-	gradioApp().querySelector("#setting_extra_networks_default_visibility input").addEventListener('click', function (e) {
-		//console.log(e.target.checked);
+	gradioApp().querySelector("#setting_extra_networks_default_visibility input").addEventListener('click', function (e) {		
 		extra_networks_visibility(e.target.checked);
 	})
 	extra_networks_visibility(opts.extra_networks_default_visibility);
 	
+	function extra_networks_card_size(value) {
+       styleobj.extra_networks_card_size = ":host{--extra-networks-card-size:" + value + ";}";
+	   updateOpStyles();
+	}
+	gradioApp().querySelectorAll("#setting_extra_networks_cards_size input").forEach(function (elem){
+		elem.addEventListener('input', function (e) {		
+			extra_networks_card_size(e.target.value);
+		})	
+	})
+	extra_networks_card_size(opts.extra_networks_cards_size);
+	
+	function extra_networks_cards_visible_rows(value) {		
+       styleobj.extra_networks_cards_visible_rows = ":host{--extra-networks-visible-rows:" + value + ";}";
+	   updateOpStyles();
+	}
+	gradioApp().querySelectorAll("#setting_extra_networks_cards_visible_rows input").forEach(function (elem){
+		elem.addEventListener('input', function (e) {		
+			extra_networks_cards_visible_rows(e.target.value);
+		})		
+	})
+	extra_networks_cards_visible_rows(opts.extra_networks_cards_visible_rows);
+	
 
 	//hidden ui tabs
 	let radio_html="";

modules/shared.py

@@ -439,10 +439,12 @@ options_templates.update(options_section(('interrogate', "Interrogate Options"),
 }))
 
 options_templates.update(options_section(('extra_networks', "Extra Networks"), {
-    "extra_networks_default_view": OptionInfo("cards", "Default view for Extra Networks", gr.Dropdown, {"choices": ["cards", "thumbs"]}),
+    #"extra_networks_default_view": OptionInfo("cards", "Default view for Extra Networks", gr.Dropdown, {"choices": ["cards", "thumbs"]}),
     "extra_networks_default_multiplier": OptionInfo(1.0, "Multiplier for extra networks", gr.Slider, {"minimum": 0.0, "maximum": 1.0, "step": 0.01}),
     "sd_hypernetwork": OptionInfo("None", "Add hypernetwork to prompt", gr.Dropdown, lambda: {"choices": [""] + [x for x in hypernetworks.keys()]}, refresh=reload_hypernetworks),
     "extra_networks_default_visibility": OptionInfo(True, "Extra Networks default visibility"),
+    "extra_networks_cards_size": OptionInfo(1, "Card size for extra networks", gr.Slider, {"minimum": 0.8, "maximum": 2, "step": 0.1}),
+    "extra_networks_cards_visible_rows": OptionInfo(1, "Visible card rows for extra networks", gr.Slider, {"minimum": 1, "maximum": 3, "step": 1}),
     
 }))
 

modules/ui_extra_networks.py

@@ -7,12 +7,12 @@ from modules import shared
 import gradio as gr
 import json
 import html
-
+from modules.ui_components import ToolButton
 from modules.generation_parameters_copypaste import image_from_url_text
 
 extra_pages = []
 allowed_dirs = set()
-
+refresh_symbol = '\U0001f504'  # 🔄
 
 def register_page(page):
     """registers extra networks page for the UI; recommend doing it in on_before_ui() callback for extensions"""
@@ -63,7 +63,7 @@ class ExtraNetworksPage:
         return ""
 
     def create_html(self, tabname):
-        view = shared.opts.extra_networks_default_view
+        view = "cards" #shared.opts.extra_networks_default_view
         items_html = ''
 
         subdirs = {}
@@ -182,7 +182,7 @@ def create_ui(container, button, tabname):
                     ui.pages.append(page_elem)
 
         filter = gr.Textbox('', show_label=False, elem_id=tabname+"_extra_search", placeholder="Search...", visible=False)
-        button_refresh = gr.Button('Refresh', elem_id=tabname+"_extra_refresh")
+        button_refresh = ToolButton(value=refresh_symbol, elem_id=tabname+"_extra_refresh")                    
         button_close = gr.Button('Close', elem_id=tabname+"_extra_close")
 
         ui.button_save_preview = gr.Button('Save preview', elem_id=tabname+"_save_preview", visible=False)

style.css

@@ -1,4 +1,4 @@
-:host{--main-bg-color:hsl(195deg 22% 8%);--primary-color:hsl(159deg 96% 55%);--input-bg-color:hsl(202deg 25% 12%);--input-border-color:hsl(200deg 24% 32%);--panel-bg-color:hsl(200deg 24% 20%);--panel-border-color:hsl(200deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(195deg 22% 8%);--subgroup-input-bg-color:hsl(200deg 24% 8%);--subgroup-input-border-color:hsl(200deg 24% 32%);--subpanel-bg-color:hsl(202deg 25% 12%);--subpanel-border-color:hsl(200deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(152deg 3% 36%);--input-focus-color:hsl(159deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(200deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(159deg 96% 55%);--icon-hover-color:hsl(195deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(194deg 24% 4%);--nav-color:hsl(201deg 24% 77%);--nav-hover-color:hsl(194deg 24% 4%);--input-color:hsl(159deg 96% 55%);--label-color:hsl(201deg 24% 77%);--subgroup-input-color:hsl(302deg 100% 100%);--placeholder-color:hsl(200deg 24% 32%);--text-color:hsl(201deg 24% 77%);}/*BREAKPOINT_CSS_CONTENT*/
+:host{--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(168deg 97% 41%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:0px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(168deg 97% 41%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(0deg 84% 60%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(168deg 97% 41%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;}/*BREAKPOINT_CSS_CONTENT*/
 
 /*
 Theme Name: DarkUX
@@ -7,6 +7,25 @@ Author URI: https://github.com/anapnoe/stable-diffusion-webui
 Version: 1.0
 License: GNU General Public License
 */
+:host{
+	--extra-networks-card-size: 1;
+	--extra-networks-card-real-size: calc(var(--extra-networks-card-size) * 14vh);
+	--extra-networks-visible-rows: 2;
+	--extra-networks-height: calc((var(--extra-networks-card-real-size) * var(--extra-networks-visible-rows)) + ( var(--inside-padding-size) * 2 ) );
+	--extra-networks-name-size: calc(var(--extra-networks-card-size) * 1em);
+	
+	
+
+  
+
+}
+
+@media only screen and (max-width: 860px) {
+	:host{
+		--outside-gap-size: var(--mobile-outside-gap-size);
+		--inside-padding-size: var(--mobile-inside-padding-size);
+	}
+}
 
 body {
     background-color: var(--main-bg-color) !important;
@@ -97,6 +116,7 @@ body {
 /* icons */
 
 [id^="refresh_"],
+[id$="_refresh"],
 [id$="_clear_prompt"],
 [id$="2img_style_create"],
 [id$="2img_style_apply"],
@@ -121,7 +141,7 @@ body {
 
 
 
-
+[id$="_refresh"]::before,
 [id^="refresh_"]::before,
 [id$="_clear_prompt"]::before,
 [id$="2img_style_create"]::before,
@@ -155,7 +175,7 @@ body {
 {
     background-color: var(--primary-color);
 }
-
+[id$="_refresh"]:hover::before,
 [id^="refresh_"]:hover::before,
 [id$="_clear_prompt"]:hover::before,
 [id$="2img_style_create"]:hover::before,
@@ -177,7 +197,7 @@ body {
     background-color: var(--icon-hover-color);
 }
 
-
+[id$="_refresh"]::before,
 [id^="refresh_"]::before 
 {
     -webkit-mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%;
@@ -210,8 +230,8 @@ body {
 
 [id$="2img_extra_networks"]::before
 {
-    -webkit-mask: url(./file=html/svg/artboard-line.svg) no-repeat 50% 50%;
-    mask: url(./file=html/svg/artboard-line.svg) no-repeat 50% 50%;
+    -webkit-mask: url(./file=html/svg/pantone-line.svg) no-repeat 50% 50%;
+    mask: url(./file=html/svg/pantone-line.svg) no-repeat 50% 50%;
 }
 
 #img2img_actions_column [id$="interrogate"]::before
@@ -282,16 +302,7 @@ body {
 }
 
 
-@media only screen and (max-width: 860px) {
 
-  :root, * {
-	  
-	--outside-gap-size: 4px;
-	--inside-padding-size: 4px;
-	
-  }
-  
-}
 
 
 
@@ -2039,32 +2050,20 @@ ul.list-none {
     margin-left: .5em;
 }
 
-.extra-network-thumbs {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 10px;
+
+
+
+.extra-networks div {
+  margin: 0;
+  padding:0;
+  border:0;
 }
 
-.extra-network-cards .card,
-.extra-network-thumbs .card {
-    height: 6em;
-    width: 6em;
-    cursor: pointer;
-	/*
-    background-image: url(./file=html/svg/image-icon.svg);
-    background-size: cover;
-    background-position: center center;
-	*/
-    position: relative;
-	border: 1px dashed var(--panel-bg-color);
-	
-	
-}
-
-.extra-networks > div > * {
+.extra-networks > div:first-child > * {
   margin-bottom: var(--inside-padding-size);
 }
 
+
 .extra-networks .search,
 [id$="2img_extra_refresh"],
 [id$="2img_extra_close"] 
@@ -2083,7 +2082,68 @@ ul.list-none {
 }
 
 
+.extra-network-cards {
+    display: grid;
+    /* grid-template-columns: repeat(auto-fill, var(--extra-networks-card-real-size));  
+	overflow-y: auto;
+	scroll-snap-type: y mandatory;
+	*/
+    grid-gap: var(--inside-padding-size);
+   
+    max-height: calc(var(--extra-networks-height) * 1.33);
+	
+	grid-template-rows: repeat(var(--extra-networks-visible-rows), calc(var(--extra-networks-card-real-size) * 1.33));
+    grid-auto-columns: var(--extra-networks-card-real-size);
+    grid-auto-flow: column;
+    overflow-x: auto;
+	overflow-y: hidden;
+	scroll-snap-type: x mandatory;
+	
+}
 
+
+.extra-network-cards .card {
+    position: relative;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+	z-index:1;
+	cursor: pointer;
+	border: 1px dashed var(--panel-bg-color);
+}
+
+.extra-network-cards .card::after {
+    display: block;
+    content: '';  
+    padding-bottom: 133%;
+}
+
+.extra-network-cards .card-container {
+	position:relative;
+}
+
+.extra-network-cards .image-icon {
+    background-color: var(--panel-border-color);
+    -webkit-mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%;
+    mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 50%;
+    left: 50%;
+    z-index: 0;
+	transform: translateX(-50%) translateY(-50%);
+}
+
+/*
+.extra-network-cards::after {
+    display: block;
+    content: '';
+    padding-bottom: 133%;
+}
+*/
+
+/*
 .extra-network-cards{
 	display: grid;
     grid-gap: var(--inside-padding-size);
@@ -2160,7 +2220,7 @@ ul.list-none {
     word-break: break-all;
 }
 
-
+*/
 
 .extra-network-cards .card:hover {
     /*box-shadow: 0 0 2px .3em rgba(0, 128, 255, .35);*/
@@ -2183,7 +2243,7 @@ ul.list-none {
 }
 
 .extra-network-cards .card .actions .name {
-    font-size: 1.2em;
+    font-size: var(--extra-networks-name-size);
     font-weight: 700;
     line-break: anywhere;
 }