gramps/LlamaCasty
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(ui): the creator's six corrections

Browse Source 
1. Stream Info + YPP rails are YouTube surfaces → new `youtube` token #ff0000. It is documented
   as brand-only: live state stays `primary`, so the two reds never mean the same thing.
2. EDIT toggle: the checked trigger set the SAME colour as the resting face, so clicking it
   changed nothing visible. Resting is now the neutral surface with muted text; armed is blue with
   dark text, and the label follows the fill.
3. Active scene outline is orange again (`attention`) — it marks the scene you work on, not a
   selection; blue made it read as "selected". Live stays red.
4. Scene names wear the same pill as the hotkey chips (black, 10px radius, 8×2 padding), so both
   labels stay readable over any thumbnail.
5. REC / ON-AIR pills and the running stop button read red while armed/live — including test
   mode, where the top bar is gold. New `RecordPillToggle` style (its own template, because
   SegmentToggle hard-codes a transparent face); the stop button's grey `#333` literal is gone.
6. The properties list had `MaxHeight="420"` inside an Auto row, so it scrolled while the window
   had space left. The row is `*` now and the cap is gone.

Guard: UiShellTests pins all six to the markup and names the one that regresses.
This commit is contained in:
gramps
2026-10-30 10:27:11 -07:00
parent df0118ac52
commit 4841c27514
8 changed files with 122 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Controls/LeftPanel.xaml
+2 -2
View File
@@ -49,7 +49,7 @@
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- LAYERS header + Add button -->
@@ -300,7 +300,7 @@
<TextBlock Grid.Row="6" Text="Select an item to edit its properties" Foreground="{StaticResource Brush.OnSurfaceVariant}" FontSize="12"
Margin="8,4,0,0" TextWrapping="Wrap"
Visibility="{Binding SelectedElement, Converter={StaticResource NullToVis}}"/>
<ScrollViewer x:Name="ElementsScrollViewer" Grid.Row="6" MaxHeight="420" VerticalScrollBarVisibility="Auto" Background="Transparent"
<ScrollViewer x:Name="ElementsScrollViewer" Grid.Row="6" VerticalScrollBarVisibility="Auto" Background="Transparent"
Visibility="{Binding SelectedElement, Converter={StaticResource NotNullToVis}}">
<StackPanel x:Name="ElementsPanel" Margin="8,4,0,0">
<!-- Opacity + mirror/shape (draggable elements: image, webcam) -->
Controls/PreviewPane.xaml
+2 -2
View File
@@ -878,7 +878,7 @@
</Border>
<!-- The stacked white tabs -->
<StackPanel Orientation="Vertical" HorizontalAlignment="Right" VerticalAlignment="Stretch">
<Border Width="30" VerticalAlignment="Center" Background="{StaticResource Brush.Attention}"
<Border Width="30" VerticalAlignment="Center" Background="{StaticResource Brush.Youtube}"
CornerRadius="4,0,0,4" Padding="0,10" Cursor="Hand" Margin="0,4,0,0"
ToolTip="Broadcast text fields">
<Border.InputBindings>
@@ -899,7 +899,7 @@
</TextBlock>
</StackPanel>
</Border>
<Border Width="30" VerticalAlignment="Center" Background="{StaticResource Brush.Attention}"
<Border Width="30" VerticalAlignment="Center" Background="{StaticResource Brush.Youtube}"
CornerRadius="4,0,0,4" Padding="0,10" Cursor="Hand" Margin="0,4,0,0"
ToolTip="YouTube Partner Program progress">
<Border.InputBindings>
Controls/SceneThumbnailStrip.xaml
+12 -8
View File
@@ -18,8 +18,12 @@
<Style TargetType="Border">
<Setter Property="BorderBrush" Value="{StaticResource Brush.Outline}"/>
<Style.Triggers>
<!-- Active scene = orange (creator ruling 2026-10-30): it marks
the stage you are working on, not a selection — blue is
the interactive accent and read as "selected". Live
stays red. -->
<DataTrigger Binding="{Binding IsStaged}" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource Brush.Tertiary}"/>
<Setter Property="BorderBrush" Value="{StaticResource Brush.Attention}"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsLive}" Value="True">
<Setter Property="BorderBrush" Value="{StaticResource Brush.Primary}"/>
@@ -67,13 +71,13 @@
<TextBlock Text="{Binding HotkeyLabel, Mode=OneWay}" Foreground="White" FontSize="16" FontWeight="SemiBold"/>
</Border>
<TextBlock Text="{Binding Name, Mode=OneWay}" Foreground="White" FontSize="16" FontWeight="SemiBold"
HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="6"
TextTrimming="CharacterEllipsis">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="4" ShadowDepth="0" Opacity="0.9"/>
</TextBlock.Effect>
</TextBlock>
<!-- The scene name wears the same pill as the hotkey chip, so both
labels stay readable over any thumbnail. -->
<Border HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="6"
Padding="8,2" CornerRadius="10" Background="#000000">
<TextBlock Text="{Binding Name, Mode=OneWay}" Foreground="White" FontSize="15" FontWeight="SemiBold"
TextTrimming="CharacterEllipsis"/>
</Border>
</Grid>
</Border>
</DataTemplate>
Controls/TopBar.xaml
+16 -8
View File
@@ -54,18 +54,21 @@
reality line + End so nothing mid-session can be re-armed. -->
<StackPanel Grid.Column="1" Orientation="Horizontal"
HorizontalAlignment="Center" VerticalAlignment="Center">
<!-- EDIT: explicit toggle. Blue = off (chat), orange = on (layers/properties). -->
<!-- EDIT: explicit toggle. Neutral = off (chat), blue = on (layers/properties). The
trigger used to set the SAME colour as the resting state, so the button never
looked pressed. -->
<ToggleButton IsChecked="{Binding EditingActive, Mode=TwoWay}" Content="EDIT"
Cursor="Hand" Height="32" Padding="14,0" Margin="0,0,24,0" VerticalAlignment="Center"
FontWeight="Bold" FontSize="12" Foreground="{StaticResource Brush.OnTertiary}" BorderThickness="0">
FontWeight="Bold" FontSize="12" Foreground="{StaticResource Brush.OnSurfaceVariant}" BorderThickness="0">
<ToggleButton.Template>
<ControlTemplate TargetType="ToggleButton">
<Border x:Name="EditBody" Background="{StaticResource Brush.Tertiary}" CornerRadius="4" Padding="{TemplateBinding Padding}">
<Border x:Name="EditBody" Background="{StaticResource Brush.SurfaceContainerHigh}" CornerRadius="4" Padding="{TemplateBinding Padding}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="EditBody" Property="Background" Value="{StaticResource Brush.Tertiary}"/>
<Setter Property="Foreground" Value="{StaticResource Brush.OnTertiary}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
@@ -78,13 +81,17 @@
Visibility="{Binding ShowIdleWorld, Converter={StaticResource BoolToVis}}">
<Border Background="{StaticResource Brush.SurfaceContainerLowest}" CornerRadius="4" Padding="2" Height="32" VerticalAlignment="Center">
<StackPanel Orientation="Horizontal">
<ToggleButton Style="{StaticResource SegmentToggle}"
<ToggleButton Style="{StaticResource RecordPillToggle}"
IsChecked="{Binding RecordPillOn}">
<TextBlock Text="REC" Style="{StaticResource SegmentLabel}"/>
<!-- the label follows the pill's own foreground: muted when armed-off,
dark on red when armed (SegmentLabel pins its own colour) -->
<TextBlock Text="REC" FontSize="12" FontWeight="Bold" VerticalAlignment="Center"
Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ToggleButton}}"/>
</ToggleButton>
<ToggleButton Style="{StaticResource SegmentToggle}"
<ToggleButton Style="{StaticResource RecordPillToggle}"
IsChecked="{Binding OnAirPillOn}">
<TextBlock Text="ON-AIR" Style="{StaticResource SegmentLabel}"/>
<TextBlock Text="ON-AIR" FontSize="12" FontWeight="Bold" VerticalAlignment="Center"
Foreground="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ToggleButton}}"/>
</ToggleButton>
</StackPanel>
</Border>
@@ -112,7 +119,8 @@
<TextBlock Text="{Binding LiveElapsedText}" Foreground="White" FontSize="14"
FontFamily="Consolas" VerticalAlignment="Center" Margin="8,0,0,0"/>
<Button Content="{Binding EndButtonText}" Style="{StaticResource YtButton}"
Background="#333" Margin="14,0,0,0" Command="{Binding EndStreamCommand}"/>
Background="{StaticResource Brush.Primary}" Margin="14,0,0,0"
Command="{Binding EndStreamCommand}"/>
</StackPanel>
</StackPanel>