Merge pull request #2700 from niels9001/users/niels9001/settingsV2UXtweaks

[Settings v2] UX tweaks

src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw

@@ -314,10 +314,10 @@
   <data name="FancyZones_ZoneSetChangeMoveWindows.Content" xml:space="preserve">
     <value>During zone layout changes, windows assigned to a zone will match new size/positions</value>
   </data>
-  <data name="Give_Feedback.Content" xml:space="preserve">
+  <data name="Give_Feedback.Text" xml:space="preserve">
     <value>Give feedback</value>
   </data>
-  <data name="Module_overview.Content" xml:space="preserve">
+  <data name="Module_overview.Text" xml:space="preserve">
     <value>Module overview</value>
   </data>
   <data name="AttributionTitle.Text" xml:space="preserve">
@@ -329,7 +329,7 @@
   <data name="GeneralPage_CheckForUpdates.Content" xml:space="preserve">
     <value>Check for updates</value>
   </data>
-  <data name="GeneralPage_PrivacyStatement_URL.Content" xml:space="preserve">
+  <data name="GeneralPage_PrivacyStatement_URL.Text" xml:space="preserve">
     <value>Privacy statement</value>
   </data>
   <data name="GeneralPage_Radio_Theme_Dark.Content" xml:space="preserve">
@@ -341,10 +341,10 @@
   <data name="GeneralPage_Radio_Theme_Light.Content" xml:space="preserve">
     <value>Light</value>
   </data>
-  <data name="GeneralPage_ReportAbug.Content" xml:space="preserve">
+  <data name="GeneralPage_ReportAbug.Text" xml:space="preserve">
     <value>Report a bug</value>
   </data>
-  <data name="GeneralPage_RequestAFeature_URL.Content" xml:space="preserve">
+  <data name="GeneralPage_RequestAFeature_URL.Text" xml:space="preserve">
     <value>Request a feature</value>
   </data>
   <data name="GeneralPage_RestartAsAdmin_Button.Content" xml:space="preserve">
@@ -392,7 +392,7 @@
   <data name="Miscellaneous.Text" xml:space="preserve">
     <value>Miscellaneous</value>
   </data>
-  <data name="OpenSource_Notice.Content" xml:space="preserve">
+  <data name="OpenSource_Notice.Text" xml:space="preserve">
     <value>Open-source notice</value>
   </data>
   <data name="PowerRename_Toggle_AutoComplete.Header" xml:space="preserve">
@@ -431,9 +431,6 @@
   <data name="ImageResizer_Description.Text" xml:space="preserve">
     <value>Lets you resize images by right-clicking.</value>
   </data>
-  <data name="ImageResizer_EnableGroupSettingsHeader.Text" xml:space="preserve">
-    <value>Enable</value>
-  </data>
   <data name="ImageResizer_EnableToggle.Header" xml:space="preserve">
     <value>Enable Image Resizer</value>
   </data>
@@ -527,7 +524,7 @@
   <data name="GeneralPage_ToggleSwitch_AlwaysRunElevated.Header" xml:space="preserve">
     <value>Always Run as Admin</value>
   </data>
-  <data name="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link.Content" xml:space="preserve">
+  <data name="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link.Text" xml:space="preserve">
     <value>Learn about Admin mode</value>
   </data>
   <data name="GeneralPage_ToggleSwitch_AutoDownloadUpdates.Header" xml:space="preserve">

src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml

@@ -53,7 +53,7 @@
 
             <ToggleSwitch x:Uid="FancyZones_EnableToggleControl_HeaderText"
                           IsOn="{ Binding Mode=TwoWay, Path=IsEnabled}"
-                          Margin="{StaticResource SmallTopMargin}" />
+                          Margin="{StaticResource MediumTopMargin}" />
 
             <TextBlock x:Uid="FancyZones_ZoneBehavior_GroupSettings"
                        Style="{StaticResource SettingsGroupTitleStyle}"
@@ -228,10 +228,13 @@
             
             <Image Source="https://user-images.githubusercontent.com/9866362/77859136-f04ae880-7207-11ea-8a7f-4295342fe319.gif" />
 
-            <HyperlinkButton x:Uid="Module_overview"
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/fancyzones/README.md">
-                             NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/fancyzones/README.md"/>
+                <TextBlock x:Uid="Module_overview" />
+            </HyperlinkButton>
 
-            <HyperlinkButton x:Uid="Give_Feedback" NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                <TextBlock x:Uid="Give_Feedback" />
+            </HyperlinkButton>
 
             <!--
             <TextBlock Text="Contributors"

src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml

@@ -115,21 +115,26 @@
                     Command = "{Binding CheckFoUpdatesEventHandler, Source={StaticResource eventViewModel}}"
                     />
 
-            <HyperlinkButton x:Uid="GeneralPage_ReportAbug"
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues"
-                             NavigateUri="https://github.com/microsoft/PowerToys/issues"
+                             Margin="{StaticResource SmallTopMargin}">
-                             Margin="{StaticResource SmallTopMargin}" />
+                <TextBlock x:Uid="GeneralPage_ReportAbug"/>
+            </HyperlinkButton>
 
-            <HyperlinkButton x:Uid="GeneralPage_RequestAFeature_URL" 
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
-                             NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
+                <TextBlock x:Uid="GeneralPage_RequestAFeature_URL"/>
+            </HyperlinkButton>
 
-            <HyperlinkButton x:Uid="GeneralPage_PrivacyStatement_URL"
+            <HyperlinkButton NavigateUri=" http://go.microsoft.com/fwlink/?LinkId=521839">
-                             NavigateUri=" http://go.microsoft.com/fwlink/?LinkId=521839" />
+                <TextBlock x:Uid="GeneralPage_PrivacyStatement_URL"/>
+            </HyperlinkButton>
 
-            <HyperlinkButton x:Uid="OpenSource_Notice"
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/NOTICE.md">
-                             NavigateUri="https://github.com/microsoft/PowerToys/blob/master/NOTICE.md"/>
+                <TextBlock x:Uid="OpenSource_Notice"/>
+            </HyperlinkButton>
 
-            <HyperlinkButton x:Uid="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link"
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/doc/devdocs/run-as-admin-detection.md">
-                             NavigateUri="https://github.com/microsoft/PowerToys/blob/master/doc/devdocs/run-as-admin-detection.md"/>
+                <TextBlock x:Uid="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link" />
+            </HyperlinkButton>
         </StackPanel>
     </Grid>
 </Page>

src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml

@@ -50,12 +50,9 @@
             <TextBlock x:Uid="ImageResizer_Description"
                        TextWrapping="Wrap"/>
 
-            <TextBlock x:Uid="ImageResizer_EnableGroupSettingsHeader"
+            <ToggleSwitch x:Uid="ImageResizer_EnableToggle"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+                          Margin="{StaticResource MediumTopMargin}"
-
+                          IsOn="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"/>
-            <!--x:Uid="ImageResizer_EnableToggle"-->
-            <ToggleSwitch IsOn="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"
-                          Margin="{StaticResource SmallTopMargin}" />
 
             <TextBlock x:Uid="ImageResizer_CustomSizes"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
@@ -66,7 +63,7 @@
                       Padding="0"
                       IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}"
                       Margin="0"
-                      >
+                      SelectionMode="None">
 
                 <ListView.ItemContainerStyle>
                     <Style TargetType="ListViewItem">
@@ -100,15 +97,17 @@
                 </ListView.ItemContainerStyle>
                 <ListView.ItemTemplate>
                     <DataTemplate x:Name="SingleLineDataTemplate" x:DataType="models:ImageSize" >
-                        <StackPanel Orientation="Horizontal" Padding="0" Spacing="4">
+                        <StackPanel Orientation="Horizontal" Height="48" Padding="0" Spacing="4">
                             <TextBox Text="{x:Bind Path=Name, Mode=TwoWay}" 
-                                     Width="90" 
+                                     Width="90"
-                                     Height="35" 
+                                     VerticalAlignment="Center"
+                                     Height="34"
                                      Margin="{StaticResource SmallTopMargin}"/>
 
                             <ComboBox SelectedIndex="{x:Bind Path=Fit, Mode=TwoWay}"
-                                      Width="90" 
+                                      Width="90"
-                                      Height="35"
+                                      VerticalAlignment="Center"
+                                      Height="34"
                                       Margin="{StaticResource SmallTopMargin}">
                                 <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fill" />
                                 <ComboBoxItem x:Uid="ImageResizer_Sizes_Fit_Fit" />
@@ -118,37 +117,42 @@
                             <muxc:NumberBox Value="{x:Bind Path=Width, Mode=TwoWay}" 
                                             Width="68"
                                             Height="34"
+                                            VerticalAlignment="Center"
                                             Margin="{StaticResource SmallTopMargin}"/>
 
-                            <TextBlock Text="x" 
+                            <TextBlock Text="&#xE711;"
-                                       FontWeight="SemiBold" 
+                                       FontFamily="Segoe MDL2 Assets"
-                                       TextAlignment="Center" 
+                                       TextAlignment="Center"
+                                       VerticalAlignment="Center"
                                        Margin="{StaticResource SmallTopMargin}" 
-                                       Width="25" 
+                                       Width="25"/>
-                                       Height="35"/>
 
                             <muxc:NumberBox Value="{x:Bind Path=Height, Mode=TwoWay}" 
-                                            Width="68" 
+                                            Width="68"
                                             Height="34"
+                                            VerticalAlignment="Center"
                                             Margin="{StaticResource SmallTopMargin}"/>
 
                             <ComboBox SelectedIndex="{Binding Path=Unit, Mode=TwoWay}"
-                                      Width="90" 
+                                      Width="90"
-                                      Height="35"
+                                      Height="34"
+                                      VerticalAlignment="Center"
                                       Margin="{StaticResource SmallTopMargin}">
                                 <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_CM" />
                                 <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Inches" />
                                 <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Percent" />
                                 <ComboBoxItem x:Uid="ImageResizer_Sizes_Units_Pixels" />
                             </ComboBox>
-                            <AppBarButton x:Name="RemoveButton" 
+                            <Button x:Name="RemoveButton" 
                                           Background="Transparent" 
                                           Command = "{Binding DeleteImageSizeEventHandler, Source={StaticResource ViewModel}}"
                                           CommandParameter="{Binding Id}"                                          
-                                          Icon="Delete" 
+                                          FontFamily="Segoe MDL2 Assets"
-                                          Width="52" 
+                                          Height="34"
-                                          Height="32"
+                                          Width="34"
-                                          Margin="{StaticResource SmallTopMargin}" Padding="0,0,50,100" UseLayoutRounding="False"/>
+                                          Content="&#xE74D;"
+                                          VerticalAlignment="Center"
+                                          Margin="{StaticResource SmallTopMargin}" UseLayoutRounding="False"/>
                         </StackPanel>
                     </DataTemplate>
                 </ListView.ItemTemplate>
@@ -272,21 +276,22 @@
                 Style="{StaticResource SettingsGroupTitleStyle}"
                 Margin="{StaticResource XSmallBottomMargin}"/>
 
-            <HyperlinkButton 
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/imageresizer/README.md">
-                x:Uid="Module_overview"
+                <TextBlock x:Uid="Module_overview" />
-                NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/imageresizer/README.md"/>
+            </HyperlinkButton>
 
-            <HyperlinkButton x:Uid="Give_Feedback"
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
-                             NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
+                <TextBlock x:Uid="Give_Feedback" />
+            </HyperlinkButton>
 
             <TextBlock 
                 x:Uid="AttributionTitle"
                 Style="{StaticResource SettingsGroupTitleStyle}" />
 
             <HyperlinkButton 
-                Content="Brice Lambson" 
+                NavigateUri="https://github.com/bricelam/ImageResizer/">
-                NavigateUri="https://github.com/bricelam/ImageResizer/" />
+                <TextBlock Text="Brice Lambson's SmartRenamer" TextWrapping="Wrap" />
-
+            </HyperlinkButton>
         </StackPanel>
 
     </Grid>

src/core/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml

@@ -121,7 +121,7 @@
 
             <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
                           IsOn="{x:Bind Path=ViewModel.Enabled, Mode=TwoWay}"
-                          Margin="{StaticResource SmallTopMargin}" />
+                          Margin="{StaticResource MediumTopMargin}" />
 
             <!--<TextBlock x:Uid="KeyboardManager_ConfigHeader"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
@@ -208,7 +208,13 @@
                 Style="{StaticResource SettingsGroupTitleStyle}"
                 Margin="{StaticResource XSmallBottomMargin}"/>
 
-            <HyperlinkButton Content="Module overview"/>
+            <HyperlinkButton>
+                <TextBlock x:Uid="Module_overview" />
+            </HyperlinkButton>
+
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                <TextBlock x:Uid="Give_Feedback" />
+            </HyperlinkButton>
         </StackPanel>
     </Grid>
 </Page>

src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml

@@ -44,12 +44,11 @@
 
         <StackPanel Orientation="Vertical">
             <TextBlock x:Uid="PowerLauncher_Description"
-                       Style="{StaticResource BodyTextBlockStyle}"
                        TextWrapping="Wrap"/>
 
             <ToggleSwitch x:Uid="PowerLauncher_EnablePowerLauncher" 
                           IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.EnablePowerLauncher}"
-                          Margin="{StaticResource SmallTopMargin}"/>
+                          Margin="{StaticResource MediumTopMargin}"/>
 
             <TextBlock x:Uid="PowerLauncher_SearchResults"
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
@@ -141,19 +140,25 @@
                 Style="{StaticResource SettingsGroupTitleStyle}"
                 Margin="{StaticResource XSmallBottomMargin}"/>
 
-            <HyperlinkButton Content="Module overview"/>
+            <HyperlinkButton>
+                <TextBlock x:Uid="Module_overview" />
+            </HyperlinkButton>
+
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                <TextBlock x:Uid="Give_Feedback" />
+            </HyperlinkButton>
 
             <TextBlock 
                 Text="Attribution"
                 Style="{StaticResource SettingsGroupTitleStyle}" />
 
-            <HyperlinkButton 
+            <HyperlinkButton NavigateUri="https://github.com/Wox-launcher/Wox/">
-                Content="Wox" 
+                <TextBlock Text="Wox"/>
-                NavigateUri="https://github.com/Wox-launcher/Wox/" />
+            </HyperlinkButton>
 
-            <HyperlinkButton 
+            <HyperlinkButton NavigateUri="https://github.com/betsegaw/windowwalker/">
-                Content="Beta Tadele's Window Walker" 
+                <TextBlock Text="Beta Tadele's Window Walker" />
-                NavigateUri="https://github.com/betsegaw/windowwalker/" />
+            </HyperlinkButton>
         </StackPanel>
     </Grid>
 </Page>

src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml

@@ -45,7 +45,7 @@
                        TextWrapping="Wrap"/>
 
             <ToggleSwitch x:Uid="FileEplorerPreview_ToggleSwitch_Preview_SVG"
-                          Margin="{StaticResource SmallTopMargin}"
+                          Margin="{StaticResource MediumTopMargin}"
                           IsOn="{Binding Mode=TwoWay, Path=SVGRenderIsEnabled}" />
 
             <ToggleSwitch x:Uid="FileEplorerPreview_ToggleSwitch_Preview_MD"
@@ -63,11 +63,13 @@
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Margin="{StaticResource XSmallBottomMargin}"/>
 
-            <HyperlinkButton x:Uid="Module_overview"
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/tree/master/src/modules/previewpane">
-                             NavigateUri="https://github.com/microsoft/PowerToys/tree/master/src/modules/previewpane"/>
+                <TextBlock x:Uid="Module_overview" />
+            </HyperlinkButton>
 
-            <HyperlinkButton x:Uid="Give_Feedback"
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
-                             NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
+                <TextBlock x:Uid="Give_Feedback" />
+            </HyperlinkButton>
         </StackPanel>
     </Grid>
 </Page>

src/core/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml

@@ -46,7 +46,7 @@
                        TextWrapping="Wrap"/>
 
             <ToggleSwitch x:Uid="PowerRename_Toggle_Enable"
-                          Margin="{StaticResource SmallTopMargin}" 
+                          Margin="{StaticResource MediumTopMargin}" 
                           IsOn="{Binding Mode=TwoWay, Path=IsEnabled}"                          
                            />
 
@@ -58,7 +58,7 @@
                           IsOn="{Binding Mode=TwoWay, Path=MRUEnabled}"
                           IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                            />
-            
+
             <ToggleSwitch x:Uid="PowerRename_Toggle_EnableOnContextMenu"
                           Margin="{StaticResource SmallTopMargin}" 
                           IsOn="{Binding Mode=TwoWay, Path=EnabledOnContextMenu}"
@@ -74,6 +74,13 @@
             <TextBlock x:Uid="Miscellaneous" 
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
 
+
+            <ToggleSwitch x:Uid="PowerRename_Toggle_AutoComplete"
+                          Margin="{StaticResource SmallTopMargin}" 
+                          IsOn="{Binding Mode=TwoWay, Path=MRUEnabled}"
+                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
+                           />
+            
             <ToggleSwitch x:Uid="PowerRename_Toggle_RestoreFlagsOnLaunch"
                           Margin="{StaticResource SmallTopMargin}" 
                           IsOn="{Binding Mode=TwoWay, Path=RestoreFlagsOnLaunch}"
@@ -100,11 +107,13 @@
                        Style="{StaticResource SettingsGroupTitleStyle}"
                        Margin="{StaticResource XSmallBottomMargin}"/>
 
-            <HyperlinkButton x:Uid="Module_overview"
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/tree/master/src/modules/powerrename">
-                             NavigateUri="https://github.com/microsoft/PowerToys/tree/master/src/modules/powerrename"/>
+                <TextBlock x:Uid="Module_overview" />
+            </HyperlinkButton>
 
-            <HyperlinkButton x:Uid="Give_Feedback"
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
-                             NavigateUri="https://github.com/microsoft/PowerToys/issues"/>
+                <TextBlock x:Uid="Give_Feedback" />
+            </HyperlinkButton>
 
 
             <TextBlock 
@@ -112,8 +121,9 @@
                 Style="{StaticResource SettingsGroupTitleStyle}" />
 
             <HyperlinkButton 
-                Content="Chris Davis's SmartRenamer" 
+                NavigateUri="https://github.com/chrdavis/SmartRename">
-                NavigateUri="https://github.com/chrdavis/SmartRename" />
+                <TextBlock Text="Chris Davis's SmartRenamer" TextWrapping="Wrap" />
+            </HyperlinkButton>
         </StackPanel>
     </Grid>
 </Page>

src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml

@@ -46,7 +46,7 @@
 
             <ToggleSwitch x:Uid="ShortcutGuide_Enable"
                           IsOn="{ Binding Mode=TwoWay, Path=IsEnabled}"
-                          Margin="{StaticResource SmallTopMargin}"/>
+                          Margin="{StaticResource MediumTopMargin}"/>
 
             <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior" 
                        Style="{StaticResource SettingsGroupTitleStyle}"/>
@@ -97,9 +97,13 @@
 
             <Image Source="https://raw.githubusercontent.com/microsoft/PowerToys/dev/build-features/doc/images/shortcut_guide/usage.png" />
 
-            <HyperlinkButton 
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/shortcut_guide/README.md">
-                x:Uid="Module_overview"
+                <TextBlock x:Uid="Module_overview"/>
-                NavigateUri="https://github.com/microsoft/PowerToys/blob/master/src/modules/shortcut_guide/README.md"/>
+            </HyperlinkButton>
+
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                <TextBlock x:Uid="Give_Feedback" />
+            </HyperlinkButton>
         </StackPanel>
     </Grid>
 </Page>