diff --git a/static/css/style.css b/static/css/style.css index 92e39b7b..d9313306 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -1413,4 +1413,78 @@ body.modal-open { .folder-item.selected { background: oklch(var(--lora-accent) / 0.1); border: 1px solid var(--lora-accent); +} + +/* Path Preview Styles */ +.path-preview { + margin-bottom: var(--space-3); + padding: var(--space-2); + background: var(--bg-color); + border-radius: var(--border-radius-sm); + border: 1px dashed var(--border-color); +} + +.path-preview label { + display: block; + margin-bottom: 8px; + color: var(--text-color); + font-size: 0.9em; + opacity: 0.8; +} + +.path-display { + padding: var(--space-1); + color: var(--text-color); + font-family: monospace; + font-size: 0.9em; + line-height: 1.4; + white-space: pre-wrap; + word-break: break-all; + opacity: 0.85; + background: var(--lora-surface); + border-radius: var(--border-radius-xs); +} + +.path-text { + color: var(--text-color); +} + +.path-preview { + margin-top: var(--space-2); + padding: var(--space-2); + background: var(--lora-surface); + border: 1px solid var(--lora-border); + border-radius: var(--border-radius-sm); +} + +.path-preview label { + display: block; + margin-bottom: 8px; + color: var(--text-color); + font-size: 0.9em; +} + +.path-display { + display: flex; + align-items: center; + gap: 8px; + padding: var(--space-1); + background: var(--bg-color); + border: 1px solid var(--border-color); + border-radius: var(--border-radius-xs); + color: var(--text-color); + font-family: monospace; + font-size: 0.9em; + overflow-x: auto; + white-space: nowrap; +} + +.path-display i { + color: var(--lora-accent); + opacity: 0.8; +} + +.path-text { + color: var(--text-color); + opacity: 0.9; } \ No newline at end of file diff --git a/static/js/managers/DownloadManager.js b/static/js/managers/DownloadManager.js index ba158ae8..59075f72 100644 --- a/static/js/managers/DownloadManager.js +++ b/static/js/managers/DownloadManager.js @@ -18,6 +18,7 @@ export class DownloadManager { // Add LoadingManager instance this.loadingManager = new LoadingManager(); this.folderClickHandler = null; // Add this line + this.updateTargetPath = this.updateTargetPath.bind(this); } showDownloadModal() { @@ -44,6 +45,13 @@ export class DownloadManager { document.getElementById('urlStep').style.display = 'block'; document.getElementById('loraUrl').value = ''; document.getElementById('urlError').textContent = ''; + + // Clear new folder input + const newFolderInput = document.getElementById('newFolder'); + if (newFolderInput) { + newFolderInput.value = ''; + } + this.currentVersion = null; this.versions = []; this.modelInfo = null; @@ -274,10 +282,23 @@ export class DownloadManager { folderItem.classList.add('selected'); this.selectedFolder = folderItem.dataset.folder; } + + // Update path display after folder selection + this.updateTargetPath(); }; // Add the new handler folderBrowser.addEventListener('click', this.folderClickHandler); + + // Add event listeners for path updates + const loraRoot = document.getElementById('loraRoot'); + const newFolder = document.getElementById('newFolder'); + + loraRoot.addEventListener('change', this.updateTargetPath); + newFolder.addEventListener('input', this.updateTargetPath); + + // Update initial path + this.updateTargetPath(); } cleanupFolderBrowser() { @@ -288,5 +309,32 @@ export class DownloadManager { this.folderClickHandler = null; } } + + // Remove path update listeners + const loraRoot = document.getElementById('loraRoot'); + const newFolder = document.getElementById('newFolder'); + + loraRoot.removeEventListener('change', this.updateTargetPath); + newFolder.removeEventListener('input', this.updateTargetPath); + } + + // Add new method to update target path + updateTargetPath() { + const pathDisplay = document.getElementById('targetPathDisplay'); + const loraRoot = document.getElementById('loraRoot').value; + const newFolder = document.getElementById('newFolder').value.trim(); + + let fullPath = loraRoot || 'Select a LoRA root directory'; + + if (loraRoot) { + if (this.selectedFolder) { + fullPath += '/' + this.selectedFolder; + } + if (newFolder) { + fullPath += '/' + newFolder; + } + } + + pathDisplay.innerHTML = `${fullPath}`; } } diff --git a/templates/components/modals.html b/templates/components/modals.html index 57a5f194..e7afa039 100644 --- a/templates/components/modals.html +++ b/templates/components/modals.html @@ -46,6 +46,14 @@