cm/cm-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 261 Wiki Activity

Fix service selection highlighting: preserve status icon colors and focus-aware display

Browse Source 
Status Icon Color Preservation:
- Preserve original status icon colors (green ● for active, red ● for failed)
- Apply selection highlighting only to service text, not status icons
- Maintain visual health indicators while showing selection state

Focus-Aware Selection Display:
- Only show selection highlighting when Services panel is focused
- Hide selection bar when user switches to System or Backup panels
- Provides clean UI when not actively managing services

Selection Visual Behavior:
- Status icon: Original color (green/red/yellow) with blue background
- Service text: Blue background with black text for clear selection indication
- Unfocused state: All services display normally without selection artifacts

This creates optimal UX where status health information is always visible
and selection highlighting only appears when relevant for user interaction.
This commit is contained in:
Christoffer Martinsson 2025-10-23 21:56:43 +02:00
parent 61287380d3
commit b8afd15417
1 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
dashboard/src/ui/widgets/services.rs
View File

@ -519,11 +519,19 @@ impl ServicesWidget {
StatusIcons::create_status_spans(*line_status, line_text)
};
// Apply selection highlighting to parent services only, preserving status colors
if is_selected && !*is_sub {
for span in spans.iter_mut() {
// Keep the original foreground color (status color) but add background highlight
span.style = span.style.bg(Theme::highlight());
// Apply selection highlighting to parent services only, preserving status icon color
// Only show selection when Services panel is focused
if is_selected && !*is_sub && is_focused {
for (i, span) in spans.iter_mut().enumerate() {
if i == 0 {
// First span is the status icon - preserve its color
span.style = span.style.bg(Theme::highlight());
} else {
// Other spans (text) get full selection highlighting
span.style = span.style
.bg(Theme::highlight())
.fg(Theme::background());
}
}
}