Repository navigation
ui(settings): QueryaSwitch, a nicer toggle for Preferences in the kit's style #1488
Copy link
Copy link
Open
Labels
P3Low priority / Polish & EnhancementsLow priority / Polish & EnhancementsenhancementNew feature or requestNew feature or requestfrontendTheme parser epic label: frontendTheme parser epic label: frontenduiUser interface components and widgetsUser interface components and widgetsuxUser experience, keyboard shortcuts and interactionsUser experience, keyboard shortcuts and interactions
Description
Problem
The switches in Preferences (auto-update check, animate theme changes, confirm DML staging, and the other settings rows) are Material Switches with a theme that was never designed for the kit:
- the knob is a large black circle on the cyan track in the dark theme, and an almost invisible track when off; the off state reads as disabled;
- the size does not follow the control scale (
sm28 /md32 /lg36) and sits slightly off the label baseline; - no keyboard focus ring in the kit's style, a ripple from Material instead of the standard hover / pressed states;
- the toggle animates with Material's timing, not
QueryaMotion, and ignores Motion Off; - it is the last Material control in the settings next to
QueryaButton,QueryaDropdownandQueryaSearchField, and part of leavingshadcn_flutter/ Material look (epic(ui): remove shadcn_flutter from the app #1465, step 4:Switch,Checkbox,Card).
Scope
- A kit widget
QueryaSwitchinlib/shared/widgets/, built on Flutter primitives: track and knob fromcontext.workbench(accent on,borderSubtle/ muted off,onAccentknob), a track height tied toQueryaControlSize, hover, pressed, disabled and keyboard-only focus ring as inQueryaButton. - Motion from
QueryaMotion(instant under Motion Off and reduced OS motion). - Semantics:
toggled, label, enabled; Space / Enter toggle; the whole settings row stays clickable (PreferencesSwitchRow). - Use it in
PreferencesSwitchRowand the otherSwitchcall sites (mongo_aggregation_workspace.dart), remove the Material path. - Same for the checkbox rows in a follow-up if it fits (
PreferencesCheckboxRow). - Tests: states and colours in dark and light themes, toggling by pointer and keyboard, semantics, one height next to a
QueryaButtonof the same size; add it to the UI kit gallery (dev(ui): UI kit gallery: every control, variant, size and state in every theme #1336) and todocs/ui-kit.md.
Acceptance
- On and off are clearly different in the dark and the light theme and in imported VS Code themes; disabled is distinct from off.
- The switch is the height of its control size and centred on its label.
- Keyboard focus shows the kit's ring; a mouse click does not.
- No
material.Switchinlib/; a guard keeps it that way.
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
P3Low priority / Polish & EnhancementsLow priority / Polish & EnhancementsenhancementNew feature or requestNew feature or requestfrontendTheme parser epic label: frontendTheme parser epic label: frontenduiUser interface components and widgetsUser interface components and widgetsuxUser experience, keyboard shortcuts and interactionsUser experience, keyboard shortcuts and interactions
Activity