Merge pull request #244 from United600/fix-ui

style: minor ui changes
huynhsontung · Dec 17, 2023 · 1c624fb · 1c624fb
2 parents 8c940b6 + df8cd99
commit 1c624fb
Show file tree

Hide file tree

Showing 14 changed files with 61 additions and 33 deletions.
diff --git a/Screenbox/App.xaml b/Screenbox/App.xaml
@@ -15,13 +15,13 @@
 
                     <!--  Media content background and foreground  -->
                     <ResourceDictionary.ThemeDictionaries>
-                        <ResourceDictionary x:Key="Dark">
-                            <SolidColorBrush x:Key="AccentListViewItemBackgroundBrush" Color="#08FFFFFF" />
+                        <ResourceDictionary x:Key="Default">
+                            <StaticResource x:Key="AccentListViewItemBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
                             <StaticResource x:Key="ThumbnailMediaIconForeground" ResourceKey="SystemControlForegroundBaseMediumHighBrush" />
                             <StaticResource x:Key="AccentFillColorDefault" ResourceKey="SystemAccentColorLight2" />
                         </ResourceDictionary>
                         <ResourceDictionary x:Key="Light">
-                            <SolidColorBrush x:Key="AccentListViewItemBackgroundBrush" Color="White" />
+                            <StaticResource x:Key="AccentListViewItemBackgroundBrush" ResourceKey="CardBackgroundFillColorDefaultBrush" />
                             <StaticResource x:Key="ThumbnailMediaIconForeground" ResourceKey="SystemControlForegroundBaseMediumBrush" />
                             <StaticResource x:Key="AccentFillColorDefault" ResourceKey="SystemAccentColorDark1" />
                         </ResourceDictionary>
@@ -83,6 +83,8 @@
 
                     <!--  Inline HyperlinkButton margin  -->
                     <Thickness x:Key="HyperlinkButtonInlineMargin">-12,0,0,0</Thickness>
+                    <!--  HyperlinkButton with caption text style padding to maintain the same height  -->
+                    <Thickness x:Key="HyperlinkButtonCaptionPadding">11,7,11,7</Thickness>
 
                     <!--  Subtitle margin  -->
                     <Thickness x:Key="SubtitleTextMargin">0,0,0,12</Thickness>

diff --git a/Screenbox/Controls/AudioTrackSubtitlePicker.xaml b/Screenbox/Controls/AudioTrackSubtitlePicker.xaml
@@ -23,7 +23,7 @@
                     <TextBlock
                         Margin="16,0,0,0"
                         VerticalAlignment="Center"
-                        Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                         Style="{StaticResource CaptionTextBlockStyle}"
                         Text="{strings:Resources Key=Audio}" />
                 </Border>
@@ -47,29 +47,37 @@
                     <TextBlock
                         Margin="16,0,0,0"
                         VerticalAlignment="Center"
-                        Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
+                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                         Style="{StaticResource CaptionTextBlockStyle}"
                         Text="{strings:Resources Key=Subtitles}" />
                     <HyperlinkButton
                         Grid.Column="1"
-                        Command="{x:Bind ShowSubtitleOptionsCommand}"
-                        Content="{strings:Resources Key=Options}" />
+                        Margin="0,0,4,0"
+                        Padding="{StaticResource HyperlinkButtonCaptionPadding}"
+                        Command="{x:Bind ShowSubtitleOptionsCommand}">
+                        <TextBlock Style="{StaticResource CaptionTextBlockStyle}" Text="{strings:Resources Key=Options}" />
+                    </HyperlinkButton>
                 </Grid>
             </ListView.Header>
             <ListView.Footer>
                 <!--  Imitate the look of ListViewItem  -->
                 <Button
                     Height="36"
-                    Margin="3,2"
-                    Padding="13,0,13,0"
+                    Margin="4,2"
+                    Padding="12,0"
                     HorizontalAlignment="Stretch"
                     HorizontalContentAlignment="Stretch"
-                    Background="{ThemeResource ListViewItemBackground}"
                     BorderBrush="{x:Null}"
                     BorderThickness="0"
                     Command="{x:Bind ViewModel.AddSubtitleCommand}"
-                    Content="{strings:Resources Key=AddSubtitle}"
-                    Foreground="{ThemeResource ListViewItemForeground}" />
+                    Content="{strings:Resources Key=AddSubtitle}">
+                    <Button.Resources>
+                        <StaticResource x:Key="ButtonBackground" ResourceKey="ListViewItemBackground" />
+                        <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="ListViewItemBackgroundPointerOver" />
+                        <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="ListViewItemBackgroundPressed" />
+                        <StaticResource x:Key="ButtonForegroundPressed" ResourceKey="ListViewItemForegroundPressed" />
+                    </Button.Resources>
+                </Button>
             </ListView.Footer>
         </ListView>
     </StackPanel>

diff --git a/Screenbox/Controls/MediaListViewItem.xaml b/Screenbox/Controls/MediaListViewItem.xaml
@@ -4,14 +4,14 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:animations="using:Screenbox.Controls.Animations"
     xmlns:converters="using:Screenbox.Converters"
-    xmlns:converters1="using:CommunityToolkit.WinUI.Converters"
     xmlns:core="using:Microsoft.Xaml.Interactions.Core"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:interactions="using:Screenbox.Controls.Interactions"
     xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     xmlns:strings="using:Screenbox.Strings"
+    xmlns:toolkitConverters="using:CommunityToolkit.WinUI.Converters"
     xmlns:viewModels="using:Screenbox.Core.ViewModels"
     d:DataContext="{d:DesignInstance Type=viewModels:MediaViewModel}"
     d:DesignHeight="300"
@@ -22,7 +22,7 @@
     <UserControl.Resources>
         <converters:DefaultStringConverter x:Key="GenreTextConverter" Default="{strings:Resources Key=UnknownGenre}" />
         <converters:PlayPauseGlyphConverter x:Key="PlayPauseGlyphConverter" />
-        <converters1:BoolToObjectConverter
+        <toolkitConverters:BoolToObjectConverter
             x:Key="BoolToPlayPauseTextConverter"
             FalseValue="{strings:Resources Key=Play}"
             TrueValue="{strings:Resources Key=Pause}" />
@@ -114,32 +114,32 @@
             x:Name="ArtistButton"
             Grid.Column="3"
             Margin="4,0"
+            Padding="{StaticResource HyperlinkButtonCaptionPadding}"
             VerticalAlignment="Center"
             CommandParameter="{Binding MainArtist, FallbackValue={x:Null}}"
-            Foreground="{ThemeResource DefaultTextForegroundThemeBrush}"
+            Foreground="{ThemeResource TextFillColorPrimaryBrush}"
             Visibility="Collapsed">
             <TextBlock
                 x:Name="ArtistText"
                 MaxLines="1"
                 Style="{StaticResource CaptionTextBlockStyle}"
-                Text="{Binding MainArtist.Name, FallbackValue=''}"
-                TextTrimming="CharacterEllipsis" />
+                Text="{Binding MainArtist.Name, FallbackValue=''}" />
         </HyperlinkButton>
 
         <HyperlinkButton
             x:Name="AlbumButton"
             Grid.Column="4"
             Margin="4,0"
+            Padding="{StaticResource HyperlinkButtonCaptionPadding}"
             VerticalAlignment="Center"
             CommandParameter="{Binding Album}"
-            Foreground="{ThemeResource DefaultTextForegroundThemeBrush}"
+            Foreground="{ThemeResource TextFillColorPrimaryBrush}"
             Visibility="Collapsed">
             <TextBlock
                 x:Name="AlbumText"
                 MaxLines="1"
                 Style="{StaticResource CaptionTextBlockStyle}"
-                Text="{Binding Album.Name, FallbackValue=''}"
-                TextTrimming="CharacterEllipsis" />
+                Text="{Binding Album.Name, FallbackValue=''}" />
         </HyperlinkButton>
 
         <TextBlock

diff --git a/Screenbox/Controls/PlayerControls.xaml b/Screenbox/Controls/PlayerControls.xaml
@@ -4,13 +4,13 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:commands="using:Screenbox.Commands"
     xmlns:converters="using:Screenbox.Converters"
-    xmlns:converters1="using:CommunityToolkit.WinUI.Converters"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:helpers="using:Screenbox.Core.Helpers"
     xmlns:local="using:Screenbox.Controls"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     xmlns:strings="using:Screenbox.Strings"
+    xmlns:toolkitConverters="using:CommunityToolkit.WinUI.Converters"
     xmlns:ui="using:CommunityToolkit.WinUI"
     d:DesignHeight="300"
     d:DesignWidth="400"
@@ -50,12 +50,12 @@
 
             <converters:PlayPauseGlyphConverter x:Key="PlayPauseGlyphConverter" />
             <converters:ToggleButtonCheckToRepeatModeConverter x:Key="ToggleButtonCheckToRepeatModeConverter" />
-            <converters1:BoolToObjectConverter
+            <toolkitConverters:BoolToObjectConverter
                 x:Key="BoolToPlayPauseTextConverter"
                 FalseValue="{strings:Resources Key=Play}"
                 TrueValue="{strings:Resources Key=Pause}" />
 
-            <converters1:BoolToObjectConverter
+            <toolkitConverters:BoolToObjectConverter
                 x:Key="ShuffleModeGlyphConverter"
                 FalseValue="E"
                 TrueValue="F" />

diff --git a/Screenbox/Controls/Templates/AlbumGridViewItem.xaml b/Screenbox/Controls/Templates/AlbumGridViewItem.xaml
@@ -83,7 +83,7 @@
                 <TextBlock
                     Grid.Row="2"
                     Padding="4,0"
-                    Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
+                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                     Style="{StaticResource CaptionTextBlockStyle}"
                     Text="{Binding Artist}" />
 

diff --git a/Screenbox/Controls/Templates/VideoGridViewItem.xaml b/Screenbox/Controls/Templates/VideoGridViewItem.xaml
@@ -83,7 +83,7 @@
                 <TextBlock
                     Grid.Row="2"
                     Padding="4,0"
-                    Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
+                    Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                     Style="{StaticResource CaptionTextBlockStyle}"
                     Text="{Binding Caption, Mode=OneWay}" />
 

diff --git a/Screenbox/Pages/AlbumsPage.xaml b/Screenbox/Pages/AlbumsPage.xaml
@@ -89,7 +89,6 @@
             <SemanticZoom.ZoomedOutView>
                 <GridView
                     x:Name="GroupOverview"
-                    MaxWidth="400"
                     Margin="{x:Bind Common.FooterBottomPaddingMargin, Mode=OneWay}"
                     Padding="{StaticResource PageContentMargin}"
                     HorizontalAlignment="Center"
@@ -101,6 +100,11 @@
                         <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="Transparent" />
                         <SolidColorBrush x:Key="ButtonBorderBrushDisabled" Color="Transparent" />
                     </GridView.Resources>
+                    <GridView.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <ItemsWrapGrid MaximumRowsOrColumns="8" Orientation="Horizontal" />
+                        </ItemsPanelTemplate>
+                    </GridView.ItemsPanel>
                 </GridView>
             </SemanticZoom.ZoomedOutView>
         </SemanticZoom>

diff --git a/Screenbox/Pages/ArtistsPage.xaml b/Screenbox/Pages/ArtistsPage.xaml
@@ -89,7 +89,6 @@
             <SemanticZoom.ZoomedOutView>
                 <GridView
                     x:Name="GroupOverview"
-                    MaxWidth="400"
                     Margin="{x:Bind Common.FooterBottomPaddingMargin, Mode=OneWay}"
                     Padding="{StaticResource PageContentMargin}"
                     HorizontalAlignment="Center"
@@ -101,6 +100,11 @@
                         <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="Transparent" />
                         <SolidColorBrush x:Key="ButtonBorderBrushDisabled" Color="Transparent" />
                     </GridView.Resources>
+                    <GridView.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <ItemsWrapGrid MaximumRowsOrColumns="8" Orientation="Horizontal" />
+                        </ItemsPanelTemplate>
+                    </GridView.ItemsPanel>
                 </GridView>
             </SemanticZoom.ZoomedOutView>
         </SemanticZoom>

diff --git a/Screenbox/Pages/FolderViewPage.xaml b/Screenbox/Pages/FolderViewPage.xaml
@@ -102,7 +102,7 @@
                         Grid.Row="2"
                         Padding="4,0"
                         x:Phase="2"
-                        Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
+                        Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                         Style="{StaticResource CaptionTextBlockStyle}"
                         Text="{x:Bind local:FolderViewPage.GetCaptionText(IsFile, CaptionText, ItemCount), Mode=OneWay}" />
                 </Grid>

diff --git a/Screenbox/Pages/HomePage.xaml b/Screenbox/Pages/HomePage.xaml
@@ -160,7 +160,7 @@
                             Grid.Row="2"
                             Padding="4,0"
                             x:Phase="2"
-                            Foreground="{StaticResource SystemControlForegroundBaseMediumBrush}"
+                            Foreground="{ThemeResource TextFillColorTertiaryBrush}"
                             Style="{StaticResource CaptionTextBlockStyle}"
                             Text="{x:Bind Media.Caption, Mode=OneWay}" />
 

diff --git a/Screenbox/Pages/MusicPage.xaml b/Screenbox/Pages/MusicPage.xaml
@@ -107,6 +107,8 @@
                 <Thickness x:Key="TopNavigationViewContentGridBorderThickness">0,0,0,0</Thickness>
                 <!--  Top NavigationView side margins  -->
                 <Thickness x:Key="TopNavigationViewTopNavGridMargin">0,0</Thickness>
+                <!--  Minimum space between Top NavigationView items and footer pane  -->
+                <x:Double x:Key="TopNavigationViewPaneCustomContentMinWidth">0</x:Double>
             </muxc:NavigationView.Resources>
             <muxc:NavigationView.PaneHeader>
                 <TextBlock

diff --git a/Screenbox/Pages/PlayerPage.xaml b/Screenbox/Pages/PlayerPage.xaml
@@ -5,7 +5,6 @@
     xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
     xmlns:animations="using:CommunityToolkit.WinUI.Animations"
     xmlns:controls="using:Screenbox.Controls"
-    xmlns:converters="using:CommunityToolkit.WinUI.Converters"
     xmlns:core="using:Microsoft.Xaml.Interactions.Core"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
     xmlns:extensions="using:Screenbox.Controls.Extensions"
@@ -16,6 +15,7 @@
     xmlns:pages="using:Screenbox.Pages"
     xmlns:strings="using:Screenbox.Strings"
     xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
+    xmlns:toolkitConverters="using:CommunityToolkit.WinUI.Converters"
     xmlns:ui="using:CommunityToolkit.WinUI"
     extensions:ApplicationViewExtensions.Title="{x:Bind ViewModel.Media.Name, Mode=OneWay, FallbackValue={}}"
     AllowDrop="True"
@@ -47,7 +47,7 @@
                 </ResourceDictionary>
             </ResourceDictionary.ThemeDictionaries>
 
-            <converters:BoolToObjectConverter
+            <toolkitConverters:BoolToObjectConverter
                 x:Key="FilledPlayPauseGlyphConverter"
                 FalseValue="D"
                 TrueValue="C" />
@@ -233,7 +233,8 @@
                 <TextBlock
                     x:Name="TitleText"
                     FontSize="20"
-                    FontWeight="SemiBold"
+                    MaxLines="1"
+                    Style="{StaticResource SubtitleTextBlockStyle}"
                     Text="{x:Bind ViewModel.Media.Name, Mode=OneWay, FallbackValue={}}"
                     TextTrimming="CharacterEllipsis" />
 
@@ -246,6 +247,7 @@
 
                 <TextBlock
                     x:Name="SubtitleText"
+                    OpticalMarginAlignment="TrimSideBearings"
                     Text="{x:Bind ViewModel.Media.AltCaption, Mode=OneWay, FallbackValue={}}"
                     TextTrimming="CharacterEllipsis"
                     Visibility="{x:Bind ViewModel.Media.AltCaption, Mode=OneWay, Converter={StaticResource StringVisibilityConverter}, FallbackValue=Collapsed}" />

diff --git a/Screenbox/Pages/SongsPage.xaml b/Screenbox/Pages/SongsPage.xaml
@@ -117,7 +117,6 @@
             <SemanticZoom.ZoomedOutView>
                 <GridView
                     x:Name="GroupOverview"
-                    MaxWidth="400"
                     Margin="{x:Bind Common.FooterBottomPaddingMargin, Mode=OneWay}"
                     Padding="{StaticResource PageContentMargin}"
                     HorizontalAlignment="Center"
@@ -129,6 +128,11 @@
                         <SolidColorBrush x:Key="ButtonBackgroundDisabled" Color="Transparent" />
                         <SolidColorBrush x:Key="ButtonBorderBrushDisabled" Color="Transparent" />
                     </GridView.Resources>
+                    <GridView.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <ItemsWrapGrid MaximumRowsOrColumns="8" Orientation="Horizontal" />
+                        </ItemsPanelTemplate>
+                    </GridView.ItemsPanel>
                 </GridView>
             </SemanticZoom.ZoomedOutView>
         </SemanticZoom>

diff --git a/Screenbox/Pages/VideosPage.xaml b/Screenbox/Pages/VideosPage.xaml
@@ -115,6 +115,8 @@
                 <Thickness x:Key="TopNavigationViewContentGridBorderThickness">0,0,0,0</Thickness>
                 <!--  Top NavigationView side margins  -->
                 <Thickness x:Key="TopNavigationViewTopNavGridMargin">0,0</Thickness>
+                <!--  Minimum space between Top NavigationView items and footer pane  -->
+                <x:Double x:Key="TopNavigationViewPaneCustomContentMinWidth">0</x:Double>
             </muxc:NavigationView.Resources>
             <muxc:NavigationView.PaneHeader>
                 <TextBlock