diff --git a/CHANGELOG.md b/CHANGELOG.md index 0659f5a8c..e4cc69b6d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,9 @@ We're back with another update with over 50 commits! - **UI** - force browser cache-invalidate on page load - configurable request timeout + - modernui improve gallery styling + - modernui improve networks styling + - modernui support variable card size - **Docs** - New [Outpaint](https://vladmandic.github.io/sdnext-docs/Outpaint/) step-by-step guide - Updated [Docker](https://github.com/vladmandic/sdnext/wiki/Docker) guide diff --git a/extensions-builtin/sdnext-modernui b/extensions-builtin/sdnext-modernui index aa24200db..52c06cda8 160000 --- a/extensions-builtin/sdnext-modernui +++ b/extensions-builtin/sdnext-modernui @@ -1 +1 @@ -Subproject commit aa24200db2a42fc369adbf6fe372420c65f7500d +Subproject commit 52c06cda82782b0aabbaee0887e9b999f97f357d diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 796efe051..36ae3be2c 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -515,5 +515,6 @@ async function setupExtraNetworks() { registerPrompt('img2img', 'img2img_neg_prompt'); registerPrompt('control', 'control_prompt'); registerPrompt('control', 'control_neg_prompt'); - log('initNetworks'); + log('initNetworks', window.opts.extra_networks_card_size); + document.documentElement.style.setProperty('--card-size', `${window.opts.extra_networks_card_size}px`); } diff --git a/javascript/gallery.js b/javascript/gallery.js index ae3270dc8..39649d5dc 100644 --- a/javascript/gallery.js +++ b/javascript/gallery.js @@ -23,19 +23,20 @@ class GalleryFolder extends HTMLElement { } connectedCallback() { - const style = document.createElement('style'); - style.textContent = ` - .gallery-folder { - cursor: pointer; - padding: 8px 6px 8px 6px; - } - .gallery-folder:hover { - background-color: var(--button-primary-background-fill-hover); - } - .gallery-folder-selected { - background-color: var(--button-primary-background-fill); - } - `; + const style = document.createElement('style'); // silly but necessasry since we're inside shadowdom + if (window.opts.theme_type === 'Modern') { + style.textContent = ` + .gallery-folder { cursor: pointer; padding: 8px 6px 8px 6px; background-color: var(--sd-secondary-color); } + .gallery-folder:hover { background-color: var(--button-primary-background-fill-hover); } + .gallery-folder-selected { background-color: var(--sd-button-selected-color); color: var(--sd-button-selected-text-color); } + `; + } else { + style.textContent = ` + .gallery-folder { cursor: pointer; padding: 8px 6px 8px 6px; } + .gallery-folder:hover { background-color: var(--button-primary-background-fill-hover); } + .gallery-folder-selected { background-color: var(--button-primary-background-fill); } + `; + } this.shadow.appendChild(style); const div = document.createElement('div'); div.className = 'gallery-folder'; diff --git a/javascript/sdnext.css b/javascript/sdnext.css index 600ea14ea..fcddfd5a9 100644 --- a/javascript/sdnext.css +++ b/javascript/sdnext.css @@ -6,6 +6,7 @@ --color-info: #D4D4D4; --color-warning: #FF9900; --color-error: #BE0000; + --card-size: 160px; } a { font-weight: bold; cursor: pointer; } h2 { margin-top: 1em !important; font-size: var(--text-xxl) !important; } diff --git a/modules/api/gallery.py b/modules/api/gallery.py index 17ea2cc39..e56bb00ac 100644 --- a/modules/api/gallery.py +++ b/modules/api/gallery.py @@ -184,7 +184,7 @@ async def ws_files(ws: WebSocket): folder = unquote(folder).replace('%3A', ':') t0 = time.time() numFiles = 0 - files = files_cache.directory_files(folder, recursive=True) + files = files_cache.list_files(folder, recursive=True) # files = list(files_cache.directory_files(folder, recursive=True)) # files.sort(key=os.path.getmtime) for f in files: diff --git a/modules/ui_extra_networks.py b/modules/ui_extra_networks.py index 1da30f220..c1444539f 100644 --- a/modules/ui_extra_networks.py +++ b/modules/ui_extra_networks.py @@ -316,8 +316,8 @@ def random_bright_color(): "filename": item.get('filename', ''), "tags": '|'.join([item.get('tags')] if isinstance(item.get('tags', {}), str) else list(item.get('tags', {}).keys())), "preview": html.escape(item.get('preview', None) or self.link_preview('html/card-no-preview.png')), - "width": shared.opts.extra_networks_card_size, - "height": shared.opts.extra_networks_card_size if shared.opts.extra_networks_card_square else 'auto', + "width": 'var(--card-size)', + "height": 'var(--card-size)' if shared.opts.extra_networks_card_square else 'auto', "fit": shared.opts.extra_networks_card_fit, "prompt": item.get("prompt", None), "search": item.get("search_term", ""),