alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-08-24 14:31:26 -03:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): right-anchor license icons and delete button as one group in model modal

Browse Source
This commit is contained in:
Will Miao
2026-08-24 11:39:17 +08:00
parent a7214b6cff
commit 40f922b0e8
2 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/components/lora-modal/lora-modal.css
+18 -6
View File
@@ -68,9 +68,9 @@
font-size: 14px; font-size: 14px;
} }
/* Destructive modal action: ghost icon button pushed to the far right of the /* Destructive modal action: ghost icon button right-anchored by its own auto
header actions row, revealing the danger color only on hover/focus. Shared margin, revealing the danger color only on hover/focus. Shared by the model
by the model modal and the recipe modal. */ modal and the recipe modal. */
.modal-delete-btn { .modal-delete-btn {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@@ -98,9 +98,21 @@
font-size: 14px; font-size: 14px;
} }
/* License icons no longer carry their own auto margin: the delete button's /* When license icons directly precede the delete button, they carry the auto
margin-left: auto right-anchors the [delete][license] cluster, keeping the margin instead, so the [license][delete] cluster stays right-anchored as
icons flush against the right edge as before the delete button existed. */ one group with the delete button flush at the right edge and no split gap. */
.modal-header-actions .license-restrictions {
margin-left: auto;
}
.modal-header-actions .license-permissions {
margin-left: auto;
}
.modal-header-actions .license-restrictions + .modal-delete-btn,
.modal-header-actions .license-permissions + .modal-delete-btn {
margin-left: 0;
}
.license-restrictions { .license-restrictions {
display: flex; display: flex;
static/js/components/shared/ModelModal.js
+5 -7
View File
@@ -442,10 +442,12 @@ export async function showModelModal(model, modelType) {
if (creatorActionsMarkup) { if (creatorActionsMarkup) {
headerActionItems.push(creatorActionsMarkup); headerActionItems.push(creatorActionsMarkup);
} }
if (licenseIcons) {
headerActionItems.push(indentMarkup(licenseIcons.trim(), 20));
}
// Destructive action docks immediately left of the license icons so the // Destructive action stays last (rightmost). The license icons' auto
// icons keep their original rightmost position; the delete button's // margin right-anchors the [license][delete] cluster as one group.
// auto margin right-anchors the whole cluster.
const deleteModelTitle = translate('modals.model.actions.deleteModelWithShortcut', {}, 'Delete model (Del)'); const deleteModelTitle = translate('modals.model.actions.deleteModelWithShortcut', {}, 'Delete model (Del)');
const deleteModelButton = ` const deleteModelButton = `
<button class="modal-delete-btn" data-action="delete-model" title="${deleteModelTitle}" aria-label="${deleteModelTitle}"> <button class="modal-delete-btn" data-action="delete-model" title="${deleteModelTitle}" aria-label="${deleteModelTitle}">
@@ -454,10 +456,6 @@ export async function showModelModal(model, modelType) {
`.trim(); `.trim();
headerActionItems.push(indentMarkup(deleteModelButton, 20)); headerActionItems.push(indentMarkup(deleteModelButton, 20));
if (licenseIcons) {
headerActionItems.push(indentMarkup(licenseIcons.trim(), 20));
}
const headerActionsMarkup = headerActionItems.length const headerActionsMarkup = headerActionItems.length
? [ ? [
' <div class="modal-header-actions">', ' <div class="modal-header-actions">',