refactor: streamline example images download functionality and UI updates

This commit is contained in:
Will Miao
2025-04-30 13:20:44 +08:00
parent cb876cf77e
commit 26d9a9caa6
7 changed files with 235 additions and 198 deletions

View File

@@ -135,15 +135,15 @@
<div class="setting-info">
<label for="exampleImagesPath">Download Location</label>
</div>
<div class="setting-control path-browser-control">
<input type="text" id="exampleImagesPath" placeholder="Select a folder for example images" />
<button id="browseExampleImagesPath" class="browse-btn">
<i class="fas fa-folder-open"></i> Browse
<div class="setting-control path-control">
<input type="text" id="exampleImagesPath" placeholder="Enter folder path for example images" />
<button id="exampleImagesDownloadBtn" class="primary-btn">
<i class="fas fa-download"></i> <span id="exampleDownloadBtnText">Download</span>
</button>
</div>
</div>
<div class="input-help">
Choose where to save example images downloaded from Civitai
Enter the folder path where example images from Civitai will be saved
</div>
</div>
@@ -164,17 +164,6 @@
Optimize example images to reduce file size and improve loading speed
</div>
</div>
<div class="setting-item">
<div class="setting-row download-buttons">
<button id="startExampleDownloadBtn" class="primary-btn disabled">
<i class="fas fa-download"></i> Download Example Images
</button>
<button id="resumeExampleDownloadBtn" class="primary-btn" style="display: none;">
<i class="fas fa-play"></i> Resume Download
</button>
</div>
</div>
</div>
</div>
</div>

View File

@@ -5,10 +5,10 @@
<i class="fas fa-images"></i> Example Images Download
</div>
<div class="progress-panel-actions">
<button id="pauseExampleDownloadBtn" class="icon-button" onclick="exampleImagesManager.pauseDownload()">
<button id="pauseExampleDownloadBtn" class="icon-button">
<i class="fas fa-pause"></i>
</button>
<button id="collapseProgressBtn" class="icon-button" onclick="exampleImagesManager.toggleProgressPanel()">
<button id="collapseProgressBtn" class="icon-button">
<i class="fas fa-chevron-down"></i>
</button>
</div>
@@ -45,4 +45,29 @@
<div id="downloadErrors" class="error-list"></div>
</div>
</div>
</div>
</div>
<script>
// Initialize button onclick handlers when DOM is fully loaded
document.addEventListener('DOMContentLoaded', function() {
const pauseBtn = document.getElementById('pauseExampleDownloadBtn');
const collapseBtn = document.getElementById('collapseProgressBtn');
// Make window.exampleImagesManager globally available
if (window.exampleImagesManager === undefined && typeof exampleImagesManager !== 'undefined') {
window.exampleImagesManager = exampleImagesManager;
}
if (pauseBtn && window.exampleImagesManager) {
pauseBtn.onclick = () => window.exampleImagesManager.pauseDownload();
}
if (collapseBtn && window.exampleImagesManager) {
collapseBtn.onclick = () => {
if (window.exampleImagesManager.toggleProgressPanel) {
window.exampleImagesManager.toggleProgressPanel();
}
};
}
});
</script>