[Settings] Various UX tweaks (#2822)

* Updated the add button styles to a standard used in W10 settings * Updated the "About this feature" text to About [Module name] * Set larger changes to the Shortcut Guide opacity numberbox * Re-organised the General page * Improved width of the add button so it's inline with the corresponding listview. * Seperated warning label from header. Re-organised general settings * Consistent formatting of the word 'administrator' * Typo fix * Warning text is collapsed when the user runs the app as admin * Removed underline of version number * XAML fix
2026-04-07 19:57:07 +02:00 · 2020-05-11 21:36:55 +02:00
parent 8aa8c296e1
commit c39be3dbc9
15 changed files with 246 additions and 124 deletions
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/FancyZonesPage.xaml
@@ -70,7 +70,7 @@
                                          x:Uid="FancyZones_HokeyEditorControl_Header"
                                          Width="320"
                                          HorizontalAlignment="Left"
-                                          Margin="{StaticResource SmallTopMargin}"
+                                          Margin="{StaticResource MediumTopMargin}"
                                          HotkeySettings="{x:Bind Path=ViewModel.EditorHotkey, Mode=TwoWay}"
                                          IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"        
                                        />
@@ -216,7 +216,7 @@
                    Width="{StaticResource SidePanelWidth}"
                    Grid.Column="1">

-            <TextBlock x:Uid="About_This_Feature"
+            <TextBlock x:Uid="About_FancyZones"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Margin="{StaticResource XSmallBottomMargin}"/>
            
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
@@ -6,11 +6,13 @@
    xmlns:viewModel="using:Microsoft.PowerToys.Settings.UI.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:converters="using:Microsoft.Toolkit.Uwp.UI.Converters"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Page.Resources>
+        <converters:BoolToObjectConverter x:Key="BoolToVisibilityConverter" TrueValue="Collapsed" FalseValue="Visible"/>
        <viewModel:GeneralViewModel x:Key="eventViewModel"/>
    </Page.Resources>

@@ -49,23 +51,11 @@

        <StackPanel Orientation="Vertical" 
                    x:Name="GeneralSettingsView">
-
-            <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_RunAtStartUp"  
-                          Margin="{StaticResource SmallTopMargin}" 
-                          IsOn="{Binding Mode=TwoWay, Path=Startup, Source={StaticResource eventViewModel}}"/>
-
-            <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_AutoDownloadUpdates" 
-                          Margin="{StaticResource SmallTopMargin}" 
-                          IsOn="{Binding Mode=TwoWay, Path=AutoDownloadUpdates, Source={StaticResource eventViewModel}}"/>
-
-            <TextBlock Text="{Binding Mode=TwoWay, Path=RunningAsAdminText, Source={StaticResource eventViewModel}}"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource MediumTopMargin}"/>
+            <TextBlock x:Uid="Admin_Mode"
+                       Style="{StaticResource SubtitleTextBlockStyle}"/>
            
-            <ToggleSwitch Margin="{StaticResource SmallTopMargin}" 
-                          Header="{Binding Mode=TwoWay, Path=AlwaysRunAsAdminText, Source={StaticResource eventViewModel}}"
-                          IsEnabled="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}}"
-                          IsOn="{Binding Mode=TwoWay, Path=RunElevated, Source={StaticResource eventViewModel}}"/>
+            <TextBlock Text="{Binding Mode=TwoWay, Path=RunningAsAdminText, Source={StaticResource eventViewModel}}"
+                       Margin="{StaticResource SmallTopMargin}"/>

            <Button x:Uid="GeneralPage_RestartAsAdmin_Button"
                    Margin="{StaticResource SmallTopMargin}"
@@ -74,10 +64,23 @@
                    IsEnabled="{Binding Mode=TwoWay, Path=IsAdminButtonEnabled, Source={StaticResource eventViewModel}}"
                    />

+            <TextBlock x:Uid="General_RunAsAdminRequired"
+                       Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
+                       Visibility="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}, Converter={StaticResource BoolToVisibilityConverter}}"
+                       Margin="0,24,0,-8" />

-            <TextBlock x:Uid="Appearancce_GroupSettings"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource MediumTopMargin}"/>
+            <ToggleSwitch Margin="{StaticResource SmallTopMargin}"
+                          x:Uid="GeneralSettings_AlwaysRunAsAdminText"
+                          IsEnabled="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}}"
+                          IsOn="{Binding Mode=TwoWay, Path=RunElevated, Source={StaticResource eventViewModel}}"/>
+            
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/blob/master/doc/devdocs/run-as-admin-detection.md">
+                <TextBlock x:Uid="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link" />
+            </HyperlinkButton>
+
+
+            <TextBlock x:Uid="ShortcutGuide_Appearance_Behavior"
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>

            <muxc:RadioButtons x:Uid="RadioButtons_Name_Theme" Margin="{StaticResource SmallTopMargin}">
                <RadioButton x:Uid="GeneralPage_Radio_Theme_Dark"
@@ -92,6 +95,40 @@
                             Content="System default"
                             IsChecked="{ Binding Mode=TwoWay, Path=IsSystemThemeRadioButtonChecked, Source={StaticResource eventViewModel}}"/>
            </muxc:RadioButtons>
+            
+            <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_RunAtStartUp"  
+                          Margin="{StaticResource SmallTopMargin}" 
+                          IsOn="{Binding Mode=TwoWay, Path=Startup, Source={StaticResource eventViewModel}}"/>
+            
+            
+
+            <TextBlock x:Uid="General_Updates"
+                        Style="{StaticResource SettingsGroupTitleStyle}"/>
+            <StackPanel Orientation="Horizontal">
+                <TextBlock Text="Version: " x:Uid="General_Version"  />
+                <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/releases" Margin="4,-6,0,0">
+                    <TextBlock Text="{x:Bind ViewModel.PowerToysVersion }" />
+                </HyperlinkButton>
+            </StackPanel>
+           
+            
+            <Button x:Uid="GeneralPage_CheckForUpdates"
+                    Style="{StaticResource AccentButtonStyle}"
+                    Foreground="White"
+                    Margin="{StaticResource SmallTopMargin}"
+                    Command="{Binding CheckFoUpdatesEventHandler, Source={StaticResource eventViewModel}}"
+                    />
+
+            <TextBlock x:Uid="General_RunAsAdminRequired"
+                       Foreground="{ThemeResource SystemControlErrorTextForegroundBrush}"
+                       Visibility="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}, Converter={StaticResource BoolToVisibilityConverter}}"
+                       Margin="0,24,0,-20" />
+            
+            <ToggleSwitch x:Uid="GeneralPage_ToggleSwitch_AutoDownloadUpdates" 
+                          Margin="{StaticResource MediumTopMargin}"
+                          IsEnabled="{Binding Mode=TwoWay, Path=IsElevated, Source={StaticResource eventViewModel}}"
+                          IsOn="{Binding Mode=TwoWay, Path=AutoDownloadUpdates, Source={StaticResource eventViewModel}}"/>
+            
        </StackPanel>

        <StackPanel x:Name="SidePanel"
@@ -104,19 +141,11 @@
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Margin="{StaticResource XSmallBottomMargin}"/>

-            <TextBlock Text="{x:Bind ViewModel.PowerToysVersion }"
-                       FontWeight="Bold"
-                       Margin="{StaticResource SmallTopMargin}" />
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
+                <TextBlock x:Uid="General_Repository"/>
+            </HyperlinkButton>

-            <Button x:Uid="GeneralPage_CheckForUpdates"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    Foreground="White"
-                    Command = "{Binding CheckFoUpdatesEventHandler, Source={StaticResource eventViewModel}}"
-                    />
-
-            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues"
-                             Margin="{StaticResource SmallTopMargin}">
+            <HyperlinkButton NavigateUri="https://github.com/microsoft/PowerToys/issues">
                <TextBlock x:Uid="GeneralPage_ReportAbug"/>
            </HyperlinkButton>

@@ -132,9 +161,7 @@
                <TextBlock x:Uid="OpenSource_Notice"/>
            </HyperlinkButton>

-            <HyperlinkButton 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>
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ImageResizerPage.xaml
@@ -162,9 +162,11 @@
            <StackPanel Orientation="Horizontal">
                <AppBarButton Icon="Add"
                              x:Name="AddSizeButton"
+                              Width="560"
+                              Style="{StaticResource AddItemAppBarButtonStyle}"
                              IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled, Source={StaticResource ViewModel}}" 
-                              Label="Add Size"
-                              Margin="{StaticResource SmallTopMargin}"
+                             x:Uid="ImageResizer_AddSizeButton"
+                              Margin="{StaticResource AddItemButtonMargin}"
                              Command = "{Binding AddImageSizeEventHandler, Source={StaticResource ViewModel}}"
                          />
            </StackPanel>
@@ -272,7 +274,7 @@
            Grid.Column="1">

            <TextBlock 
-                x:Uid="About_This_Feature"
+                x:Uid="About_ImageResizer"
                Style="{StaticResource SettingsGroupTitleStyle}"
                Margin="{StaticResource XSmallBottomMargin}"/>

--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
@@ -143,11 +143,7 @@
                       Margin="{StaticResource SmallTopMargin}"
                       TextWrapping="Wrap"/>

-            <Button x:Uid="KeyboardManager_RemapKeyboardButton"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    Command="{Binding Path=RemapKeyboardCommand}"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>
+

            <ListView x:Name="RemapKeysList"
                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
@@ -158,13 +154,21 @@
                      CornerRadius="4"
                      MinWidth="350"
                      MaxHeight="200"
-                      Margin="{StaticResource MediumTopBottomMargin}"
+                      Margin="{StaticResource SmallTopBottomMargin}"
                      HorizontalAlignment="Left"
                      SelectionMode="None"
                      IsSwipeEnabled="False"
                      Visibility="{x:Bind Path=ViewModel.RemapKeys, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
-                      /> 
-
+                      />
+            
+            <AppBarButton x:Uid="KeyboardManager_RemapKeyboardButton"
+                    Icon="Add"
+                    Width="370"
+                    Style="{StaticResource AddItemAppBarButtonStyle}"
+                    Command="{Binding Path=RemapKeyboardCommand}"
+                    Margin="{StaticResource AddItemButtonMargin}"
+                    HorizontalAlignment="Left"
+                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"/>

            <TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
                       Style="{StaticResource SettingsGroupTitleStyle}"/>
@@ -172,12 +176,7 @@
            <TextBlock Text="Click below to remap a shortcut (hotkey) to another shortcut"
                       TextWrapping="Wrap" Margin="{StaticResource SmallTopMargin}"/>

-            <Button x:Uid="KeyboardManager_RemapShortcutsButton"
-                    Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    Command="{Binding Path=EditShortcutCommand}"
-                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
-                    />
+

            <ListView x:Name="RemapShortcutsList"
                      extensions:ListViewExtensions.AlternateColor="{ThemeResource SystemControlBackgroundListLowBrush}"
@@ -188,12 +187,22 @@
                      CornerRadius="4"
                      MinWidth="350"
                      MaxHeight="200"
-                      Margin="{StaticResource MediumTopBottomMargin}"
+                      Margin="{StaticResource SmallTopBottomMargin}"
                      HorizontalAlignment="Left"
                      SelectionMode="None"
                      IsSwipeEnabled="False"
                      Visibility="{x:Bind Path=ViewModel.RemapShortcuts, Mode=OneWay, Converter={StaticResource visibleIfNotEmptyConverter}}"
                      />
+
+            <AppBarButton x:Uid="KeyboardManager_RemapShortcutsButton"
+                    Icon="Add"
+                    Width="370"
+                    Style="{StaticResource AddItemAppBarButtonStyle}"
+                    Command="{Binding Path=EditShortcutCommand}"
+                    IsEnabled="{x:Bind Path=ViewModel.Enabled, Mode=OneWay}"
+                    Margin="{StaticResource AddItemButtonMargin}"
+                    HorizontalAlignment="Left"
+                    />
        </StackPanel>

        <StackPanel 
@@ -204,7 +213,7 @@
            Grid.Column="1">

            <TextBlock
-                Text="About this feature"
+                x:Uid="About_KeyboardManager"
                Style="{StaticResource SettingsGroupTitleStyle}"
                Margin="{StaticResource XSmallBottomMargin}"/>

--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerLauncherPage.xaml
@@ -136,7 +136,7 @@
            Grid.Column="1">

            <TextBlock 
-                Text="About this feature"
+                x:Uid="About_PowerLauncher"
                Style="{StaticResource SettingsGroupTitleStyle}"
                Margin="{StaticResource XSmallBottomMargin}"/>

@@ -149,7 +149,7 @@
            </HyperlinkButton>

            <TextBlock 
-                Text="Attribution"
+                x:Uid="AttributionTitle"
                Style="{StaticResource SettingsGroupTitleStyle}" />

            <HyperlinkButton NavigateUri="https://github.com/Wox-launcher/Wox/">
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
@@ -59,7 +59,7 @@
                    Width="{StaticResource SidePanelWidth}"
                    Grid.Column="1">

-            <TextBlock x:Uid="About_This_Feature"
+            <TextBlock x:Uid="About_FileExplorerPreview"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Margin="{StaticResource XSmallBottomMargin}"/>

--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/PowerRenamePage.xaml
@@ -99,7 +99,7 @@
                    Width="{StaticResource SidePanelWidth}"
                    Grid.Column="1">

-            <TextBlock x:Uid="About_This_Feature"
+            <TextBlock x:Uid="About_PowerRename"
                       Style="{StaticResource SettingsGroupTitleStyle}"
                       Margin="{StaticResource XSmallBottomMargin}"/>

--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/ShortcutGuidePage.xaml
@@ -53,11 +53,12 @@

            <muxc:NumberBox x:Uid="ShortcutGuide_PressTime"
                            Minimum="100"
+                           
                            SpinButtonPlacementMode="Inline"
                            HorizontalAlignment="Left"
                            Margin="{StaticResource SmallTopMargin}"
                            Value="{ Binding Mode=TwoWay, Path=PressTime}"
-                            IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
+                            IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}" SmallChange="50" LargeChange="100"/>

            <Slider x:Uid="ShortcutGuide_OverlayOpacity"
                    Minimum="0"
@@ -66,9 +67,8 @@
                    HorizontalAlignment="Left"
                    Margin="{StaticResource MediumTopMargin}"
                    IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"/>
-
-
-            <muxc:RadioButtons x:Uid="ShortcutGuide_Theme"
+            
+            <muxc:RadioButtons x:Uid="RadioButtons_Name_Theme" 
                               Margin="{StaticResource SmallTopMargin}"
                               IsEnabled="{ Binding Mode=TwoWay, Path=IsEnabled}"
                               SelectedIndex="{ Binding Mode=TwoWay, Path=ThemeIndex}">
@@ -91,7 +91,7 @@
            Grid.Column="1">

            <TextBlock 
-                x:Uid="About_This_Feature"
+                x:Uid="About_ShortcutGuide"
                Style="{StaticResource SettingsGroupTitleStyle}"
                Margin="{StaticResource XSmallBottomMargin}"/>