configurable card sizes

Signed-off-by: Vladimir Mandic <[email protected]>
vladmandic · Feb 17, 2025 · 60a7549 · 60a7549
1 parent b699015
commit 60a7549
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 18 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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", ""),
+2 −9		html/templates/main/template-caption-params.html
+0 −14		html/templates/main/template-extras-params.html
+0 −10		html/templates/main/template-gallery-params.html
+12 −5		style.css