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:
+37
-36
@@ -291,7 +291,7 @@
|
||||
<TextBlock Text="{Binding WebcamLockAlert}" Foreground="{StaticResource Brush.OnError}" FontSize="11"
|
||||
TextWrapping="Wrap"/>
|
||||
<Button Content="Retry" Command="{Binding RetryWebcamLockCommand}"
|
||||
Style="{StaticResource YtButtonSecondary}" Padding="10,2"
|
||||
Style="{StaticResource PropertyButton}" Padding="10,2"
|
||||
HorizontalAlignment="Right" Margin="0,6,0,0"/>
|
||||
</StackPanel>
|
||||
</Border>
|
||||
@@ -333,7 +333,7 @@
|
||||
<TextBlock Text="Shape" Style="{StaticResource PropertyHeader}"/>
|
||||
<StackPanel Orientation="Horizontal" Margin="10,0,0,4">
|
||||
<Button Content="{Binding SelectedElement.MirrorButtonText}"
|
||||
Style="{StaticResource YtButtonSecondary}" Padding="10,4"
|
||||
Style="{StaticResource PropertyButton}" Padding="10,4"
|
||||
Click="MirrorButton_Click"/>
|
||||
<ToggleButton Style="{StaticResource SegmentToggle}" Padding="10,4" Margin="8,0,0,0"
|
||||
IsChecked="{Binding SelectedElement.IsRectShape, Mode=TwoWay}">
|
||||
@@ -369,8 +369,7 @@
|
||||
Value="{Binding SelectedElement.BlurAmount, Mode=TwoWay}"
|
||||
VerticalAlignment="Center"/>
|
||||
</DockPanel>
|
||||
<TextBlock Text="Strongest blur wins where they overlap — layers cannot add up."
|
||||
Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="10" TextWrapping="Wrap" Margin="10,2,0,0"/>
|
||||
<TextBlock Text="Strongest blur wins where they overlap — layers cannot add up." Style="{StaticResource PropertyHint}"/>
|
||||
</StackPanel>
|
||||
|
||||
<!-- The drag hint sits under the shape row — indented, so the
|
||||
@@ -758,45 +757,24 @@
|
||||
<!-- Stream Alerts config -->
|
||||
<StackPanel Visibility="{Binding SelectedElement.IsAlertBox, Converter={StaticResource BoolToVis}}" Margin="0,0,0,8">
|
||||
<TextBlock Text="Stream Alerts" Style="{StaticResource PropertyHeader}"/>
|
||||
<TextBlock Text="The built-in clip plays on every alert (Super Chat, membership…) unless a custom video is picked."
|
||||
Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="10" TextWrapping="Wrap" Margin="0,0,0,6"/>
|
||||
<TextBlock Text="The built-in clip plays on every alert (Super Chat, membership…) unless a custom video is picked." Style="{StaticResource PropertyHint}"/>
|
||||
|
||||
<DockPanel Margin="0,0,0,4">
|
||||
<TextBlock Text="Video" Style="{StaticResource PropertySubHeader}"/>
|
||||
<DockPanel Margin="10,0,0,4">
|
||||
<!-- Test alert (creator ruling 2026-11-01): plays the clip this box
|
||||
would play — custom if one is set, built-in otherwise. -->
|
||||
<Button DockPanel.Dock="Right" Content="▶ Test alert"
|
||||
Command="{Binding TestAlertCommand}"
|
||||
Style="{StaticResource YtButtonSecondary}"
|
||||
Style="{StaticResource PropertyButton}"
|
||||
Padding="8,2" FontSize="11" VerticalAlignment="Center"
|
||||
ToolTip="Play the alert here, exactly as a viewer would trigger it"/>
|
||||
<TextBlock DockPanel.Dock="Left" Text="Built-in video" Style="{StaticResource PropertyFieldLabel}" Width="84"/>
|
||||
<TextBlock DockPanel.Dock="Left" Text="Built-in" Style="{StaticResource PropertyFieldLabel}" Width="84"/>
|
||||
<ToggleButton Style="{StaticResource PillToggle}"
|
||||
IsChecked="{Binding SelectedElement.AlertUseDefaultVideo, Mode=TwoWay}"
|
||||
HorizontalAlignment="Left"/>
|
||||
</DockPanel>
|
||||
|
||||
<!-- Sound byte (creator ruling 2026-11-01): plays WITH the alert clip, on
|
||||
the default device, so it is audible and shows in the desktop meter.
|
||||
The video itself always plays once to completion. -->
|
||||
<TextBlock Text="Sound byte" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="11"
|
||||
FontWeight="SemiBold" Margin="0,6,0,2"/>
|
||||
<DockPanel Margin="0,0,0,2">
|
||||
<Button DockPanel.Dock="Right" Content="Browse…" Command="{Binding BrowseAlertAudioCommand}"
|
||||
CommandParameter="{Binding SelectedElement}" Style="{StaticResource YtButtonSecondary}"
|
||||
Padding="8,2" Margin="6,0,0,0" FontSize="11"/>
|
||||
<Button DockPanel.Dock="Right" Content="✕" Command="{Binding ClearAlertAudioCommand}"
|
||||
CommandParameter="{Binding SelectedElement}" Style="{StaticResource YtButtonSecondary}"
|
||||
Padding="7,2" FontSize="11" ToolTip="Remove the sound byte"
|
||||
Visibility="{Binding SelectedElement.HasAlertAudio, Converter={StaticResource BoolToVis}}"/>
|
||||
<TextBox Text="{Binding SelectedElement.AlertAudioFileDisplay, Mode=OneWay}"
|
||||
Style="{StaticResource YtTextBoxCompact}" IsReadOnly="True"
|
||||
Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
|
||||
</DockPanel>
|
||||
<CheckBox Content="Loop the sound until the video ends" Style="{StaticResource PropertyPillCheck}" Margin="0,2,0,6"
|
||||
IsChecked="{Binding SelectedElement.AlertAudioLoop, Mode=TwoWay}"
|
||||
IsEnabled="{Binding SelectedElement.HasAlertAudio}"/>
|
||||
|
||||
<Grid Margin="0,0,0,4"
|
||||
<Grid Margin="10,0,0,4"
|
||||
Visibility="{Binding SelectedElement.AlertUseDefaultVideo, Converter={StaticResource InverseBoolToVis}}">
|
||||
<Grid.ColumnDefinitions>
|
||||
<ColumnDefinition Width="*"/>
|
||||
@@ -806,16 +784,39 @@
|
||||
Style="{StaticResource YtTextBoxCompact}"
|
||||
IsReadOnly="True" Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
|
||||
<Button Grid.Column="1" Content="Browse…" Command="{Binding BrowseAlertVideoCommand}"
|
||||
CommandParameter="{Binding SelectedElement}" Style="{StaticResource YtButtonSecondary}"
|
||||
CommandParameter="{Binding SelectedElement}" Style="{StaticResource PropertyButton}"
|
||||
Margin="4,0,0,0" Padding="8,2"/>
|
||||
</Grid>
|
||||
|
||||
<Button Content="Reset to built-in" Command="{Binding ResetAlertVideoCommand}"
|
||||
CommandParameter="{Binding SelectedElement}" Style="{StaticResource YtButtonSecondary}"
|
||||
HorizontalAlignment="Left" Padding="8,2" Margin="0,0,4,0"/>
|
||||
CommandParameter="{Binding SelectedElement}" Style="{StaticResource PropertyButton}"
|
||||
HorizontalAlignment="Left" Padding="8,2" Margin="10,0,0,0"/>
|
||||
<TextBlock Text="Custom clips are referenced from disk — never stored in the layout."
|
||||
Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="10" TextWrapping="Wrap" Margin="0,4,0,6"/>
|
||||
Style="{StaticResource PropertyHint}"/>
|
||||
|
||||
<!-- Sound byte: plays WITH the clip, on the default device, so it is both
|
||||
audible and visible in the desktop meter. -->
|
||||
<Border Style="{StaticResource PropertyDivider}"/>
|
||||
<TextBlock Text="Sound byte" Style="{StaticResource PropertySubHeader}"/>
|
||||
<DockPanel Margin="10,0,0,2">
|
||||
<Button DockPanel.Dock="Right" Content="Browse…" Command="{Binding BrowseAlertAudioCommand}"
|
||||
CommandParameter="{Binding SelectedElement}" Style="{StaticResource PropertyButton}"
|
||||
Padding="8,2" Margin="6,0,0,0" FontSize="11"/>
|
||||
<Button DockPanel.Dock="Right" Content="✕" Command="{Binding ClearAlertAudioCommand}"
|
||||
CommandParameter="{Binding SelectedElement}" Style="{StaticResource PropertyButton}"
|
||||
Padding="7,2" FontSize="11" ToolTip="Remove the sound byte"
|
||||
Visibility="{Binding SelectedElement.HasAlertAudio, Converter={StaticResource BoolToVis}}"/>
|
||||
<TextBox Text="{Binding SelectedElement.AlertAudioFileDisplay, Mode=OneWay}"
|
||||
Style="{StaticResource YtTextBoxCompact}" IsReadOnly="True"
|
||||
Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
|
||||
</DockPanel>
|
||||
<CheckBox Content="Loop until the video ends" Style="{StaticResource PropertyPillCheck}" Margin="10,4,0,2"
|
||||
IsChecked="{Binding SelectedElement.AlertAudioLoop, Mode=TwoWay}"
|
||||
IsEnabled="{Binding SelectedElement.HasAlertAudio}"/>
|
||||
<TextBlock Text="The video always plays once, to completion. The sound may loop under it."
|
||||
Style="{StaticResource PropertyHint}"/>
|
||||
|
||||
<Border Style="{StaticResource PropertyDivider}"/>
|
||||
<DockPanel Margin="0,0,0,4">
|
||||
<TextBlock DockPanel.Dock="Left" Text="Message ticker" Style="{StaticResource PropertyFieldLabel}" Width="84"/>
|
||||
<ToggleButton Style="{StaticResource PillToggle}"
|
||||
@@ -868,7 +869,7 @@
|
||||
Style="{StaticResource YtTextBoxCompact}"
|
||||
IsReadOnly="True" Foreground="{StaticResource Brush.OnSurfaceVariant}" VerticalAlignment="Center"/>
|
||||
<Button Grid.Column="1" Content="Browse…" Command="{Binding BrowseBackgroundCommand}"
|
||||
Style="{StaticResource YtButtonSecondary}" Margin="4,0,0,0" Padding="8,2"/>
|
||||
Style="{StaticResource PropertyButton}" Margin="4,0,0,0" Padding="8,2"/>
|
||||
</Grid>
|
||||
<TextBlock Text="{Binding BackgroundSizeMismatchText}"
|
||||
Foreground="{StaticResource Brush.Error}" FontSize="11" TextWrapping="Wrap"
|
||||
|
||||
Reference in New Issue
Block a user