[Peek]Fix icons, removed unneeded RTL code, ui tweaks and code suggestions (#32087)

* Force file pickers to open modal

* remove unneeded RTL code

* better icons and analyzer suggestions

* additions for preview controls

* more code improvs

* two nits in strings

* Adressing feedback

icon margin, drive usage bar, TitleBarHeightOption

src/modules/peek/Peek.FilePreviewer/Controls/ArchiveControl.xaml

@@ -17,7 +17,7 @@
                 AutomationProperties.Name="{x:Bind Name}"
                 IsExpanded="{x:Bind IsExpanded}"
                 ItemsSource="{x:Bind Children}">
-                <Grid ColumnSpacing="10">
+                <Grid ColumnSpacing="8">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="auto" />
                         <ColumnDefinition Width="auto" />
@@ -34,7 +34,7 @@
 
         <DataTemplate x:Key="FileTemplate" x:DataType="models:ArchiveItem">
             <TreeViewItem AutomationProperties.Name="{x:Bind Name}">
-                <Grid ColumnSpacing="10">
+                <Grid ColumnSpacing="8">
                     <Grid.ColumnDefinitions>
                         <ColumnDefinition Width="auto" />
                         <ColumnDefinition Width="auto" />
@@ -77,7 +77,6 @@
         </ScrollViewer>
         <Border
             Grid.Row="1"
-            MinWidth="300"
             Margin="16"
             HorizontalAlignment="Center"
             Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
@@ -100,7 +99,7 @@
                     TextWrapping="Wrap" />
                 <Border
                     Grid.Column="1"
-                    BorderBrush="{ThemeResource TextFillColorPrimaryBrush}"
+                    BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                     BorderThickness="0,0,1,0" />
                 <TextBlock
                     Grid.Column="2"
@@ -110,7 +109,7 @@
                     TextWrapping="Wrap" />
                 <Border
                     Grid.Column="3"
-                    BorderBrush="{ThemeResource TextFillColorPrimaryBrush}"
+                    BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
                     BorderThickness="0,0,1,0" />
                 <TextBlock
                     Grid.Column="4"

src/modules/peek/Peek.FilePreviewer/Controls/AudioControl.xaml

@@ -10,15 +10,12 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     xmlns:tkconverters="using:CommunityToolkit.WinUI.Converters"
     mc:Ignorable="d">
-
     <UserControl.Resources>
         <tkconverters:StringVisibilityConverter x:Key="StringVisibilityConverter" />
     </UserControl.Resources>
 
     <Grid
-        MaxWidth="800"
-        Margin="16"
-        HorizontalAlignment="Center"
+        Margin="24"
         VerticalAlignment="Center"
         ColumnSpacing="24"
         RowSpacing="24">
@@ -34,7 +31,6 @@
         <Border
             Grid.Row="0"
             Grid.Column="0"
-            Margin="24,0,0,0"
             HorizontalAlignment="Right"
             BorderBrush="{ThemeResource SurfaceStrokeColorDefaultBrush}"
             BorderThickness="1"
@@ -45,14 +41,12 @@
         <StackPanel
             Grid.Row="0"
             Grid.Column="1"
-            Margin="0,0,24,0"
             HorizontalAlignment="Left"
             VerticalAlignment="Center"
-            Spacing="5">
+            Spacing="4">
             <TextBlock
-                FontSize="26"
-                FontWeight="SemiBold"
                 MaxLines="3"
+                Style="{StaticResource TitleTextBlockStyle}"
                 Text="{x:Bind Source.Title, Mode=OneWay}"
                 TextTrimming="CharacterEllipsis"
                 TextWrapping="Wrap">
@@ -87,7 +81,6 @@
             x:Name="PlayerElement"
             Grid.Row="1"
             Grid.ColumnSpan="2"
-            VerticalAlignment="Top"
             AreTransportControlsEnabled="True"
             AutoPlay="True"
             Source="{x:Bind Source.MediaSource, Mode=OneWay}">
@@ -96,8 +89,7 @@
             </MediaPlayerElement.KeyboardAccelerators>
             <MediaPlayerElement.TransportControls>
                 <MediaTransportControls
-                    MaxWidth="900"
-                    Margin="0"
+                    MaxWidth="800"
                     IsCompact="True"
                     IsZoomButtonVisible="False" />
             </MediaPlayerElement.TransportControls>

src/modules/peek/Peek.FilePreviewer/Controls/DriveControl.xaml

@@ -12,11 +12,11 @@
     mc:Ignorable="d">
 
     <Grid
-        MaxWidth="1000"
-        Margin="48"
+        MaxWidth="800"
+        Margin="24"
         VerticalAlignment="Center"
-        ColumnSpacing="16"
-        RowSpacing="16">
+        ColumnSpacing="24"
+        RowSpacing="24">
         <Grid.RowDefinitions>
             <RowDefinition Height="auto" />
             <RowDefinition Height="auto" />
@@ -30,20 +30,14 @@
             Grid.Column="0"
             Width="180"
             Height="180"
-            HorizontalAlignment="Right"
-            VerticalAlignment="Bottom"
             Source="{x:Bind Source.IconPreview, Mode=OneWay}" />
         <StackPanel
             Grid.Row="0"
             Grid.Column="1"
             HorizontalAlignment="Left"
             VerticalAlignment="Center"
-            Spacing="5">
-            <TextBlock
-                FontSize="26"
-                FontWeight="SemiBold"
-                Text="{x:Bind Source.Name, Mode=OneWay}"
-                TextTrimming="CharacterEllipsis">
+            Spacing="4">
+            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="{x:Bind Source.Name, Mode=OneWay}">
                 <ToolTipService.ToolTip>
                     <ToolTip Content="{x:Bind Source.Name, Mode=OneWay}" />
                 </ToolTipService.ToolTip>
@@ -68,29 +62,25 @@
         <Grid
             Grid.Row="1"
             Grid.ColumnSpan="2"
-            RowSpacing="5">
+            RowSpacing="4">
             <Grid.RowDefinitions>
                 <RowDefinition Height="auto" />
                 <RowDefinition Height="auto" />
             </Grid.RowDefinitions>
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="auto" />
-                <ColumnDefinition Width="*" />
-            </Grid.ColumnDefinitions>
             <Border
                 x:Name="CapacityBar"
                 Grid.Row="0"
                 Grid.ColumnSpan="2"
-                Height="20"
-                Background="{ThemeResource AccentFillColorDisabledBrush}"
-                CornerRadius="10" />
+                Height="16"
+                Background="{ThemeResource SurfaceStrokeColorDefaultBrush}"
+                CornerRadius="8" />
 
             <Border
                 Grid.Row="0"
                 Grid.ColumnSpan="2"
-                Height="20"
+                Height="16"
                 Background="{ThemeResource AccentFillColorDefaultBrush}"
-                CornerRadius="10">
+                CornerRadius="8">
                 <Border.Clip>
                     <RectangleGeometry Rect="{x:Bind SpaceBarClip, Mode=OneWay}" />
                 </Border.Clip>
@@ -99,15 +89,12 @@
             <TextBlock
                 Grid.Row="1"
                 Grid.Column="0"
-                HorizontalAlignment="Left"
-                VerticalAlignment="Top"
                 Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                 Text="{x:Bind FormatUsedSpace(Source.UsedSpace), Mode=OneWay}" />
             <TextBlock
                 Grid.Row="1"
                 Grid.Column="1"
                 HorizontalAlignment="Right"
-                VerticalAlignment="Top"
                 Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                 Text="{x:Bind FormatFreeSpace(Source.FreeSpace), Mode=OneWay}" />
         </Grid>

src/modules/peek/Peek.FilePreviewer/Controls/DriveControl.xaml.cs

@@ -70,7 +70,7 @@ namespace Peek.FilePreviewer.Controls
             if (Source != null && Source.PercentageUsage > 0)
             {
                 var usedWidth = CapacityBar.ActualWidth * Source!.PercentageUsage;
-                SpaceBarClip = new(0, 0, usedWidth, 20);
+                SpaceBarClip = new(0, 0, usedWidth, 16);
             }
             else
             {

src/modules/peek/Peek.FilePreviewer/Controls/UnsupportedFilePreview/FailedFallbackPreviewControl.xaml

@@ -9,7 +9,7 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid>
+    <Grid ColumnSpacing="24" RowSpacing="24">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto" />
             <RowDefinition Height="Auto" />
@@ -18,19 +18,17 @@
 
         <IconSourceElement
             Grid.Row="0"
-            Margin="3"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             Foreground="{StaticResource TextFillColorSecondaryBrush}">
             <IconSourceElement.IconSource>
-                <FontIconSource FontSize="135" Glyph="&#xE783;" />
+                <FontIconSource FontSize="128" Glyph="&#xE783;" />
             </IconSourceElement.IconSource>
         </IconSourceElement>
 
         <TextBlock
             x:Uid="FailedFallbackTextBlock"
             Grid.Row="1"
-            Margin="3"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             Foreground="{StaticResource TextFillColorSecondaryBrush}"
@@ -39,7 +37,6 @@
         <HyperlinkButton
             x:Uid="FailedFallbackReportBugHyperlinkButton"
             Grid.Row="2"
-            Margin="3"
             HorizontalAlignment="Center"
             VerticalAlignment="Center"
             NavigateUri="https://aka.ms/powerToysReportBug" />

src/modules/peek/Peek.FilePreviewer/Controls/UnsupportedFilePreview/InformationalPreviewControl.xaml

@@ -9,7 +9,7 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d">
 
-    <Grid>
+    <Grid ColumnSpacing="24">
         <Grid.ColumnDefinitions>
             <ColumnDefinition x:Name="Icon" Width="Auto" />
             <ColumnDefinition x:Name="FileInfo" Width="*" />
@@ -20,19 +20,19 @@
             Grid.Column="0"
             Width="180"
             Height="180"
-            Margin="0,24,24,24"
             Source="{x:Bind Source.IconPreview, Mode=OneWay}" />
 
         <StackPanel
             Grid.Column="1"
             VerticalAlignment="Center"
-            Spacing="5">
+            Spacing="4">
 
             <TextBlock
-                FontSize="26"
-                FontWeight="SemiBold"
+                MaxLines="3"
+                Style="{StaticResource TitleTextBlockStyle}"
                 Text="{x:Bind Source.FileName, Mode=OneWay}"
-                TextTrimming="CharacterEllipsis">
+                TextTrimming="CharacterEllipsis"
+                TextWrapping="Wrap">
                 <ToolTipService.ToolTip>
                     <ToolTip Content="{x:Bind Source.FileName, Mode=OneWay}" />
                 </ToolTipService.ToolTip>

src/modules/peek/Peek.FilePreviewer/Controls/UnsupportedFilePreview/UnsupportedFilePreview.xaml

@@ -13,7 +13,7 @@
     mc:Ignorable="d">
 
     <Grid
-        Margin="48"
+        Margin="24"
         HorizontalAlignment="Stretch"
         VerticalAlignment="Center">
 

src/modules/peek/Peek.FilePreviewer/FilePreview.xaml

@@ -37,6 +37,7 @@
             x:Name="VideoPreview"
             AreTransportControlsEnabled="True"
             AutoPlay="True"
+            FlowDirection="LeftToRight"
             Source="{x:Bind VideoPreviewer.Preview, Mode=OneWay}"
             ToolTipService.ToolTip="{x:Bind InfoTooltip, Mode=OneWay}"
             Visibility="{x:Bind IsPreviewVisible(VideoPreviewer, Previewer.State), Mode=OneWay}">
@@ -47,7 +48,7 @@
                 <MediaTransportControls
                     x:Name="mediaTransport"
                     Width="auto"
-                    MaxWidth="420"
+                    MaxWidth="800"
                     IsCompact="True" />
             </MediaPlayerElement.TransportControls>
         </MediaPlayerElement>
@@ -62,6 +63,7 @@
             x:Name="BrowserPreview"
             x:Load="True"
             DOMContentLoaded="BrowserPreview_DOMContentLoaded"
+            FlowDirection="LeftToRight"
             IsDevFilePreview="{x:Bind BrowserPreviewer.IsDevFilePreview, Mode=OneWay}"
             NavigationCompleted="PreviewBrowser_NavigationCompleted"
             Source="{x:Bind BrowserPreviewer.Preview, Mode=OneWay}"

src/modules/peek/Peek.FilePreviewer/FilePreview.xaml.cs

@@ -162,15 +162,6 @@ namespace Peek.FilePreviewer
                 DrivePreview.Visibility = Visibility.Collapsed;
                 UnsupportedFilePreview.Visibility = Visibility.Collapsed;
 
-                ImagePreview.FlowDirection = FlowDirection.LeftToRight;
-                VideoPreview.FlowDirection = FlowDirection.LeftToRight;
-
-                AudioPreview.FlowDirection = FlowDirection.LeftToRight;
-                BrowserPreview.FlowDirection = FlowDirection.LeftToRight;
-                ArchivePreview.FlowDirection = FlowDirection.LeftToRight;
-                DrivePreview.FlowDirection = FlowDirection.LeftToRight;
-                UnsupportedFilePreview.FlowDirection = FlowDirection.LeftToRight;
-
                 return;
             }
 
@@ -231,7 +222,6 @@ namespace Peek.FilePreviewer
             VideoPreview.MediaPlayer.Pause();
             VideoPreview.MediaPlayer.Source = null;
             VideoPreview.Source = null;
-
             AudioPreview.Source = null;
             ImagePreview.Source = null;
             ArchivePreview.Source = null;