From dde7b0a3c06c9fae857080a748fd335c95ffbce4 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Tue, 27 Jul 2021 15:36:43 +0200
Subject: [PATCH] Updated UI fixes and remove conflicts

---
 .../SidePanel/SettingsPageControl.xaml        | 103 ++++++++++--------
 .../Views/ColorPickerPage.xaml                |   4 +-
 .../Views/ImageResizerPage.xaml               |   8 +-
 .../Views/ShellPage.xaml                      |  24 ++--
 .../Views/ShellPage.xaml.cs                   |   6 -
 5 files changed, 68 insertions(+), 77 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml
index 1c5f704d15..8433c849a5 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/SidePanel/SettingsPageControl.xaml
@@ -13,6 +13,10 @@
     </UserControl.Resources>
 
     <Grid RowSpacing="{StaticResource DefaultRowSpacing}" Margin="0">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*"/>
+        </Grid.RowDefinitions>
         <VisualStateManager.VisualStateGroups>
             <VisualStateGroup x:Name="LayoutVisualStates">
                 <VisualState x:Name="WideLayout">
@@ -29,7 +33,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="SidePanel.Margin" Value="24,0,24,0"/>
-                        <Setter Target="ModuleContentPresenter.(Grid.Row)" Value="2" />
+                        <Setter Target="ModuleContentPresenter.(Grid.Row)" Value="1" />
                         <Setter Target="ModuleContentPresenter.Margin" Value="24,0,0,0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage" />
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage" />
@@ -40,15 +44,6 @@
                 </VisualState>
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
-        <Grid.ColumnDefinitions>
-            <ColumnDefinition Width="*"/>
-            <ColumnDefinition Width="Auto"/>
-        </Grid.ColumnDefinitions>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="Auto"/>
-            <RowDefinition Height="Auto" />
-        </Grid.RowDefinitions>
 
         <TextBlock x:Name="Header"
                    Text="{x:Bind ModuleTitle}"
@@ -57,25 +52,35 @@
                    Margin="48,44,0,0"
                    VerticalAlignment="Stretch"/>
 
-        <ContentPresenter x:Name="ModuleContentPresenter"
+        <ScrollViewer Grid.Row="1">
+            <Grid RowSpacing="{StaticResource DefaultRowSpacing}" Margin="0,0,0,48">
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*"/>
+                    <ColumnDefinition Width="Auto"/>
+                </Grid.ColumnDefinitions>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto"/>
+                </Grid.RowDefinitions>
+
+
+                <ContentPresenter x:Name="ModuleContentPresenter"
                           Content="{x:Bind ModuleContent}"
                           Margin="48,12,48,0"
                           HorizontalAlignment="Left"
-                          Grid.Row="1"
                           MaxWidth="{StaticResource MaxContentWidth}"/>
 
-        <RelativePanel Grid.Column="1"
-                       Grid.Row="1"
+                <RelativePanel Grid.Column="1"
                        x:Name="SidePanel"
                        Width="{StaticResource SidePanelWidth}"
                        Margin="0,12,48,0">
 
-            <TextBlock x:Name="AboutDescription"
+                    <TextBlock x:Name="AboutDescription"
                        Text="{x:Bind ModuleDescription}"
                        Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                        TextWrapping="Wrap"/>
 
-            <HyperlinkButton x:Name="AboutImage"
+                    <HyperlinkButton x:Name="AboutImage"
                          RelativePanel.Below="AboutDescription"
                          MaxWidth="240"
                          CornerRadius="8"
@@ -83,46 +88,48 @@
                          Padding="0"
                          NavigateUri="{x:Bind ModuleImageLink}"
                          Margin="0, 12, 0, 12">
-                <Image>
-                    <Image.Source>
-                        <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
-                    </Image.Source>
-                </Image>
-            </HyperlinkButton>
+                        <Image>
+                            <Image.Source>
+                                <BitmapImage UriSource="{x:Bind ModuleImageSource}" />
+                            </Image.Source>
+                        </Image>
+                    </HyperlinkButton>
 
-            <StackPanel x:Name="LinksPanel"
+                    <StackPanel x:Name="LinksPanel"
                     Margin="0,1,0,0"
                     RelativePanel.Below="AboutImage"
                     Orientation="Vertical">
 
-                <StackPanel x:Name="ModuleLinksPanel" Orientation="Vertical">
-                    <ItemsControl ItemsSource="{x:Bind ModuleLinks}">
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate x:DataType="local:SidePanelLink">
-                                <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="-12,-3,0,0">
-                                    <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
-                                </HyperlinkButton>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </StackPanel>
+                        <StackPanel x:Name="ModuleLinksPanel" Orientation="Vertical">
+                            <ItemsControl ItemsSource="{x:Bind ModuleLinks}">
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="local:SidePanelLink">
+                                        <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="-12,-3,0,0">
+                                            <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
+                                        </HyperlinkButton>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+                        </StackPanel>
 
-                <StackPanel x:Name="AttributionPanel"
+                        <StackPanel x:Name="AttributionPanel"
                               Visibility="{x:Bind AttributionLinks.Count, Converter={StaticResource doubleToVisibilityConverter}}"
                             Orientation="Vertical">
-                    <TextBlock x:Uid="AttributionTitle" Style="{StaticResource SettingsGroupTitleStyle}" />
+                            <TextBlock x:Uid="AttributionTitle" Style="{StaticResource SettingsGroupTitleStyle}" />
 
-                    <ItemsControl x:Name="AttributionLinksItemControl" ItemsSource="{x:Bind AttributionLinks}">
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate x:DataType="local:SidePanelLink">
-                                <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="-12,-3,0,0">
-                                    <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
-                                </HyperlinkButton>
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </StackPanel>
-            </StackPanel>
-        </RelativePanel>
+                            <ItemsControl x:Name="AttributionLinksItemControl" ItemsSource="{x:Bind AttributionLinks}">
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="local:SidePanelLink">
+                                        <HyperlinkButton NavigateUri="{x:Bind Link}" Margin="-12,-3,0,0">
+                                            <TextBlock Text="{x:Bind Label}" TextWrapping="Wrap" />
+                                        </HyperlinkButton>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+                        </StackPanel>
+                    </StackPanel>
+                </RelativePanel>
+            </Grid>
+        </ScrollViewer>
     </Grid>
 </UserControl>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
index 1c15e0658b..5b30875a12 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
@@ -126,7 +126,7 @@
                 </ItemsControl.ItemContainerTransitions>
                 <ListView.ItemTemplate>
                     <DataTemplate>
-                        <Grid Width="466" Background="Transparent">
+                        <Grid Width="420" Background="Transparent">
                             <!-- Disabled reordering by dragging
                             
                             <Interactivity:Interaction.Behaviors>
@@ -185,7 +185,7 @@
                                     IsEnabled="{Binding CanMoveUp}"
                                     Grid.Row="0"
                                     HorizontalAlignment="Right"
-                                    Margin="0,0,24,0"
+                                    Margin="0,0,24,4"
                                     Background="Transparent"
                                     Visibility="Collapsed"
                                     FontFamily="Segoe MDL2 Assets"
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
index af47e4b4a0..98b2841d67 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -10,7 +10,7 @@
     xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
     xmlns:toolkitconverters="using:Microsoft.Toolkit.Uwp.UI.Converters"
     mc:Ignorable="d"
-    AutomationProperties.LandmarkType="Main">
+    AutomationProperties.LandmarkType="Main" x:Name="RootPage">
     <Page.Resources>
         <converters:ImageResizerFitToStringConverter x:Key="ImageResizerFitToStringConverter" />
         <converters:ImageResizerUnitToStringConverter x:Key="ImageResizerUnitToStringConverter" />
@@ -61,12 +61,12 @@
                                         <TextBlock Text="{x:Bind Unit, Mode=OneWay, Converter={StaticResource ImageResizerUnitToStringConverter},ConverterParameter=ToLower}" Foreground="{ThemeResource SystemBaseMediumColor}" Margin="0,0,4,0"/>
                                     </StackPanel>
                                 </StackPanel>
-                                <StackPanel HorizontalAlignment="Right" Grid.Column="2" Orientation="Horizontal">
+                                <StackPanel Spacing="8" HorizontalAlignment="Right" Grid.Column="2" Orientation="Horizontal">
                                     <Button 
                                         x:Uid="EditButton"
                                         Background="Transparent"
                                         FontFamily="Segoe MDL2 Assets"
-                                        Width="36"
+                                        Width="40"
                                         Height="36"
                                         Content="&#xE70F;">
                                         <ToolTipService.ToolTip>
@@ -126,7 +126,7 @@
                                         x:Uid="RemoveButton"
                                         Background="Transparent"
                                         FontFamily="Segoe MDL2 Assets"
-                                        Width="36"
+                                        Width="40"
                                         Height="36"
                                         Content="&#xE74D;"
                                         Click="DeleteCustomSize"
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
index 4edcec8071..302ee68509 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml
@@ -42,9 +42,6 @@
                         <AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
                         <AdaptiveTrigger MinWindowWidth="0" />
                     </VisualState.StateTriggers>
-                    <VisualState.Setters>
-                        <Setter Target="navigationView.HeaderTemplate" Value="{StaticResource HeaderSmallTemplate}"/>
-                    </VisualState.Setters>
                 </VisualState>
             </VisualStateGroup>
         </VisualStateManager.VisualStateGroups>
@@ -58,8 +55,7 @@
         IsBackEnabled="{x:Bind ViewModel.IsBackEnabled, Mode=OneWay}"
         SelectedItem="{x:Bind ViewModel.Selected, Mode=OneWay}"
         IsSettingsVisible="False"
-        CompactModeThresholdWidth="0"
-        SelectionChanged="NavigationView_SelectionChanged">
+        CompactModeThresholdWidth="0">
             <winui:NavigationView.MenuItems>
                 <winui:NavigationViewItem x:Uid="Shell_General" helpers:NavHelper.NavigateTo="views:GeneralPage" AutomationProperties.HeadingLevel="Level1">
                     <winui:NavigationViewItem.Icon>
@@ -146,18 +142,12 @@
                 </Button>
             </winui:NavigationView.PaneFooter>
             <i:Interaction.Behaviors>
-               
+
                 <ic:EventTriggerBehavior EventName="ItemInvoked">
-                <ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
-            </ic:EventTriggerBehavior>
-        </i:Interaction.Behaviors>
-        <ScrollViewer x:Name="scrollViewer"
-                      VerticalScrollBarVisibility="Auto"
-                      Grid.Column="0">
-                <Grid>
-                    <Frame x:Name="shellFrame" />
-                </Grid>
-        </ScrollViewer>
-    </winui:NavigationView>
+                    <ic:InvokeCommandAction Command="{x:Bind ViewModel.ItemInvokedCommand}" />
+                </ic:EventTriggerBehavior>
+            </i:Interaction.Behaviors>
+            <Frame x:Name="shellFrame" />
+        </winui:NavigationView>
     </Grid>
 </UserControl>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs
index adf4600b3b..68c81a689a 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShellPage.xaml.cs
@@ -161,11 +161,5 @@ namespace Microsoft.PowerToys.Settings.UI.Views
         {
             OpenOobeWindowCallback();
         }
-
-        [SuppressMessage("Usage", "CA1801:Review unused parameters", Justification = "Params are required for event handler signature requirements.")]
-        private void NavigationView_SelectionChanged(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewSelectionChangedEventArgs args)
-        {
-            scrollViewer.ChangeView(null, 0, null, true);
-        }
     }
 }