From 6dc2811af4e2fc63b99eebaa73e48984ad9e9be7 Mon Sep 17 00:00:00 2001 From: Will Miao <13051207myq@gmail.com> Date: Fri, 5 Sep 2025 17:36:54 +0800 Subject: [PATCH] feat(bulk-modal): refactor bulk base model modal for improved UI and functionality, fixes 352 --- static/css/components/bulk.css | 64 ++++++------------- static/js/managers/BulkManager.js | 6 +- static/js/managers/ModalManager.js | 13 ++++ .../modals/bulk_base_model_modal.html | 41 +++++++----- 4 files changed, 60 insertions(+), 64 deletions(-) diff --git a/static/css/components/bulk.css b/static/css/components/bulk.css index 24fcced3..d7373537 100644 --- a/static/css/components/bulk.css +++ b/static/css/components/bulk.css @@ -48,60 +48,34 @@ -ms-user-select: none; } -/* Bulk base model modal styles */ -.bulk-base-model-container { - padding: 20px 0; -} - -.bulk-base-model-info { - margin-bottom: 20px; - padding: 15px; - background: var(--lora-surface, #f8f9fa); - border-radius: 8px; - border-left: 4px solid var(--lora-accent, #007bff); -} - -.bulk-base-model-info p { - margin: 0; - color: var(--lora-text-secondary, #6c757d); -} - -.bulk-base-model-selection { - margin-bottom: 25px; -} - -.bulk-base-model-selection label { - display: block; - margin-bottom: 8px; - font-weight: 500; - color: var(--lora-text, #212529); -} +/* Remove bulk base model modal specific styles - now using shared components */ +/* Use shared metadata editing styles instead */ +/* Override for bulk base model select to ensure proper width */ .bulk-base-model-select { width: 100%; - padding: 10px 12px; - border: 1px solid var(--lora-border, #dee2e6); - border-radius: 6px; - background: var(--lora-background, #ffffff); - color: var(--lora-text, #212529); - font-size: 14px; - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + max-width: 100%; + padding: 6px 10px; + border-radius: var(--border-radius-xs); + border: 1px solid var(--border-color); + background-color: var(--lora-surface); + color: var(--text-color); + font-size: 0.95em; + height: 32px; } .bulk-base-model-select:focus { + border-color: var(--lora-accent); outline: none; - border-color: var(--lora-accent, #007bff); - box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } -.bulk-base-model-controls { - display: flex; - gap: 12px; - justify-content: flex-end; - padding-top: 20px; - border-top: 1px solid var(--lora-border, #dee2e6); +/* Dark theme support for bulk base model select */ +[data-theme="dark"] .bulk-base-model-select { + background-color: rgba(30, 30, 30, 0.9); + color: var(--text-color); } -.bulk-save-base-model-btn { - min-width: 120px; +[data-theme="dark"] .bulk-base-model-select option { + background-color: #2d2d2d; + color: var(--text-color); } \ No newline at end of file diff --git a/static/js/managers/BulkManager.js b/static/js/managers/BulkManager.js index 015e2247..c2e6155f 100644 --- a/static/js/managers/BulkManager.js +++ b/static/js/managers/BulkManager.js @@ -6,6 +6,7 @@ import { getModelApiClient } from '../api/modelApiFactory.js'; import { MODEL_TYPES, MODEL_CONFIG } from '../api/apiConfig.js'; import { PRESET_TAGS, BASE_MODEL_CATEGORIES } from '../utils/constants.js'; import { eventManager } from '../utils/EventManager.js'; +import { translate } from '../utils/i18nHelpers.js'; export class BulkManager { constructor() { @@ -918,8 +919,7 @@ export class BulkManager { let errorCount = 0; const errors = []; - // Show initial progress toast - showToast('toast.models.bulkBaseModelUpdating', { count: selectedCount }, 'info'); + state.loadingManager.showSimpleLoading(translate('toast.models.bulkBaseModelUpdating')); for (const filepath of state.selectedModels) { try { @@ -947,6 +947,8 @@ export class BulkManager { } catch (error) { console.error('Error during bulk base model operation:', error); showToast('toast.models.bulkBaseModelUpdateFailed', {}, 'error'); + } finally { + state.loadingManager.hideSimpleLoading(); } } diff --git a/static/js/managers/ModalManager.js b/static/js/managers/ModalManager.js index 8313c226..cd198000 100644 --- a/static/js/managers/ModalManager.js +++ b/static/js/managers/ModalManager.js @@ -247,6 +247,19 @@ export class ModalManager { }); } + // Register bulkBaseModelModal + const bulkBaseModelModal = document.getElementById('bulkBaseModelModal'); + if (bulkBaseModelModal) { + this.registerModal('bulkBaseModelModal', { + element: bulkBaseModelModal, + onClose: () => { + this.getModal('bulkBaseModelModal').element.style.display = 'none'; + document.body.classList.remove('modal-open'); + }, + closeOnOutsideClick: true + }); + } + document.addEventListener('keydown', this.boundHandleEscape); this.initialized = true; } diff --git a/templates/components/modals/bulk_base_model_modal.html b/templates/components/modals/bulk_base_model_modal.html index 3e705910..1395b93b 100644 --- a/templates/components/modals/bulk_base_model_modal.html +++ b/templates/components/modals/bulk_base_model_modal.html @@ -1,29 +1,36 @@