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

feat(bulk-modal): refactor bulk base model modal for improved UI and functionality, fixes 352

Browse Source
This commit is contained in:
Will Miao
2025-09-05 17:36:54 +08:00
parent e6425dce32
commit 6dc2811af4
4 changed files with 60 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
static/css/components/bulk.css
View File

@@ -48,60 +48,34 @@
-ms-user-select: none; -ms-user-select: none;
} }
/* Bulk base model modal styles */ /* Remove bulk base model modal specific styles - now using shared components */
.bulk-base-model-container { /* Use shared metadata editing styles instead */
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);
}
/* Override for bulk base model select to ensure proper width */
.bulk-base-model-select { .bulk-base-model-select {
width: 100%; width: 100%;
padding: 10px 12px; max-width: 100%;
border: 1px solid var(--lora-border, #dee2e6); padding: 6px 10px;
border-radius: 6px; border-radius: var(--border-radius-xs);
background: var(--lora-background, #ffffff); border: 1px solid var(--border-color);
color: var(--lora-text, #212529); background-color: var(--lora-surface);
font-size: 14px; color: var(--text-color);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; font-size: 0.95em;
height: 32px;
} }
.bulk-base-model-select:focus { .bulk-base-model-select:focus {
border-color: var(--lora-accent);
outline: none; 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 { /* Dark theme support for bulk base model select */
display: flex; [data-theme="dark"] .bulk-base-model-select {
gap: 12px; background-color: rgba(30, 30, 30, 0.9);
justify-content: flex-end; color: var(--text-color);
padding-top: 20px;
border-top: 1px solid var(--lora-border, #dee2e6);
} }
.bulk-save-base-model-btn { [data-theme="dark"] .bulk-base-model-select option {
min-width: 120px; background-color: #2d2d2d;
color: var(--text-color);
} }

6
static/js/managers/BulkManager.js
View File

@@ -6,6 +6,7 @@ import { getModelApiClient } from '../api/modelApiFactory.js';
import { MODEL_TYPES, MODEL_CONFIG } from '../api/apiConfig.js'; import { MODEL_TYPES, MODEL_CONFIG } from '../api/apiConfig.js';
import { PRESET_TAGS, BASE_MODEL_CATEGORIES } from '../utils/constants.js'; import { PRESET_TAGS, BASE_MODEL_CATEGORIES } from '../utils/constants.js';
import { eventManager } from '../utils/EventManager.js'; import { eventManager } from '../utils/EventManager.js';
import { translate } from '../utils/i18nHelpers.js';
export class BulkManager { export class BulkManager {
constructor() { constructor() {
@@ -918,8 +919,7 @@ export class BulkManager {
let errorCount = 0; let errorCount = 0;
const errors = []; const errors = [];
// Show initial progress toast state.loadingManager.showSimpleLoading(translate('toast.models.bulkBaseModelUpdating'));
showToast('toast.models.bulkBaseModelUpdating', { count: selectedCount }, 'info');
for (const filepath of state.selectedModels) { for (const filepath of state.selectedModels) {
try { try {
@@ -947,6 +947,8 @@ export class BulkManager {
} catch (error) { } catch (error) {
console.error('Error during bulk base model operation:', error); console.error('Error during bulk base model operation:', error);
showToast('toast.models.bulkBaseModelUpdateFailed', {}, 'error'); showToast('toast.models.bulkBaseModelUpdateFailed', {}, 'error');
} finally {
state.loadingManager.hideSimpleLoading();
} }
} }

13
static/js/managers/ModalManager.js
View File

@@ -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); document.addEventListener('keydown', this.boundHandleEscape);
this.initialized = true; this.initialized = true;
} }

41
templates/components/modals/bulk_base_model_modal.html
View File

@@ -1,29 +1,36 @@
<div id="bulkBaseModelModal" class="modal" style="display: none;"> <div id="bulkBaseModelModal" class="modal" style="display: none;">
<div class="modal-content modal-content-large"> <div class="modal-content modal-content">
<div class="modal-header"> <div class="modal-header">
<h2>{{ t('modals.bulkBaseModel.title') }}</h2> <h2>{{ t('modals.bulkBaseModel.title') }}</h2>
<span class="close" onclick="modalManager.closeModal('bulkBaseModelModal')">&times;</span> <span class="close" onclick="modalManager.closeModal('bulkBaseModelModal')">&times;</span>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="bulk-base-model-info"> <div class="bulk-add-tags-info">
<p>{{ t('modals.bulkBaseModel.description') }} <span id="bulkBaseModelCount">0</span> {{ t('modals.bulkBaseModel.models') }}</p> <p>{{ t('modals.bulkBaseModel.description') }} <span id="bulkBaseModelCount">0</span> {{ t('modals.bulkBaseModel.models') }}</p>
</div> </div>
<div class="bulk-base-model-container"> <div class="model-tags-container bulk-tags-container edit-mode">
<div class="bulk-base-model-selection"> <div class="metadata-edit-container" style="display: block;">
<label for="bulkBaseModelSelect">{{ t('modals.bulkBaseModel.selectBaseModel') }}</label> <div class="metadata-edit-content">
<select id="bulkBaseModelSelect" class="bulk-base-model-select"> <div class="metadata-edit-header">
<!-- Options will be populated dynamically --> <label>{{ t('modals.bulkBaseModel.selectBaseModel') }}</label>
</select> </div>
</div> <div class="setting-control">
<div class="select-control">
<div class="bulk-base-model-controls"> <select id="bulkBaseModelSelect" class="bulk-base-model-select">
<button class="btn btn-primary bulk-save-base-model-btn" onclick="bulkManager.saveBulkBaseModel()"> <!-- Options will be populated dynamically -->
<i class="fas fa-save"></i> {{ t('modals.bulkBaseModel.save') }} </select>
</button> </div>
<button class="btn btn-secondary" onclick="modalManager.closeModal('bulkBaseModelModal')"> </div>
{{ t('modals.bulkBaseModel.cancel') }} <div class="metadata-edit-controls">
</button> <button class="metadata-save-btn bulk-save-base-model-btn" onclick="bulkManager.saveBulkBaseModel()">
<i class="fas fa-save"></i> {{ t('modals.bulkBaseModel.save') }}
</button>
<button class="btn btn-secondary" onclick="modalManager.closeModal('bulkBaseModelModal')">
{{ t('modals.bulkBaseModel.cancel') }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>