alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-24 22:52:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

Enhance version selection UI with thumbnails and file size; improve modal click handling

Browse Source
This commit is contained in:
Will Miao
2025-02-14 15:45:49 +08:00
parent d66603d7e0
commit a2428b31b5
4 changed files with 107 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
static/js/managers/DownloadManager.js
View File

@@ -97,16 +97,31 @@ export class DownloadManager {
document.getElementById('versionStep').style.display = 'block';
const versionList = document.getElementById('versionList');
versionList.innerHTML = this.versions.map(version => `
<div class="version-item ${this.currentVersion?.id === version.id ? 'selected' : ''}"
onclick="downloadManager.selectVersion('${version.id}')">
<h3>${version.name}</h3>
<div class="version-info">
${version.baseModel ? `<div class="base-model">${version.baseModel}</div>` : ''}
<div class="version-date">${new Date(version.createdAt).toLocaleDateString()}</div>
versionList.innerHTML = this.versions.map(version => {
// Find first image (skip videos)
const firstImage = version.images?.find(img => !img.url.endsWith('.mp4'));
const thumbnailUrl = firstImage ? firstImage.url : '/loras_static/images/no-preview.png';
const fileSize = (version.files[0]?.sizeKB / 1024).toFixed(2); // Convert to MB
return `
<div class="version-item ${this.currentVersion?.id === version.id ? 'selected' : ''}"
onclick="downloadManager.selectVersion('${version.id}')">
<div class="version-thumbnail">
<img src="${thumbnailUrl}" alt="Version preview">
</div>
<div class="version-content">
<h3>${version.name}</h3>
<div class="version-info">
${version.baseModel ? `<div class="base-model">${version.baseModel}</div>` : ''}
</div>
<div class="version-meta">
<span><i class="fas fa-calendar"></i> ${new Date(version.createdAt).toLocaleDateString()}</span>
<span><i class="fas fa-file-archive"></i> ${fileSize} MB</span>
</div>
</div>
</div>
</div>
`).join('');
`;
}).join('');
}
selectVersion(versionId) {

14
static/js/managers/ModalManager.js
View File

@@ -54,12 +54,14 @@ export class ModalManager {
isOpen: false
});
// Add click outside to close for each modal
config.element.addEventListener('click', (e) => {
if (e.target === config.element) {
this.closeModal(id);
}
});
// Only add click outside handler if it's not the download modal
if (id !== 'downloadModal') {
config.element.addEventListener('click', (e) => {
if (e.target === config.element) {
this.closeModal(id);
}
});
}
}
getModal(id) {