From f0600f17257d3f6a05f36b846a4eb3822813571f Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Tue, 5 Jan 2021 17:24:14 +0100
Subject: [PATCH] [Settings] Various UX fixes (#8739)

* Change accent color to secondary grey for better contrast on colorpicker page

* Fix textwrapping issue for shortcut tooltips

* Fix image resizer scroll issue

* Fix colorpicker page textblock/listview not disabled when module is disabled

* Added MaxWidth and sidebar margin

* Typo fix
---
 .../Controls/HotkeySettingsControl.xaml             |  2 +-
 .../Styles/_Sizes.xaml                              |  3 +++
 .../Views/ColorPickerPage.xaml                      | 13 ++++++++++---
 .../Views/FancyZonesPage.xaml                       |  7 ++++++-
 .../Views/GeneralPage.xaml                          |  8 ++++++--
 .../Views/ImageResizerPage.xaml                     |  6 ++++--
 .../Views/KeyboardManagerPage.xaml                  |  7 ++++++-
 .../Views/PowerLauncherPage.xaml                    |  7 ++++++-
 .../Views/PowerPreviewPage.xaml                     |  8 ++++++--
 .../Views/PowerRenamePage.xaml                      |  6 +++++-
 .../Views/ShortcutGuidePage.xaml                    |  7 ++++++-
 11 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml
index d790c7952f..13c642c4b5 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/HotkeySettingsControl.xaml
@@ -14,7 +14,7 @@
              AutomationProperties.HelpText="{Binding ElementName=ShortcutWarningLabelText, Path=Text}"
              IsReadOnly="True">
         <ToolTipService.ToolTip>
-            <TextBlock x:Name="ShortcutWarningLabelText">
+            <TextBlock x:Name="ShortcutWarningLabelText" TextWrapping="WrapWholeWords">
                 <Run x:Uid="ShortcutWarningLabel"/>
                 <LineBreak/>
                 <Run Text="{x:Bind Keys, Mode=OneTime}" FontWeight="SemiBold"/>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml
index b252031f27..6af23efd75 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/_Sizes.xaml
@@ -16,4 +16,7 @@
 
     <!-- Row spacing between content and sidepanel (in small mode) -->
     <x:Double x:Key="DefaultRowSpacing">24</x:Double>
+
+    <!-- MaxWidth of the content panel, similar to W10 Settings -->
+    <x:Double x:Key="MaxContentWidth">460</x:Double>
 </ResourceDictionary>
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 54970972f8..671f200771 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
@@ -30,6 +30,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0" />
                         <Setter Target="SidePanel.Width" Value="Auto" />
                         <Setter Target="ColorPickerView.(Grid.Row)" Value="1" />
+                        <Setter Target="ColorPickerView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage" />
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage" />
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0" />
@@ -47,7 +48,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel Orientation="Vertical" x:Name="ColorPickerView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="ColorPickerView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Uid="ColorPicker_EnableColorPicker" 
                           IsOn="{Binding IsEnabled, Mode=TwoWay}"/>
 
@@ -135,10 +140,12 @@
             <TextBlock Margin="{StaticResource MediumTopMargin}"
                        x:Name="ColorFormatsListViewLabel"
                        TextWrapping="WrapWholeWords"
-                       x:Uid="ColorPicker_ColorFormatsDescription"/>
+                       x:Uid="ColorPicker_ColorFormatsDescription"
+                       Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
             <ListView ItemsSource="{Binding ColorFormats, Mode=TwoWay}"
                       AllowDrop="True"
                       MaxWidth="466"
+                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       AutomationProperties.LabeledBy="{Binding ElementName=ColorFormatsListViewLabel}"
                       CanReorderItems="True"
                       HorizontalAlignment="Left"
@@ -162,7 +169,7 @@
                                        FontSize="16"
                                        Margin="0,8,0,0"
                                        Text="{Binding Name}"/>
-                            <TextBlock Foreground="{ThemeResource SystemAccentColor}"
+                            <TextBlock Foreground="{ThemeResource SystemBaseMediumColor}"
                                        Text="{Binding Example}"
                                        Grid.Row="1"
                                        Margin="0,0,0,8"/>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
index 1e7b8b28b7..f304bffb69 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
@@ -36,6 +36,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="FZView.(Grid.Row)" Value="1" />
+                        <Setter Target="FZView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -53,7 +54,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel x:Name="FZView" Orientation="Vertical">
+        <StackPanel x:Name="FZView"
+                    Orientation="Vertical"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Name="FancyZones_EnableToggleControl_HeaderText"
                             x:Uid="FancyZones_EnableToggleControl_HeaderText"
                             IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
index 68dd965cac..516bdb0a77 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
@@ -33,6 +33,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="GeneralView.(Grid.Row)" Value="1" />
+                        <Setter Target="GeneralView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -50,8 +51,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel Orientation="Vertical" 
-                    x:Name="GeneralView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="GeneralView"
+                    Margin="0,0,48,0"
+                    HorizontalAlignment="Left"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <TextBlock x:Uid="Admin_Mode" 
                        FontWeight="SemiBold"
                        TextWrapping="Wrap"
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 585b6a707d..759d0c4553 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -33,6 +33,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="ImageResizerView.(Grid.Row)" Value="1" />
+                        <Setter Target="ImageResizerView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -49,7 +50,8 @@
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <StackPanel Orientation="Vertical" x:Name="ImageResizerView">
+        <StackPanel Orientation="Vertical" x:Name="ImageResizerView"
+                    Margin="0,0,48,0">
 
             <ToggleSwitch x:Uid="ImageResizer_EnableToggle"
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>
@@ -61,7 +63,7 @@
             <ListView x:Name="ImagesSizesListView" 
                       x:Uid="ImagesSizesListView"
                       ItemsSource="{x:Bind ViewModel.Sizes, Mode=TwoWay}"
-                      Padding="0"
+                      Padding="0,0,0,24"
                       IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                       SelectionMode="None"
                       ScrollViewer.HorizontalScrollMode="Enabled"
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
index 68178df182..46d80ae3b8 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
@@ -206,6 +206,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="KeyboardManagerView.(Grid.Row)" Value="1" />
+                        <Setter Target="KeyboardManagerView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -223,7 +224,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel Orientation="Vertical" x:Name="KeyboardManagerView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="KeyboardManagerView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
                           IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"/>
 
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
index a38d7b6b9c..25b4d1c756 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
@@ -29,6 +29,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="LauncherView.(Grid.Row)" Value="1" />
+                        <Setter Target="LauncherView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -46,7 +47,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel Orientation="Vertical" x:Name="LauncherView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="LauncherView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Uid="PowerLauncher_EnablePowerLauncher" 
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnablePowerLauncher}"/>
 
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
index fef0a74903..ff65ed85cf 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
@@ -30,6 +30,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="PowerPreviewView.(Grid.Row)" Value="1" />
+                        <Setter Target="PowerPreviewView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -47,8 +48,11 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
 
-        <StackPanel Orientation="Vertical" 
-                    x:Name="PowerPreviewView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="PowerPreviewView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <TextBlock x:Uid="FileExplorerPreview_RunAsAdminRequired"
                        Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
                        Visibility="{Binding Mode=OneWay, Path=IsElevated, Converter={StaticResource BoolToVisibilityConverter}}"
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
index 009a2b6256..cfb761228c 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
@@ -27,6 +27,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="PowerRenameView.(Grid.Row)" Value="1" />
+                        <Setter Target="PowerRenameView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -44,7 +45,10 @@
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
         <StackPanel Orientation="Vertical"
-                    x:Name="PowerRenameView">
+                    x:Name="PowerRenameView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
 
             <ToggleSwitch x:Uid="PowerRename_Toggle_Enable"
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"                          
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
index 7ffb043aac..da6e73a2f4 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
@@ -33,6 +33,7 @@
                         <Setter Target="SidePanel.(Grid.Column)" Value="0"/>
                         <Setter Target="SidePanel.Width" Value="Auto"/>
                         <Setter Target="ShortcutGuideView.(Grid.Row)" Value="1" />
+                        <Setter Target="ShortcutGuideView.Margin" Value="0" />
                         <Setter Target="LinksPanel.(RelativePanel.RightOf)" Value="AboutImage"/>
                         <Setter Target="LinksPanel.(RelativePanel.AlignTopWith)" Value="AboutImage"/>
                         <Setter Target="AboutImage.Margin" Value="0,12,12,0"/>
@@ -49,7 +50,11 @@
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto" />
         </Grid.RowDefinitions>
-        <StackPanel Orientation="Vertical" x:Name="ShortcutGuideView">
+        <StackPanel Orientation="Vertical"
+                    x:Name="ShortcutGuideView"
+                    HorizontalAlignment="Left"
+                    Margin="0,0,48,0"
+                    MaxWidth="{StaticResource MaxContentWidth}">
             <ToggleSwitch x:Uid="ShortcutGuide_Enable"
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.IsEnabled}"/>