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

Improve download modal UX with local version handling and disabled button state

Browse Source
This commit is contained in:
Will Miao
2025-03-07 08:40:52 +08:00
parent a1e9e440ed
commit 5c917b88c7
2 changed files with 93 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
static/css/components/download-modal.css
View File

@@ -237,4 +237,61 @@
[data-theme="dark"] .local-path {
background: var(--lora-surface);
border-color: var(--lora-border);
}
/* Add disabled button styles */
.primary-btn.disabled {
background-color: var(--border-color);
color: var(--text-color);
opacity: 0.7;
cursor: not-allowed;
}
/* Enhance the local badge to make it more noticeable */
.version-item.exists-locally {
background: oklch(var(--lora-accent) / 0.05);
border-left: 4px solid var(--lora-accent);
}
.local-badge {
display: inline-flex;
align-items: center;
background: var(--lora-accent);
color: var(--lora-text);
padding: 4px 8px;
border-radius: var(--border-radius-xs);
font-size: 0.8em;
font-weight: 500;
white-space: nowrap;
flex-shrink: 0;
position: relative;
}
.local-badge i {
margin-right: 4px;
font-size: 0.9em;
}
.local-path {
display: none;
position: absolute;
top: 100%;
right: 0;
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-xs);
padding: var(--space-1);
margin-top: 4px;
font-size: 0.9em;
color: var(--text-color);
white-space: normal;
word-break: break-all;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
z-index: 1;
min-width: 200px;
max-width: 300px;
}
.local-badge:hover .local-path {
display: block;
}

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

@@ -154,21 +154,45 @@ export class DownloadManager {
</div>
`;
}).join('');
// Update Next button state based on initial selection
this.updateNextButtonState();
}
selectVersion(versionId) {
this.currentVersion = this.versions.find(v => v.id.toString() === versionId.toString());
if (!this.currentVersion) return;
// Check if version exists locally
const existsLocally = this.currentVersion.files[0]?.existsLocally;
if (existsLocally) {
showToast('This version already exists in your library', 'info');
}
// Remove the toast notification - it's redundant with the visual indicator
// const existsLocally = this.currentVersion.files[0]?.existsLocally;
// if (existsLocally) {
// showToast('This version already exists in your library', 'info');
// }
document.querySelectorAll('.version-item').forEach(item => {
item.classList.toggle('selected', item.querySelector('h3').textContent === this.currentVersion.name);
});
// Update Next button state after selection
this.updateNextButtonState();
}
// Add new method to update Next button state
updateNextButtonState() {
const nextButton = document.querySelector('#versionStep .primary-btn');
if (!nextButton) return;
const existsLocally = this.currentVersion?.files[0]?.existsLocally;
if (existsLocally) {
nextButton.disabled = true;
nextButton.classList.add('disabled');
nextButton.textContent = 'Already in Library';
} else {
nextButton.disabled = false;
nextButton.classList.remove('disabled');
nextButton.textContent = 'Next';
}
}
async proceedToLocation() {
@@ -176,6 +200,13 @@ export class DownloadManager {
showToast('Please select a version', 'error');
return;
}
// Double-check if the version exists locally
const existsLocally = this.currentVersion.files[0]?.existsLocally;
if (existsLocally) {
showToast('This version already exists in your library', 'info');
return;
}
document.getElementById('versionStep').style.display = 'none';
document.getElementById('locationStep').style.display = 'block';