[Settings]Adding a Dashboard Panel (microsoft#29023)

* Dashboard: modifying page content + adding SW version button.

* Visual tweaks and minor viewmodel changes

* Updated spacing

* Adding Settings icon

* Settiing the Dashboard page as the default one. Adding functionality to switch to settings pages from the Dashboard page. Localizing texts.

* fixing csproj file

* Reimplementing Active modules handling, showing only the active modules (and not having invisible inactive modules).

* Removing unneccessary binding

* Fix text wrapping

* Adding Registry previewer launch, adding activation mode for FindMyMouse and QuickAccent, modify File Locksmith description.

* Spell checker fix typo

* Adding GPO-blocked state, modifying buttons: adding description, icon.

* Modifying dashboard button layout

* Use SettingsCard instead of button

* Restructuring the dashboard panel

* Removing togglebuttons from the left panel. Showing only active modules. Adding key remappings (to KBM)

* Removing settings buttons, removing descriptions, icons from buttons. Add update of remapped keys, shortcuts.

* Refactoring dashboard

* Making list always visible and fixing scrolling behavior

* Adding background gradient to cards

* Removing keyboard manager's key mappings, minor changes in texts, fixing enabled state when GPO-enabled.

* Use ListView instead of ItemsRepeater

* Updates

* removing right panel with all modules. Extending "left" panel with toggleswitches, showing all modules.

* Separate lists

* Adding Flyout with key remappings for KBM module, adding IsLocked property, icons

* Visual tweaks

* Tweaks

* Fixing lock icon margin

* Minor fixes.

* Removing unused resources

* Make Dashboard default when coming from the OOBE General

* Removed the Previous, Next Layout buttons from FancyZones. Added activation information

---------

Co-authored-by: Niels Laute <[email protected]>

src/common/Common.UI/SettingsDeepLink.cs

@@ -28,6 +28,7 @@ public enum SettingsWindow
             PowerOCR,
             RegistryPreview,
             CropAndLock,
+            Dashboard,
         }
 
         private static string SettingsWindowNameToString(SettingsWindow value)
@@ -68,6 +69,8 @@ private static string SettingsWindowNameToString(SettingsWindow value)
                     return "RegistryPreview";
                 case SettingsWindow.CropAndLock:
                     return "CropAndLock";
+                case SettingsWindow.Dashboard:
+                    return "Dashboard";
                 default:
                     {
                         return string.Empty;

src/runner/main.cpp

@@ -81,7 +81,7 @@ inline wil::unique_mutex_nothrow create_msi_mutex()
 void open_menu_from_another_instance(std::optional<std::string> settings_window)
 {
     const HWND hwnd_main = FindWindowW(L"PToyTrayIconWindow", nullptr);
-    LPARAM msg = static_cast<LPARAM>(ESettingsWindowNames::Overview);
+    LPARAM msg = static_cast<LPARAM>(ESettingsWindowNames::Dashboard);
     if (settings_window.has_value() && settings_window.value() != "")
     {
         msg = static_cast<LPARAM>(ESettingsWindowNames_from_string(settings_window.value()));

src/runner/settings_window.cpp

@@ -596,7 +596,7 @@ void open_settings_window(std::optional<std::wstring> settings_window, bool show
                 }
                 else
                 {
-                    current_settings_ipc->send(L"{\"ShowYourself\":\"Overview\"}");
+                    current_settings_ipc->send(L"{\"ShowYourself\":\"Dashboard\"}");
                 }
             }
         }
@@ -676,6 +676,8 @@ std::string ESettingsWindowNames_to_string(ESettingsWindowNames value)
         return "RegistryPreview";
     case ESettingsWindowNames::CropAndLock:
         return "CropAndLock";
+    case ESettingsWindowNames::Dashboard:
+        return "Dashboard";
     default:
     {
         Logger::error(L"Can't convert ESettingsWindowNames value={} to string", static_cast<int>(value));
@@ -755,11 +757,15 @@ ESettingsWindowNames ESettingsWindowNames_from_string(std::string value)
     {
         return ESettingsWindowNames::CropAndLock;
     }
+    else if (value == "Dashboard")
+    {
+        return ESettingsWindowNames::Dashboard;
+    }
     else
     {
         Logger::error(L"Can't convert string value={} to ESettingsWindowNames", winrt::to_hstring(value));
         assert(false);
     }
 
-    return ESettingsWindowNames::Overview;
+    return ESettingsWindowNames::Dashboard;
 }

src/runner/settings_window.h

@@ -4,7 +4,8 @@
 
 enum class ESettingsWindowNames
 {
-    Overview = 0,
+    Dashboard = 0,
+    Overview,
     Awake,
     ColorPicker,
     FancyZones,

src/settings-ui/Settings.UI/Converters/ModuleItemTemplateSelector.cs

@@ -0,0 +1,33 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.PowerToys.Settings.UI.ViewModels;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace Microsoft.PowerToys.Settings.UI.Converters
+{
+    public class ModuleItemTemplateSelector : DataTemplateSelector
+    {
+        public DataTemplate TextTemplate { get; set; }
+
+        public DataTemplate ButtonTemplate { get; set; }
+
+        public DataTemplate ShortcutTemplate { get; set; }
+
+        public DataTemplate KBMTemplate { get; set; }
+
+        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
+        {
+            switch (item)
+            {
+                case DashboardModuleButtonItem: return ButtonTemplate;
+                case DashboardModuleShortcutItem: return ShortcutTemplate;
+                case DashboardModuleTextItem: return TextTemplate;
+                case DashboardModuleKBMItem: return KBMTemplate;
+                default: return TextTemplate;
+            }
+        }
+    }
+}

src/settings-ui/Settings.UI/Converters/NegativeBoolToVisibilityConverter.cs

@@ -0,0 +1,37 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using System;
+using System.Globalization;
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Data;
+
+namespace Microsoft.PowerToys.Settings.UI.Converters
+{
+    public class NegativeBoolToVisibilityConverter : IValueConverter
+    {
+        object IValueConverter.Convert(object value, Type targetType, object parameter, string language)
+        {
+            if ((bool)value)
+            {
+                return Visibility.Collapsed;
+            }
+
+            return Visibility.Visible;
+        }
+
+        object IValueConverter.ConvertBack(object value, Type targetType, object parameter, string language)
+        {
+            if (value is Visibility)
+            {
+                if ((Visibility)value == Visibility.Visible)
+                {
+                    return false;
+                }
+            }
+
+            return true;
+        }
+    }
+}

src/settings-ui/Settings.UI/PowerToys.Settings.csproj

@@ -21,6 +21,9 @@
     <!-- MRT from windows app sdk will search for a pri file with the same name of the module before defaulting to resources.pri -->
     <ProjectPriFileName>PowerToys.Settings.pri</ProjectPriFileName>
   </PropertyGroup>
+  <ItemGroup>
+    <None Remove="SettingsXAML\Views\DashboardPage.xaml" />
+  </ItemGroup>
 
   <ItemGroup>
     <Page Remove="SettingsXAML\App.xaml" />
@@ -124,5 +127,11 @@
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </None>
   </ItemGroup>
+
+  <ItemGroup>
+    <Page Update="SettingsXAML\Views\DashboardPage.xaml">
+      <XamlRuntime>$(DefaultXamlRuntime)</XamlRuntime>
+    </Page>
+  </ItemGroup>
 
-</Project>
+</Project>

src/settings-ui/Settings.UI/SettingsXAML/App.xaml.cs

@@ -60,7 +60,7 @@ private enum Arguments
 
         public bool ShowScoobe { get; set; }
 
-        public Type StartupPage { get; set; } = typeof(Views.GeneralPage);
+        public Type StartupPage { get; set; } = typeof(Views.DashboardPage);
 
         public static Action<string> IPCMessageReceivedCallback { get; set; }
 
@@ -218,8 +218,8 @@ protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs ar
                 settingsWindow.NavigateToSection(StartupPage);
                 ShowMessageDialog("The application is running in Debug mode.", "DEBUG");
 #else
-                /* If we try to run Settings as a standalone app, it will start PowerToys.exe if not running and open Settings again through it in the General page. */
-                SettingsDeepLink.OpenSettings(SettingsDeepLink.SettingsWindow.Overview, true);
+                /* If we try to run Settings as a standalone app, it will start PowerToys.exe if not running and open Settings again through it in the Dashboard page. */
+                SettingsDeepLink.OpenSettings(SettingsDeepLink.SettingsWindow.Dashboard, true);
                 Exit();
 #endif
             }
@@ -380,6 +380,7 @@ public static Type GetPage(string settingWindow)
         {
             switch (settingWindow)
             {
+                case "Dashboard": return typeof(DashboardPage);
                 case "Overview": return typeof(GeneralPage);
                 case "AlwaysOnTop": return typeof(AlwaysOnTopPage);
                 case "Awake": return typeof(AwakePage);
@@ -404,9 +405,9 @@ public static Type GetPage(string settingWindow)
                 case "Peek": return typeof(PeekPage);
                 case "CropAndLock": return typeof(CropAndLockPage);
                 default:
-                    // Fallback to general
+                    // Fallback to Dashboard
                     Debug.Assert(false, "Unexpected SettingsWindow argument value");
-                    return typeof(GeneralPage);
+                    return typeof(DashboardPage);
             }
         }
     }

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyVisual.cs

@@ -116,7 +116,7 @@ private void Update()
 
                         case 91: // The left Windows key
                         case 92: // The right Windows key
-                            PathIcon winIcon = XamlReader.Load(@"<PathIcon xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" Data=""M9,17V9h8v8ZM0,17V9H8v8ZM9,8V0h8V8ZM0,8V0H8V8Z"" />") as PathIcon;
+                            PathIcon winIcon = XamlReader.Load(@"<PathIcon xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"" Data=""M683 1229H0V546h683v683zm819 0H819V546h683v683zm-819 819H0v-683h683v683zm819 0H819v-683h683v683z"" />") as PathIcon;
                             Viewbox winIconContainer = new Viewbox();
                             winIconContainer.Child = winIcon;
                             winIconContainer.HorizontalAlignment = HorizontalAlignment.Center;
@@ -143,6 +143,10 @@ public Style GetStyleSize(string styleName)
             {
                 return (Style)App.Current.Resources["SmallOutline" + styleName];
             }
+            else if (VisualType == VisualType.TextOnly)
+            {
+                return (Style)App.Current.Resources["Only" + styleName];
+            }
             else
             {
                 return (Style)App.Current.Resources["Default" + styleName];
@@ -181,6 +185,7 @@ public enum VisualType
     {
         Small,
         SmallOutline,
+        TextOnly,
         Large,
     }
 }

src/settings-ui/Settings.UI/SettingsXAML/Controls/KeyVisual/KeyVisual.xaml

@@ -5,9 +5,7 @@
 
     <x:Double x:Key="DefaultIconSize">16</x:Double>
     <x:Double x:Key="SmallIconSize">12</x:Double>
-    <Style
-        x:Key="DefaultTextKeyVisualStyle"
-        TargetType="local:KeyVisual">
+    <Style x:Key="DefaultTextKeyVisualStyle" TargetType="local:KeyVisual">
         <Setter Property="MinWidth" Value="56" />
         <Setter Property="MinHeight" Value="48" />
         <Setter Property="Background" Value="{ThemeResource AccentButtonBackground}" />
@@ -23,26 +21,6 @@
             <Setter.Value>
                 <ControlTemplate TargetType="local:KeyVisual">
                     <Grid>
-                        <Grid>
-                            <Rectangle
-                                x:Name="ContentHolder"
-                                Height="{TemplateBinding Height}"
-                                MinWidth="{TemplateBinding MinWidth}"
-                                Fill="{TemplateBinding Background}"
-                                RadiusX="4"
-                                RadiusY="4"
-                                Stroke="{TemplateBinding BorderBrush}"
-                                StrokeThickness="{TemplateBinding BorderThickness}" />
-                            <ContentPresenter
-                                x:Name="KeyPresenter"
-                                Margin="{TemplateBinding Padding}"
-                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-                                VerticalAlignment="Center"
-                                Content="{TemplateBinding Content}"
-                                FontSize="{TemplateBinding FontSize}"
-                                FontWeight="{TemplateBinding FontWeight}"
-                                Foreground="{TemplateBinding Foreground}" />
-                        </Grid>
                         <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                                 <VisualState x:Name="Normal" />
@@ -67,6 +45,26 @@
                                 </VisualState>
                             </VisualStateGroup>
                         </VisualStateManager.VisualStateGroups>
+                        <Grid>
+                            <Rectangle
+                                x:Name="ContentHolder"
+                                Height="{TemplateBinding Height}"
+                                MinWidth="{TemplateBinding MinWidth}"
+                                Fill="{TemplateBinding Background}"
+                                RadiusX="4"
+                                RadiusY="4"
+                                Stroke="{TemplateBinding BorderBrush}"
+                                StrokeThickness="{TemplateBinding BorderThickness}" />
+                            <ContentPresenter
+                                x:Name="KeyPresenter"
+                                Margin="{TemplateBinding Padding}"
+                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                VerticalAlignment="Center"
+                                Content="{TemplateBinding Content}"
+                                FontSize="{TemplateBinding FontSize}"
+                                FontWeight="{TemplateBinding FontWeight}"
+                                Foreground="{TemplateBinding Foreground}" />
+                        </Grid>
                     </Grid>
                 </ControlTemplate>
             </Setter.Value>
@@ -101,6 +99,7 @@
     </Style>
 
 
+
     <Style
         x:Key="DefaultIconKeyVisualStyle"
         BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
@@ -141,4 +140,35 @@
         <Setter Property="FontSize" Value="9" />
         <Setter Property="HorizontalContentAlignment" Value="Center" />
     </Style>
+
+    <Style
+        x:Key="OnlyTextKeyVisualStyle"
+        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
+        TargetType="local:KeyVisual">
+        <Setter Property="MinHeight" Value="12" />
+        <Setter Property="MinWidth" Value="12" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="Padding" Value="0" />
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+    </Style>
+
+    <Style
+        x:Key="OnlyIconKeyVisualStyle"
+        BasedOn="{StaticResource DefaultTextKeyVisualStyle}"
+        TargetType="local:KeyVisual">
+        <Setter Property="MinHeight" Value="10" />
+        <Setter Property="MinWidth" Value="10" />
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="FontFamily" Value="{ThemeResource SymbolThemeFontFamily}" />
+        <Setter Property="FontWeight" Value="Normal" />
+        <Setter Property="Padding" Value="0,0,0,3" />
+        <!--<Setter Property="FontSize" Value="9" />-->
+        <Setter Property="HorizontalContentAlignment" Value="Center" />
+    </Style>
 </ResourceDictionary>

src/settings-ui/Settings.UI/SettingsXAML/Controls/ShortcutControl/ShortcutWithTextLabelControl.xaml

@@ -23,9 +23,7 @@
             ItemsSource="{x:Bind Keys}">
             <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
-                    <StackPanel
-                        Orientation="Horizontal"
-                        Spacing="4" />
+                    <StackPanel Orientation="Horizontal" Spacing="4" />
                 </ItemsPanelTemplate>
             </ItemsControl.ItemsPanel>
             <ItemsControl.ItemTemplate>
@@ -41,7 +39,6 @@
         </ItemsControl>
         <toolkitcontrols:MarkdownTextBlock
             Grid.Column="1"
-            Margin="8,0,0,0"
             VerticalAlignment="Center"
             Background="Transparent"
             Text="{x:Bind Text}" />

src/settings-ui/Settings.UI/SettingsXAML/OOBE/Views/OobeOverview.xaml.cs

@@ -25,7 +25,7 @@ private void SettingsLaunchButton_Click(object sender, Microsoft.UI.Xaml.RoutedE
         {
             if (OobeShellPage.OpenMainWindowCallback != null)
             {
-                OobeShellPage.OpenMainWindowCallback(typeof(GeneralPage));
+                OobeShellPage.OpenMainWindowCallback(typeof(DashboardPage));
             }
 
             ViewModel.LogOpeningSettingsEvent();

src/settings-ui/Settings.UI/SettingsXAML/OOBE/Views/OobeOverviewAlternate.xaml.cs

@@ -31,7 +31,7 @@ private void SettingsLaunchButton_Click(object sender, Microsoft.UI.Xaml.RoutedE
         {
             if (OobeShellPage.OpenMainWindowCallback != null)
             {
-                OobeShellPage.OpenMainWindowCallback(typeof(GeneralPage));
+                OobeShellPage.OpenMainWindowCallback(typeof(DashboardPage));
             }
 
             ViewModel.LogOpeningSettingsEvent();

src/settings-ui/Settings.UI/SettingsXAML/OOBE/Views/OobeOverviewPlaceholder.xaml.cs

@@ -54,7 +54,7 @@ private void SettingsLaunchButton_Click(object sender, Microsoft.UI.Xaml.RoutedE
         {
             if (OobeShellPage.OpenMainWindowCallback != null)
             {
-                OobeShellPage.OpenMainWindowCallback(typeof(GeneralPage));
+                OobeShellPage.OpenMainWindowCallback(typeof(DashboardPage));
             }
 
             ViewModel.LogOpeningSettingsEvent();