mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-08-08 06:50:15 -03:00
4bf9a4b640
The download modal's step shared the 'locationStep' id with the import
modal, so getElementById('locationStep') could resolve to the wrong
element depending on template include order. The import flow relied on
an injected display:block !important rule to work around it.
Rename the download modal's step id and update all references so each
modal owns a unique step id.
127 lines
6.7 KiB
HTML
127 lines
6.7 KiB
HTML
<!-- Unified Download Modal for all model types -->
|
|
<div id="downloadModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button class="close" id="closeDownloadModal">×</button>
|
|
<h2 id="downloadModalTitle">{{ t('modals.download.title') }}</h2>
|
|
</div>
|
|
|
|
<!-- Step 1: URL Input -->
|
|
<div class="download-step" id="urlStep">
|
|
<div class="input-group">
|
|
<label for="modelUrl" id="modelUrlLabel">{{ t('modals.download.civitaiUrl') }}</label>
|
|
<textarea id="modelUrl" rows="5" placeholder="{{ t('modals.download.placeholder') }}"></textarea>
|
|
<div class="error-message" id="urlError"></div>
|
|
<div class="input-hint">
|
|
<i class="fas fa-info-circle"></i>
|
|
<span id="urlHint">{{ t('modals.download.urlHint') }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="primary-btn" id="nextFromUrl">{{ t('common.actions.next') }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Batch Preview (multi-URL mode) -->
|
|
<div class="download-step" id="batchPreviewStep" style="display: none;">
|
|
<div class="batch-preview-list" id="batchPreviewList">
|
|
<!-- Batch items will be inserted here dynamically -->
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" id="backToUrlFromBatchBtn">{{ t('common.actions.back') }}</button>
|
|
<button class="primary-btn" id="nextFromBatchBtn">{{ t('common.actions.next') }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Version Selection (single-URL or per-item editing) -->
|
|
<div class="download-step" id="versionStep" style="display: none;">
|
|
<div class="version-list" id="versionList">
|
|
<!-- Versions will be inserted here dynamically -->
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" id="backToUrlBtn">{{ t('common.actions.back') }}</button>
|
|
<button class="primary-btn" id="nextFromVersion">{{ t('common.actions.next') }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2.5: File Selection (optional - only when version has multiple model files) -->
|
|
<div class="download-step" id="fileSelectionStep" style="display: none;">
|
|
<div class="file-selection-header">
|
|
<h3 id="fileSelectionTitle">{{ t('modals.download.fileSelection.title') }}</h3>
|
|
<div class="file-selection-version-name" id="fileSelectionVersionName"></div>
|
|
</div>
|
|
<div class="file-selection-list" id="fileSelectionList">
|
|
<!-- File options will be rendered here dynamically -->
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" id="backToVersionFromFilesBtn">{{ t('common.actions.back') }}</button>
|
|
<button class="primary-btn" id="confirmFileSelection">{{ t('modals.download.fileSelection.select') }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Location Selection -->
|
|
<div class="download-step" id="downloadLocationStep" style="display: none;">
|
|
<div class="location-selection">
|
|
<!-- Path preview with inline toggle -->
|
|
<div class="path-preview">
|
|
<div class="path-preview-header">
|
|
<label>{{ t('modals.download.locationPreview') }}:</label>
|
|
<div class="inline-toggle-container" title="{{ t('modals.download.useDefaultPathTooltip') }}">
|
|
<span class="inline-toggle-label">{{ t('modals.download.useDefaultPath') }}</span>
|
|
<div class="toggle-switch">
|
|
<input type="checkbox" id="useDefaultPath">
|
|
<label for="useDefaultPath" class="toggle-slider"></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="path-display" id="targetPathDisplay">
|
|
<span class="path-text">{{ t('modals.download.selectRootDirectory') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Model Root Selection (always visible) -->
|
|
<div class="input-group">
|
|
<label for="modelRoot" id="modelRootLabel">{{ t('modals.download.selectModelRoot') }}</label>
|
|
<select id="modelRoot"></select>
|
|
</div>
|
|
|
|
<!-- Manual Path Selection (hidden when using default path) -->
|
|
<div class="manual-path-selection" id="manualPathSelection">
|
|
<!-- Path input with autocomplete -->
|
|
<div class="input-group">
|
|
<label for="folderPath">{{ t('modals.download.targetFolderPath') }}</label>
|
|
<div class="path-input-container">
|
|
<input type="text" id="folderPath" placeholder="{{ t('modals.download.pathPlaceholder') }}" autocomplete="off" />
|
|
<button type="button" id="createFolderBtn" class="create-folder-btn" title="{{ t('modals.download.createNewFolder') }}">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<div class="path-suggestions" id="pathSuggestions" style="display: none;"></div>
|
|
</div>
|
|
|
|
<!-- Breadcrumb navigation -->
|
|
<div class="breadcrumb-nav" id="breadcrumbNav">
|
|
<span class="breadcrumb-item root" data-path="">
|
|
<i class="fas fa-home"></i> {{ t('modals.download.root') }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Hierarchical folder tree -->
|
|
<div class="input-group">
|
|
<label>{{ t('modals.download.browseFolders') }}</label>
|
|
<div class="folder-tree-container">
|
|
<div class="folder-tree" id="folderTree">
|
|
<!-- Tree will be loaded dynamically -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" id="backToVersionsBtn">{{ t('common.actions.back') }}</button>
|
|
<button class="primary-btn" id="startDownloadBtn">{{ t('modals.download.download') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|