gramps
2273d20160
The creator asked why the Stream Alerts "Display" drop-down was not in the same
style as the other drop-downs. It was never given the theme's YtComboBox style -
only a hand-painted Background/Foreground. Setting colours changes the paint, not
the template, so WPF still drew the light system ComboBox (grey border, system
arrow, white popup list) on top of the dark panel. The chat Font drop-down was a
copy of the same mistake, and every check box was the light system one.
The sweep of the whole properties panel (then the app):
- ComboBox x2 (chat Font, alert Display) -> YtComboBox, hand-painted colours gone
- TextBox x16 in the properties panel -> YtTextBoxCompact (new, BasedOn YtTextBox:
11px / padding 4,2 - the panel is dense, the full 13px box would double it)
- CheckBox x2 (chat) + x3 (preview broadcast) + x1 (socials dialog) -> YtCheckBox
(new: a 14x14 rounded box + tick path, accent fill when checked)
- the layer-rename field -> YtTextBoxCompact via BasedOn, still borderless
- buttons, pills, sliders: already themed, untouched
The sweep also killed a typo'd foreground (#e0d0e0 for #e0e0e0) and the only
remaining hand-painted colour is the deliberate dimming of the two read-only path
fields.
Guard: ytLive.Tests/PropertiesStyleTests.cs (the ONE Good Dog test) parses the app
XAML and fails if an unstyled drop-down, check box or properties field comes back.
431/431 green, 0 warnings.
46 lines
2.6 KiB
Markdown
46 lines
2.6 KiB
Markdown
# TASK 58 — Properties-panel style consistency (the theme owns the look)
|
||
|
||
**Status:** ✅ Done — shipped 2026-10-21.
|
||
|
||
## What it is
|
||
The creator asked (2026-10-21), pointing at the Live scene → Stream Alerts layer →
|
||
Properties → **Display**:
|
||
|
||
> why is the drop-down box not in the same style as the others? Can you run through the
|
||
> existing elements in properties to ensure that we're maintaining a consistent style?
|
||
|
||
## Why the drop-down looked alien
|
||
`Controls/LeftPanel.xaml` gave the drop-down a hand-painted `Background`/`Foreground`/
|
||
`FontSize` instead of the theme's `YtComboBox` style. Setting colours does **not** change a
|
||
control's template — WPF still drew the **light system ComboBox** (grey border, system
|
||
arrow, white popup list) on top of the dark panel. The code even said so: the alert
|
||
drop-down's comment says it was built "same shape as the chat Font selector above" — and the
|
||
chat Font drop-down was unstyled too, so the inconsistency was copied.
|
||
|
||
## The sweep (the whole properties panel, then the app)
|
||
| Control | Before | After |
|
||
|---|---|---|
|
||
| ComboBox ×2 (chat Font, alert Display) | hand-painted colours → light system template | `YtComboBox` (the same style as the bottom-bar/zoom drop-downs) |
|
||
| TextBox ×16 in the properties panel | hand-painted colours, no template, no focus/hover, one typo'd foreground `#e0d0e0` | `YtTextBoxCompact` (BasedOn `YtTextBox`: 11px, padding 4,2) |
|
||
| CheckBox ×2 (chat) | default light system check box | `YtCheckBox` (new dark style) |
|
||
| CheckBox ×3 (preview broadcast panel) + ×1 (Socials dialog) | default light system check box | `YtCheckBox` |
|
||
| TextBox (layer rename) | hand-painted colours | `YtTextBoxCompact` via `BasedOn`, borderless as before |
|
||
| Buttons, pills, sliders | already themed | unchanged |
|
||
|
||
New theme styles (`Themes/Controls.xaml`):
|
||
- `YtTextBoxCompact` — `BasedOn YtTextBox`, 11px + `Padding 4,2` + `MinHeight 22`. The
|
||
properties panel is dense (11px labels); the full `YtTextBox` (13px, 8,6) would have
|
||
doubled the panel's height.
|
||
- `YtCheckBox` — a 14×14 rounded box + tick path, accent fill when checked, hover/focus
|
||
border triggers. The default WPF check box is the light system one.
|
||
|
||
## The guard
|
||
`ytLive.Tests/PropertiesStyleTests.cs` — the ONE test for this change:
|
||
1. the theme defines `YtComboBox`/`YtCheckBox`/`YtTextBox`/`YtTextBoxCompact`;
|
||
2. every `ComboBox` and `CheckBox` in the app's XAML carries the matching theme style;
|
||
3. every field in the properties panel (`StackPanel x:Name="ElementsPanel"`) carries
|
||
`YtTextBoxCompact` and sets no `Background`/`BorderBrush` of its own.
|
||
|
||
## Tests
|
||
`ytLive.Tests/PropertiesStyleTests.cs` — 431/431 green at ship time.
|