142 lines
4.2 KiB
Markdown
142 lines
4.2 KiB
Markdown
# Button Text Display Fix Summary
|
|
|
|
## Problem Solved ✅
|
|
The 1-row high buttons were the correct height, but the text content wasn't showing due to padding and alignment issues.
|
|
|
|
## Root Cause
|
|
When buttons were reduced from 3 rows to 1 row:
|
|
- **Default padding** was preventing text from fitting in the reduced space
|
|
- **Content alignment** wasn't optimized for 1-row display
|
|
- **Label length** was too long for compact buttons
|
|
- **Minimum width** was too large for efficient space usage
|
|
|
|
## Solution Applied
|
|
|
|
### 1. Removed Button Padding
|
|
**Before:**
|
|
```css
|
|
#filter-bar Button {
|
|
height: 1;
|
|
/* Default padding took up space */
|
|
}
|
|
```
|
|
|
|
**After:**
|
|
```css
|
|
#filter-bar Button {
|
|
height: 1;
|
|
padding: 0; /* Remove padding to fit text in 1 row */
|
|
text-align: center; /* Center text in button */
|
|
line-height: 1; /* Ensure text fits in 1 row */
|
|
}
|
|
```
|
|
|
|
### 2. Compact Label Format
|
|
**Before:**
|
|
- Labels like: `"2. CH10-Data (1105)"` (20+ characters)
|
|
- Spaces between elements
|
|
- Full frame type names
|
|
|
|
**After:**
|
|
- Labels like: `"2.CH10(1105)"` (12 characters)
|
|
- No spaces for compactness
|
|
- Abbreviated frame type names
|
|
|
|
### 3. Frame Type Abbreviations
|
|
Implemented smart abbreviations to fit in 1-row buttons:
|
|
|
|
| Full Name | Abbreviation | Button Label Example |
|
|
|-----------|--------------|---------------------|
|
|
| CH10-Data | CH10 | `2.CH10(1105)` |
|
|
| PTP-Signaling | PTP-S | `3.PTP-S(240)` |
|
|
| PTP-FollowUp | PTP-F | `4.PTP-F(56)` |
|
|
| PTP-Sync | PTP | `5.PTP(89)` |
|
|
| UDP | UDP | `6.UDP(443)` |
|
|
| TMATS | TMATS | `7.TMATS(15)` |
|
|
| CH10-Multi-Source | Multi | `8.Multi(8)` |
|
|
|
|
### 4. Reduced Button Width
|
|
**Before:** `min-width: 12;` (for longer labels)
|
|
**After:** `min-width: 10;` (for compact labels)
|
|
|
|
### 5. Optimized Text Rendering
|
|
**Before:**
|
|
```css
|
|
content-align: center middle; /* Didn't work well for 1-row */
|
|
```
|
|
|
|
**After:**
|
|
```css
|
|
text-align: center; /* Better for 1-row text */
|
|
line-height: 1; /* Ensures text fits exactly */
|
|
```
|
|
|
|
## Visual Result
|
|
|
|
### Before Fix (text not visible):
|
|
```
|
|
[ ][ ][ ]
|
|
```
|
|
|
|
### After Fix (text visible):
|
|
```
|
|
[1.Overview] [2.CH10(1105)] [3.UDP(443)] [4.PTP-S(240)]
|
|
```
|
|
|
|
## Test Results ✅
|
|
|
|
```
|
|
✅ Button height set to 1 row
|
|
✅ Button padding removed
|
|
✅ Text centered in button
|
|
✅ Minimum width reduced for compact labels
|
|
✅ Overview button uses compact format: '1.Overview'
|
|
✅ Frame type abbreviations working correctly
|
|
✅ Text now visible in TUI: " 1.Overview " displayed on line 12
|
|
```
|
|
|
|
## Benefits Achieved
|
|
|
|
1. **Visible Text** - Buttons now display their labels properly
|
|
2. **Compact Design** - Maximum information in minimum space
|
|
3. **Better UX** - Users can see what each button does
|
|
4. **Consistent Layout** - All buttons follow same compact format
|
|
5. **More Screen Space** - 1-row buttons free up 2 additional rows for data
|
|
|
|
## Technical Implementation
|
|
|
|
### Files Modified
|
|
- `filtered_flow_view.py`: Updated CSS and button label generation
|
|
|
|
### Key Changes
|
|
- **FrameTypeButton class**: Added `_shorten_frame_type()` method
|
|
- **CSS updates**: Removed padding, added text alignment, reduced width
|
|
- **Label format**: Changed from `"2. CH10-Data (1105)"` to `"2.CH10(1105)"`
|
|
- **Overview button**: Changed from `"1. Overview"` to `"1.Overview"`
|
|
|
|
### Backward Compatibility ✅
|
|
- All keyboard shortcuts still work (1-9,0 for filtering)
|
|
- Same functionality, just more compact display
|
|
- Button click behavior unchanged
|
|
- Frame type detection unchanged
|
|
|
|
## Usage
|
|
|
|
The buttons now display clearly in a single row:
|
|
- **1.Overview** - Shows all flows across all frame types
|
|
- **2.CH10(1105)** - Shows flows with CH10-Data frames (1105 total packets)
|
|
- **3.UDP(443)** - Shows flows with UDP frames (443 total packets)
|
|
- **4.PTP-S(240)** - Shows flows with PTP-Signaling frames (240 total packets)
|
|
|
|
Users can immediately see:
|
|
- **Hotkey number** (1, 2, 3, etc.)
|
|
- **Frame type** (abbreviated for space)
|
|
- **Total packet count** in parentheses
|
|
- **Button order** by packet count (highest first)
|
|
|
|
## Performance Impact
|
|
- **No performance change** - Same data processing
|
|
- **Slightly faster rendering** - Less text to render per button
|
|
- **Better space efficiency** - More data visible on screen
|
|
|
|
The button text display issue is now completely resolved! 🎯 |