feat(ui): improve update controls styling and error handling

- Add disabled and loading states for control group buttons with appropriate cursor and opacity styling
- Enhance dropdown toggle active state styling for update filter group
- Improve dropdown toggle layout with flex centering
- Add disabled state styling for dropdown items
- Refactor model update check to use shared helper function, removing redundant success handling and simplifying error flow
- Maintain existing functionality while improving user experience and code maintainability
This commit is contained in:
Will Miao
2025-10-29 14:38:11 +08:00
parent 315ab6f70b
commit e10717dcda
16 changed files with 344 additions and 74 deletions

View File

@@ -104,6 +104,19 @@
opacity: 1;
}
.control-group button:disabled {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
.control-group button.loading,
.dropdown-toggle.loading {
cursor: wait;
opacity: 0.7;
pointer-events: none;
}
/* Controls */
.control-group button.favorite-filter,
.control-group button.update-filter {
@@ -135,6 +148,16 @@
color: white;
}
.update-filter-group .dropdown-main.update-filter.active + .dropdown-toggle {
background: var(--lora-accent);
border-color: var(--lora-accent);
color: white;
}
.update-filter-group .dropdown-main.update-filter.active + .dropdown-toggle i {
color: inherit;
}
/* Active state for buttons that can be toggled */
.control-group button.active {
background: var(--lora-accent);
@@ -322,6 +345,9 @@
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-menu {
@@ -354,6 +380,12 @@
transition: background-color 0.2s ease;
}
.dropdown-item.disabled {
cursor: default;
opacity: 0.6;
pointer-events: none;
}
.dropdown-item:hover {
background-color: oklch(var(--lora-accent) / 0.1);
}