Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-08-26 15:16:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

gallery improve sort

Browse Source 
Signed-off-by: Vladimir Mandic <mandic00@live.com>
This commit is contained in:
Vladimir Mandic
2026-07-13 20:35:05 +02:00
parent fb71f63d77
commit 31da9cce6f
7 changed files with 45 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -55,6 +55,7 @@
- download: improved progress tracking
- gallery: delete image
- gallery: save image
- standardui: gallery collapse sections
## Update for 2026-07-07
extensions-builtin/sdnext-modernui
+1 -1
Submodule extensions-builtin/sdnext-modernui updated: d35c478ba9...5d15fb3291
modules/infotext.py
+4 -2
View File
@@ -66,8 +66,10 @@ def parse(infotext):
return params
params['Prompt'] = prompt if len(prompt) > 0 else None
params['Negative prompt'] = negative if len(negative) > 0 else None
params['Template'] = template if len(template) > 0 else None
params['Negative template'] = negative_template if len(negative_template) > 0 else None
if len(template) > 0:
params['Template'] = template
if len(negative_template) > 0:
params['Negative template'] = negative_template
if params['Template'] == params['Prompt']:
params.pop('Template', None)
if params['Negative template'] == params['Negative prompt']:
ui/css/sdnext.css
+1 -1
View File
@@ -1852,7 +1852,7 @@ background: var(--background-color)
#tab-gallery-files gallery-file {
/* Add a vertical gutter between items (left/right), matching existing small row spacing */
display: inline-block !important;
display: inline-block;
margin-right: 0.2em;
vertical-align: top; /* keep rows aligned on the top edge */
}
ui/dist/sdnext.mjs
Vendored
+11 -8
View File
@@ -13151,9 +13151,9 @@ function updateGalleryStyles() {
padding: 4px;
font-size: 1.2em;
letter-spacing: 0.5em;
width: 140px;
margin-top: calc(140px - 32px);
opacity: 75%;
border-radius: var(--sd-border-radius);
}
:host(.gallery-file-selected) .gallery-file {
box-shadow: 0 0 0 2px var(--sd-button-selected-color);
@@ -13203,6 +13203,10 @@ var SimpleProgressBar = class {
if (total <= 0) return;
this.hide();
this.#max = total;
if (this.#monitoredSet.size >= this.#max) {
this.stop();
return;
}
this.#interval = setInterval(() => this.update(this.#monitoredSet.size, this.#max), 100);
}
attachTo(element) {
@@ -13226,7 +13230,6 @@ var SimpleProgressBar = class {
}
stop() {
clearInterval(this.#interval);
this.#interval = void 0;
if (this.stats.count) {
debug("gallery: thumbnail stats", this.stats);
this.stats = { ...this.defaultStats };
@@ -13513,7 +13516,7 @@ Size: ${this.size.toLocaleString()} bytes
Modified: ${this.mtime.toLocaleString()}`;
this.title = img.title;
const shouldDisplayBasedOnSearch = this.title.toLowerCase().includes(el.search.value.toLowerCase());
if (this.style.display !== "none") this.style.display = shouldDisplayBasedOnSearch ? "flex" : "none";
if (this.style.display !== "none") this.style.display = shouldDisplayBasedOnSearch ? "" : "none";
this.shadow.appendChild(img);
pb.stats.elapsed = (pb.stats.elapsed || 0) + Math.round(performance.now() - t0);
}
@@ -13530,7 +13533,7 @@ async function handleSeparator(separator) {
const fileDir = f.name.match(/(.*)[/\\]/);
const fileDirPath = fileDir ? fileDir[1] : "";
if (separator.title.length > 0 && fileDirPath === separator.title) {
f.style.display = nowHidden ? "none" : "unset";
f.style.display = nowHidden ? "none" : "";
}
}
}
@@ -13763,15 +13766,15 @@ async function gallerySort(key) {
const folderGroups = /* @__PURE__ */ new Map();
for (const file of subfolderFiles) {
const dir = getDirPath(file);
if (!folderGroups.has(dir)) {
folderGroups.set(dir, []);
}
if (!folderGroups.has(dir)) folderGroups.set(dir, []);
folderGroups.get(dir).push(file);
}
sortMode = gallerySorter[currentSort];
rootFiles.sort(sortMode.func);
rootFiles.forEach((node) => fragment.appendChild(node));
const sortedFolderNames = Array.from(folderGroups.keys()).sort((a, b) => a.localeCompare(b));
const folderNames = Array.from(folderGroups.keys());
const sortedFolderNames = currentSort.endsWith("A") ? folderNames.sort((a, b) => a.localeCompare(b)) : folderNames.sort((a, b) => b.localeCompare(a));
console.log("HERE", sortedFolderNames);
for (const folderName of sortedFolderNames) {
const files = folderGroups.get(folderName);
files.sort(sortMode.func);
ui/dist/sdnext.mjs.map
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
ui/gallery.ts
+25 -9
View File
@@ -68,6 +68,17 @@ const gallerySorter = {
modA: { name: 'Modified Descending', func: (b, a) => a.mtime - b.mtime },
none: { name: 'None', func: undefined },
};
const folderSorter = {
nameA: { name: 'Name Ascending', func: (a, b) => a.name.localeCompare(b.name) },
nameD: { name: 'Name Descending', func: (b, a) => a.name.localeCompare(b.name) },
sizeD: { name: 'Size Ascending', func: (a, b) => a.size - b.size },
sizeA: { name: 'Size Descending', func: (b, a) => a.size - b.size },
resD: { name: 'Resolution Ascending', func: (a, b) => a.width * a.height - b.width * b.height },
resA: { name: 'Resolution Descending', func: (b, a) => a.width * a.height - b.width * b.height },
modD: { name: 'Modified Ascending', func: (a, b) => a.mtime - b.mtime },
modA: { name: 'Modified Descending', func: (b, a) => a.mtime - b.mtime },
none: { name: 'None', func: undefined },
};
let sortMode = gallerySorter.none;
@@ -230,9 +241,9 @@ function updateGalleryStyles() {
padding: 4px;
font-size: 1.2em;
letter-spacing: 0.5em;
width: 140px;
margin-top: calc(140px - 32px);
opacity: 75%;
border-radius: var(--sd-border-radius);
}
:host(.gallery-file-selected) .gallery-file {
box-shadow: 0 0 0 2px var(--sd-button-selected-color);
@@ -283,7 +294,6 @@ class SimpleProgressBar {
this.#progress.style.backgroundColor = 'var(--sd-main-accent-color)';
this.#textDiv.style.cssText = 'position:relative; margin:auto; width:max-content; height:100%;';
this.#text.style.cssText = 'user-select:none; color:white;';
this.#textDiv.append(this.#text);
this.#container.append(this.#progress, this.#textDiv);
}
@@ -292,6 +302,10 @@ class SimpleProgressBar {
if (total <= 0) return;
this.hide();
this.#max = total;
if (this.#monitoredSet.size >= this.#max) {
this.stop();
return;
}
this.#interval = setInterval(() => this.update(this.#monitoredSet.size, this.#max), 100);
}
@@ -319,7 +333,7 @@ class SimpleProgressBar {
stop() {
clearInterval(this.#interval);
this.#interval = undefined;
// this.#interval = undefined;
if (this.stats.count) {
debug('gallery: thumbnail stats', this.stats);
this.stats = { ...this.defaultStats };
@@ -634,7 +648,7 @@ class GalleryFile extends HTMLElement {
img.title = `Folder: ${this.folder}\nFile: ${this.name}\nSize: ${this.size.toLocaleString()} bytes\nModified: ${this.mtime.toLocaleString()}`;
this.title = img.title;
const shouldDisplayBasedOnSearch = this.title.toLowerCase().includes(el.search.value.toLowerCase()); // Final visibility check based on search term.
if (this.style.display !== 'none') this.style.display = shouldDisplayBasedOnSearch ? 'flex' : 'none'; // Only proceed if not already hidden by a closed separator
if (this.style.display !== 'none') this.style.display = shouldDisplayBasedOnSearch ? '' : 'none'; // Only proceed if not already hidden by a closed separator
this.shadow.appendChild(img);
pb.stats.elapsed = (pb.stats.elapsed || 0) + Math.round(performance.now() - t0);
}
@@ -679,7 +693,7 @@ async function handleSeparator(separator) {
const fileDirPath = fileDir ? fileDir[1] : '';
if (separator.title.length > 0 && fileDirPath === separator.title) {
f.style.display = nowHidden ? 'none' : 'unset';
f.style.display = nowHidden ? 'none' : '';
}
}
// Note: Count is not updated here on manual toggle, as it reflects the total.
@@ -984,9 +998,7 @@ export async function gallerySort(key) {
const folderGroups = new Map();
for (const file of subfolderFiles) {
const dir = getDirPath(file);
if (!folderGroups.has(dir)) {
folderGroups.set(dir, []);
}
if (!folderGroups.has(dir)) folderGroups.set(dir, []);
folderGroups.get(dir).push(file);
}
@@ -997,7 +1009,11 @@ export async function gallerySort(key) {
rootFiles.forEach((node) => fragment.appendChild(node));
// Sort folder names alphabetically, then sort files within each folder
const sortedFolderNames = Array.from<any>(folderGroups.keys()).sort((a, b) => a.localeCompare(b));
// const sortedFolderNames = Array.from<any>(folderGroups.keys()).sort((a, b) => a.localeCompare(b));
const folderNames = Array.from<string>(folderGroups.keys());
const sortedFolderNames = currentSort.endsWith('A') ? folderNames.sort((a, b) => a.localeCompare(b)) : folderNames.sort((a, b) => b.localeCompare(a));
console.log('HERE', sortedFolderNames);
for (const folderName of sortedFolderNames) {
const files = folderGroups.get(folderName);
files.sort(sortMode.func);