Button Highlighting Update

✅ Active Button Highlighting Implemented

Added proper visual feedback to show which frame type filter is currently selected.

🎨 Visual Appearance

Active Button (Selected)

Background: Blue (#0080ff) - same as the original tab highlighting
Text: Bold white text
Class: -active CSS class applied

Inactive Buttons

Background: Dark gray (#262626)
Text: Gray text (#999999)
Hover: Lighter blue background on mouse over

Button Layout

[1. Overview]  [2. CH10-Data(1105)]  [3. UDP(443)]  [4. PTP-Signaling(240)]
    ↑ Active      ↑ Inactive          ↑ Inactive      ↑ Inactive

🔧 Implementation Details

Highlighting Logic

Initial State: Overview button starts highlighted (blue background)
Button Click: Clicked button becomes active, others become inactive
Keyboard Navigation: Number key selection updates highlighting
Dynamic Updates: Highlighting preserved when buttons are refreshed

Key Methods Added

_update_button_highlighting() - Updates active/inactive state for all buttons
Called after button selection, frame type refresh, and initial mount
Uses CSS -active class for consistent styling

CSS Classes

#filter-bar Button.-active {
    background: #0080ff;
    text-style: bold;
}

#filter-bar Button {
    background: transparent;
    color: #999999;
}

#filter-bar Button:hover {
    background: #0080ff;
}

⌨️ User Experience

Visual Feedback

Clear indication of which filter is currently active
Consistent styling with the rest of the StreamLens interface
Immediate feedback when switching between filters

Interaction Flow

Start: Overview button highlighted in blue
Press 2: CH10-Data button becomes blue, Overview becomes gray
Press 3: UDP button becomes blue, CH10-Data becomes gray
etc.

Expected Behavior

Active button is clearly highlighted in blue with bold text
Only one button highlighted at a time
Highlighting updates immediately on selection
Consistent with original tab-style highlighting you mentioned

🎯 Result

The button bar now provides clear visual feedback showing which frame type filter is currently selected, matching the highlighting style you referenced from the original tab interface.

The interface should now feel complete with proper active button indication!

2.4 KiB Raw Permalink Blame History