Skip to content

Refactor slice selection toolbar with toggle groups#94

Open
patrickoleary wants to merge 1 commit intomasterfrom
refactor/slice-selection-toolbar
Open

Refactor slice selection toolbar with toggle groups#94
patrickoleary wants to merge 1 commit intomasterfrom
refactor/slice-selection-toolbar

Conversation

@patrickoleary
Copy link
Copy Markdown
Member

@patrickoleary patrickoleary commented May 5, 2026

The previous slice selection toolbar displayed all variable sliders simultaneously, consuming significant vertical space and requiring complex multi-row height calculations. This made the UI cluttered, especially with many slice dimensions.

Screenshot 2026-05-05 at 10 03 15 AM

Before: All sliders visible at once, multi-row layout with pre-computed heights (70px × rows), large vertical footprint.

Redesigned the slice selection toolbar so each variable is presented as a compact toggle group:

Screenshot 2026-05-05 at 12 18 42 PM

After: Each variable shows a labeled toggle button with a summary label. Clicking the button expands inline editing controls (textfield + slider) for that variable only. Groups wrap naturally via flexbox when horizontal space is limited.

Screenshot 2026-05-05 at 12 19 13 PM

Changes

  • Toggle button displays the track name with outlined/flat variant states
  • Collapsed state shows bold index (t_idx) and italic value+units
  • Expanded state reveals a number textfield and slider, hides the index label
  • Group containers have a darker border outline and light background when active
  • Simplified _on_toolbar_change — removed multi-row height calculation in favor of a fixed size since only one variable expands at a time

- Each variable is now a UI group with a toggle button showing the track name
- When toggled, reveals editable textfield and slider controls
- Groups wrap to new rows with flex-wrap when space is limited
- Value label shows bold (t_idx) when collapsed, italic value+units always
- Simplified top_padding calculation (no multi-row pre-computation needed)
- Use default density for components, darker group outline, larger slider
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants