ui(properties): answer the visual review — quiet actions, real hint tone, dividers, legible disabled
Review findings from a screenshot of the Stream Alerts panel, each addressed: - "Reset to built-in" and "Browse…" were YtButton-derived (white, semi-bold, 13px), so a reset action outranked the section header. Property-panel actions now use PropertyButton: bordered, 11px, normal weight, OnSurface text. - Explanation text and field labels were the same muted blue-gray. PropertyHint is now OnSurfaceDisabled, one clear step below a label. - Groups inside a category ran together. PropertyDivider (1px OutlineVariant) separates Video, Sound byte and Message ticker. - The disabled loop switch was near-invisible. Disabled now keeps the label at OnSurfaceVariant and dims the whole control to 0.55 — readable, obviously inactive. - Switch "on" was full-strength accent, shouting about static state. The track now sits at 0.6 opacity when on, which also stops it competing with the slider's accent fill. No new palette entries: every change uses an existing token, so DESIGN.md stays the one colour source. Release 0 warnings; token and typography tests pass.
This commit is contained in:
+47
-3
@@ -177,12 +177,52 @@
|
||||
</Style>
|
||||
|
||||
<Style x:Key="PropertyHint" TargetType="TextBlock">
|
||||
<Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
|
||||
<Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceDisabled}"/>
|
||||
<Setter Property="FontSize" Value="10"/>
|
||||
<Setter Property="TextWrapping" Value="Wrap"/>
|
||||
<Setter Property="Margin" Value="10,0,0,6"/>
|
||||
</Style>
|
||||
|
||||
<!-- A property-panel action: bordered, quiet, 11px normal weight. The accent-filled YtButton
|
||||
(white semi-bold 13px) made secondary actions like "Reset to built-in" the loudest text in
|
||||
the panel, which is backwards. -->
|
||||
<Style x:Key="PropertyButton" TargetType="Button">
|
||||
<Setter Property="Background" Value="{StaticResource Brush.SurfaceContainerHigh}"/>
|
||||
<Setter Property="Foreground" Value="{StaticResource Brush.OnSurface}"/>
|
||||
<Setter Property="FontSize" Value="11"/>
|
||||
<Setter Property="FontWeight" Value="Normal"/>
|
||||
<Setter Property="Padding" Value="8,3"/>
|
||||
<Setter Property="Cursor" Value="Hand"/>
|
||||
<Setter Property="Template">
|
||||
<Setter.Value>
|
||||
<ControlTemplate TargetType="Button">
|
||||
<Border x:Name="Bd" Background="{TemplateBinding Background}"
|
||||
BorderBrush="{StaticResource Brush.Outline}" BorderThickness="1"
|
||||
CornerRadius="{StaticResource Radius.Sm}"
|
||||
Padding="{TemplateBinding Padding}">
|
||||
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
|
||||
</Border>
|
||||
<ControlTemplate.Triggers>
|
||||
<Trigger Property="IsMouseOver" Value="True">
|
||||
<Setter TargetName="Bd" Property="Background" Value="{StaticResource Brush.SurfaceContainerHighest}"/>
|
||||
</Trigger>
|
||||
<Trigger Property="IsEnabled" Value="False">
|
||||
<Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceDisabled}"/>
|
||||
<Setter TargetName="Bd" Property="Opacity" Value="0.6"/>
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
</Setter.Value>
|
||||
</Setter>
|
||||
</Style>
|
||||
|
||||
<!-- Hairline between groups inside one properties category. -->
|
||||
<Style x:Key="PropertyDivider" TargetType="Border">
|
||||
<Setter Property="Height" Value="1"/>
|
||||
<Setter Property="Background" Value="{StaticResource Brush.OutlineVariant}"/>
|
||||
<Setter Property="Margin" Value="0,10,0,8"/>
|
||||
</Style>
|
||||
|
||||
<!-- Checkboxes are pill switches (creator ruling 2026-11-01): a 14px box in a properties panel
|
||||
reads as a form, and a switch reads as a setting. IsChecked semantics are untouched, so
|
||||
every existing binding still works. -->
|
||||
@@ -216,6 +256,8 @@
|
||||
<Trigger Property="IsChecked" Value="True">
|
||||
<Setter TargetName="Track" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
|
||||
<Setter TargetName="Track" Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
|
||||
<!-- 0.6 keeps the state readable without the neon fill the review flagged. -->
|
||||
<Setter TargetName="Track" Property="Opacity" Value="0.6"/>
|
||||
<Setter TargetName="Thumb" Property="Fill" Value="{StaticResource Brush.OnAccent}"/>
|
||||
<Trigger.EnterActions>
|
||||
<BeginStoryboard>
|
||||
@@ -235,8 +277,10 @@
|
||||
</Trigger.ExitActions>
|
||||
</Trigger>
|
||||
<Trigger Property="IsEnabled" Value="False">
|
||||
<Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceDisabled}"/>
|
||||
<Setter TargetName="Track" Property="Opacity" Value="0.5"/>
|
||||
<!-- Legible-but-dim, not invisible: the label stays readable and the
|
||||
track drops back so "disabled" reads as a state, not as a bug. -->
|
||||
<Setter Property="Foreground" Value="{StaticResource Brush.OnSurfaceVariant}"/>
|
||||
<Setter Property="Opacity" Value="0.55"/>
|
||||
</Trigger>
|
||||
</ControlTemplate.Triggers>
|
||||
</ControlTemplate>
|
||||
|
||||
Reference in New Issue
Block a user