feat(ui): improve filter preset delete button visibility and layout

- Hide delete button by default and show on hover for inactive presets
- Show delete button on active presets only when hovering over the preset
- Add ellipsis truncation for long preset names to prevent layout breakage
- Remove checkmark icon from active preset names for cleaner visual design
This commit is contained in:
Will Miao
2026-02-03 20:05:39 +08:00
parent 655d3cab71
commit 990a3527e4
2 changed files with 13 additions and 7 deletions

View File

@@ -512,6 +512,10 @@
.filter-preset.active .preset-delete-btn {
color: white;
opacity: 0;
}
.filter-preset:hover.active .preset-delete-btn {
opacity: 0.8;
}
@@ -529,13 +533,16 @@
align-items: center;
gap: 6px;
white-space: nowrap;
max-width: 120px; /* Prevent long names from breaking layout */
overflow: hidden;
text-overflow: ellipsis;
}
.preset-delete-btn {
background: none;
border: none;
color: var(--text-color);
opacity: 0.5;
opacity: 0; /* Hidden by default */
cursor: pointer;
padding: 4px;
display: flex;
@@ -546,6 +553,10 @@
margin-left: auto;
}
.filter-preset:hover .preset-delete-btn {
opacity: 0.5; /* Show on hover */
}
.preset-delete-btn:hover {
opacity: 1;
color: var(--lora-error, #e74c3c);

View File

@@ -751,12 +751,7 @@ export class FilterPresetManager {
const presetName = document.createElement('span');
presetName.className = 'preset-name';
if (isActive) {
presetName.innerHTML = `<i class="fas fa-check"></i> ${preset.name}`;
} else {
presetName.textContent = preset.name;
}
presetName.title = translate('header.filter.presetClickTooltip', { name: preset.name }, `Click to apply preset "${preset.name}"`);
const deleteBtn = document.createElement('button');