From eb99918ef410052d64e8935ef10c98a2f3f58ba2 Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Sat, 25 Feb 2023 18:47:23 +0200 Subject: [PATCH] Extra Networks settings custom size and visible rows for cards, added mobile custom spacing for theme editor --- .../sd_theme_editor/javascript/ui_theme.js | 8 +- .../sd_theme_editor/scripts/ui_theme.py | 8 +- html/extra-networks-card.html | 19 +-- javascript/ui.js | 25 +++- modules/shared.py | 4 +- modules/ui_extra_networks.py | 8 +- style.css | 136 +++++++++++++----- 7 files changed, 151 insertions(+), 57 deletions(-) diff --git a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js b/extensions-builtin/sd_theme_editor/javascript/ui_theme.js index 149675b4..f6fd703d 100644 --- a/extensions-builtin/sd_theme_editor/javascript/ui_theme.js +++ b/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"); diff --git a/extensions-builtin/sd_theme_editor/scripts/ui_theme.py b/extensions-builtin/sd_theme_editor/scripts/ui_theme.py index 95ad5a11..cd342938 100644 --- a/extensions-builtin/sd_theme_editor/scripts/ui_theme.py +++ b/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") diff --git a/html/extra-networks-card.html b/html/extra-networks-card.html index 8a5e2fbd..b718ac4f 100644 --- a/html/extra-networks-card.html +++ b/html/extra-networks-card.html @@ -1,12 +1,15 @@ -
-
-
- - +
+
+
+
+ + +
+ {name}
- {name}
+
diff --git a/javascript/ui.js b/javascript/ui.js index ce3d1162..0464aef3 100644 --- a/javascript/ui.js +++ b/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=""; diff --git a/modules/shared.py b/modules/shared.py index 429477d0..69440be4 100644 --- a/modules/shared.py +++ b/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}), })) diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index f90300e6..9b8c4a2b 100644 --- a/modules/ui_extra_networks.py +++ b/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) diff --git a/style.css b/style.css index 3a6543ca..f002cf2b 100644 --- a/style.css +++ b/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; }