[Settings]Adding a Dashboard Panel (#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 <niels.laute@live.nl>
This commit is contained in:
Laszlo Nemeth
2023-10-20 14:23:25 +02:00
committed by GitHub
parent 8c22f0c485
commit 1f936df3eb
24 changed files with 1721 additions and 49 deletions

View File

@@ -0,0 +1,446 @@
<Page
x:Class="Microsoft.PowerToys.Settings.UI.Views.DashboardPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Lib="using:Microsoft.PowerToys.Settings.UI.Library"
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
xmlns:converters="using:CommunityToolkit.WinUI.Converters"
xmlns:custom="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:localConverters="using:Microsoft.PowerToys.Settings.UI.Converters"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewmodels="using:Microsoft.PowerToys.Settings.UI.ViewModels"
AutomationProperties.LandmarkType="Main"
DataContext="DashboardViewModel"
mc:Ignorable="d">
<Page.Resources>
<localConverters:ModuleItemTemplateSelector
x:Key="ModuleItemTemplateSelector"
ButtonTemplate="{StaticResource ModuleItemButtonTemplate}"
KBMTemplate="{StaticResource ModuleItemKBMTemplate}"
ShortcutTemplate="{StaticResource ModuleItemShortcutTemplate}"
TextTemplate="{StaticResource ModuleItemTextTemplate}" />
<converters:CollectionVisibilityConverter x:Key="CollectionVisibilityConverter" />
<Style x:Name="KeysListViewContainerStyle" TargetType="ListViewItem">
<Setter Property="IsTabStop" Value="False" />
</Style>
<localConverters:UpdateStateToBoolConverter x:Key="UpdateStateToBoolConverter" />
<converters:BoolToVisibilityConverter x:Key="BoolToVisibilityConverter" />
<converters:BoolNegationConverter x:Key="BoolNegationConverter" />
<converters:BoolToVisibilityConverter
x:Key="BoolToInvertedVisibilityConverter"
FalseValue="Visible"
TrueValue="Collapsed" />
<DataTemplate x:Key="OriginalKeyTemplate" x:DataType="x:String">
<custom:KeyVisual Content="{Binding}" VisualType="SmallOutline" />
</DataTemplate>
<DataTemplate x:Key="RemappedKeyTemplate" x:DataType="x:String">
<custom:KeyVisual Content="{Binding}" VisualType="Small" />
</DataTemplate>
<DataTemplate x:Key="ModuleItemTextTemplate" x:DataType="viewmodels:DashboardModuleTextItem">
<TextBlock
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind Label, Mode=OneWay}"
TextWrapping="WrapWholeWords" />
</DataTemplate>
<DataTemplate x:Key="ModuleItemButtonTemplate" x:DataType="viewmodels:DashboardModuleButtonItem">
<Button
HorizontalAlignment="Stretch"
Click="{x:Bind ButtonClickHandler, Mode=OneWay}"
Content="{x:Bind ButtonTitle}" />
</DataTemplate>
<DataTemplate x:Key="ModuleItemShortcutTemplate" x:DataType="viewmodels:DashboardModuleShortcutItem">
<Grid ColumnSpacing="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Border
Padding="8,4"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{StaticResource ControlCornerRadius}">
<ItemsControl
AutomationProperties.AccessibilityView="Raw"
IsTabStop="False"
ItemsSource="{x:Bind Path=Shortcut, Mode=TwoWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="12" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<custom:KeyVisual
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{Binding}"
IsTabStop="False"
VisualType="TextOnly" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind Label, Mode=OneWay}"
TextWrapping="WrapWholeWords" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="ModuleItemKBMTemplate" x:DataType="viewmodels:DashboardModuleKBMItem">
<Button x:Uid="DashboardKBMShowMappingsButton" HorizontalAlignment="Stretch">
<Button.Flyout>
<Flyout x:Name="DetailsFlyout" Placement="Bottom">
<StackPanel Orientation="Vertical" Spacing="4">
<ItemsControl ItemsSource="{x:Bind Path=RemapKeys, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="Lib:KeysDataModel">
<StackPanel Orientation="Horizontal">
<Border
Padding="8,4"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{StaticResource ControlCornerRadius}">
<ItemsControl
AutomationProperties.AccessibilityView="Raw"
IsTabStop="False"
ItemsSource="{x:Bind GetMappedOriginalKeys()}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="12" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<custom:KeyVisual
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{Binding}"
IsTabStop="False"
VisualType="TextOnly" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<custom:IsEnabledTextBlock
x:Uid="To"
Margin="8,0,8,0"
VerticalAlignment="Center"
Style="{StaticResource SecondaryIsEnabledTextBlockStyle}" />
<Border
Padding="8,4"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource AccentFillColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{StaticResource ControlCornerRadius}">
<ItemsControl
AutomationProperties.AccessibilityView="Raw"
IsTabStop="False"
ItemsSource="{x:Bind GetMappedNewRemapKeys()}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="12" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<custom:KeyVisual
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{Binding}"
FontSize="12"
Foreground="{ThemeResource AccentFillColorDefaultBrush}"
IsTabStop="False"
VisualType="TextOnly" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{x:Bind Path=RemapShortcuts, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate x:DataType="Lib:AppSpecificKeysDataModel">
<StackPanel Orientation="Horizontal">
<Border
Padding="8,4"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{StaticResource ControlCornerRadius}">
<ItemsControl
AutomationProperties.AccessibilityView="Raw"
IsTabStop="False"
ItemsSource="{x:Bind GetMappedOriginalKeys()}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="12" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<custom:KeyVisual
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{Binding}"
IsTabStop="False"
VisualType="TextOnly" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<custom:IsEnabledTextBlock
x:Uid="To"
Margin="8,0,8,0"
VerticalAlignment="Center"
Style="{StaticResource SecondaryIsEnabledTextBlockStyle}" />
<Border
Padding="8,4"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource AccentFillColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{StaticResource ControlCornerRadius}">
<ItemsControl
AutomationProperties.AccessibilityView="Raw"
IsTabStop="False"
ItemsSource="{x:Bind GetMappedNewRemapKeys()}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" Spacing="12" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<custom:KeyVisual
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
Content="{Binding}"
Foreground="{ThemeResource AccentFillColorDefaultBrush}"
IsTabStop="False"
VisualType="TextOnly" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Border>
<TextBlock
Margin="4,0,0,0"
VerticalAlignment="Center"
Foreground="{ThemeResource AccentFillColorDefaultBrush}"
Text="{x:Bind TargetApp}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Flyout>
</Button.Flyout>
</Button>
</DataTemplate>
</Page.Resources>
<Grid Margin="16,0,0,0" RowSpacing="24">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock
x:Uid="DashboardTitle"
VerticalAlignment="Center"
Style="{StaticResource TitleTextBlockStyle}" />
<InfoBar
x:Uid="UpdateAvailable"
Margin="0,0,16,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
CornerRadius="8"
IsClosable="False"
IsOpen="{x:Bind ViewModel.UpdateAvailable, Mode=OneWay}"
Severity="Informational">
<InfoBar.ActionButton>
<Button x:Uid="LearnMore" Click="SWVersionButtonClicked" />
</InfoBar.ActionButton>
</InfoBar>
<ScrollViewer x:Name="MainScrollViewer" Grid.Row="1">
<StackPanel Padding="0,0,16,16" Orientation="Vertical">
<TextBlock
x:Uid="EnabledModules"
Margin="0,0,0,12"
Style="{StaticResource SubtitleTextBlockStyle}" />
<ItemsRepeater x:Name="DashboardView" ItemsSource="{x:Bind ViewModel.ActiveModules, Mode=OneWay}">
<ItemsRepeater.Layout>
<controls:StaggeredLayout
ColumnSpacing="8"
DesiredColumnWidth="378"
RowSpacing="8" />
</ItemsRepeater.Layout>
<ItemsRepeater.ItemTemplate>
<DataTemplate x:DataType="viewmodels:DashboardListItem">
<Grid
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{StaticResource OverlayCornerRadius}"
RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Border Grid.RowSpan="2" Opacity="0.05">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,3">
<GradientStop Offset="0.5" Color="{x:Bind AccentColor, Mode=OneWay}" />
<GradientStop Offset="0.9" Color="Transparent" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Grid Margin="16,8,16,0" ColumnSpacing="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Width="20" Margin="0,0,0,0">
<Image.Source>
<BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
</Image.Source>
</Image>
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
FontWeight="SemiBold"
Text="{x:Bind Label, Mode=OneWay}"
TextTrimming="CharacterEllipsis" />
<FontIcon
Grid.Column="2"
Width="20"
Margin="0,0,-12,0"
FontSize="16"
Glyph="&#xE72E;"
Visibility="{x:Bind IsLocked, Converter={StaticResource BoolToInvertedVisibilityConverter}, ConverterParameter=True, Mode=OneWay}">
<ToolTipService.ToolTip>
<TextBlock x:Uid="GPO_IsSettingForcedText" TextWrapping="WrapWholeWords" />
</ToolTipService.ToolTip>
</FontIcon>
<ToggleSwitch
Grid.Column="3"
Margin="0,-2,0,0"
HorizontalAlignment="Right"
IsEnabled="{x:Bind IsLocked, Converter={StaticResource BoolNegationConverter}, ConverterParameter=True, Mode=OneWay}"
IsOn="{x:Bind IsEnabled, Mode=TwoWay}"
OffContent=""
OnContent=""
Style="{StaticResource RightAlignedCompactToggleSwitchStyle}" />
</Grid>
<ItemsControl
Grid.Row="1"
Margin="16,8,16,16"
ItemTemplateSelector="{StaticResource ModuleItemTemplateSelector}"
ItemsSource="{x:Bind DashboardModuleItems, Mode=OneWay}"
Visibility="{x:Bind IsEnabled, Converter={StaticResource BoolToVisibilityConverter}, Mode=OneWay}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Spacing="4" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
</DataTemplate>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
<TextBlock
x:Uid="DisabledModules"
Margin="0,24,0,12"
Style="{StaticResource SubtitleTextBlockStyle}" />
<ItemsRepeater ItemsSource="{x:Bind ViewModel.DisabledModules, Mode=OneWay}">
<ItemsRepeater.Layout>
<controls:StaggeredLayout
ColumnSpacing="8"
DesiredColumnWidth="378"
RowSpacing="8" />
</ItemsRepeater.Layout>
<ItemsRepeater.ItemTemplate>
<DataTemplate x:DataType="viewmodels:DashboardListItem">
<Grid
Padding="16,12"
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{StaticResource OverlayCornerRadius}"
RowSpacing="12">
<Grid ColumnSpacing="12">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Width="20">
<Image.Source>
<BitmapImage UriSource="{x:Bind Icon, Mode=OneWay}" />
</Image.Source>
</Image>
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
FontWeight="SemiBold"
Text="{x:Bind Label, Mode=OneWay}"
TextTrimming="CharacterEllipsis" />
<FontIcon
Grid.Column="2"
Width="20"
Margin="0,0,-12,0"
FontSize="16"
Glyph="&#xE72E;"
Visibility="{x:Bind IsLocked, Converter={StaticResource BoolToInvertedVisibilityConverter}, ConverterParameter=True, Mode=OneWay}">
<ToolTipService.ToolTip>
<TextBlock x:Uid="GPO_IsSettingForcedText" TextWrapping="WrapWholeWords" />
</ToolTipService.ToolTip>
</FontIcon>
<ToggleSwitch
Grid.Column="3"
Margin="0,-2,0,0"
HorizontalAlignment="Right"
IsEnabled="{x:Bind IsLocked, Converter={StaticResource BoolNegationConverter}, ConverterParameter=True, Mode=OneWay}"
IsOn="{x:Bind IsEnabled, Mode=TwoWay}"
OffContent=""
OnContent=""
Style="{StaticResource RightAlignedCompactToggleSwitchStyle}" />
</Grid>
</Grid>
</DataTemplate>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</StackPanel>
</ScrollViewer>
</Grid>
</Page>

View File

@@ -0,0 +1,58 @@
// 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.Threading;
using System.Threading.Tasks;
using ManagedCommon;
using Microsoft.PowerToys.Settings.UI.Helpers;
using Microsoft.PowerToys.Settings.UI.Library;
using Microsoft.PowerToys.Settings.UI.OOBE.Views;
using Microsoft.PowerToys.Settings.UI.ViewModels;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Windows.Storage.Pickers;
namespace Microsoft.PowerToys.Settings.UI.Views
{
/// <summary>
/// Dashboard Settings Page.
/// </summary>
public sealed partial class DashboardPage : Page, IRefreshablePage
{
/// <summary>
/// Gets or sets view model.
/// </summary>
public DashboardViewModel ViewModel { get; set; }
/// <summary>
/// Initializes a new instance of the <see cref="DashboardPage"/> class.
/// Dashboard Settings page constructor.
/// </summary>
public DashboardPage()
{
InitializeComponent();
var settingsUtils = new SettingsUtils();
ViewModel = new DashboardViewModel(
SettingsRepository<GeneralSettings>.GetInstance(settingsUtils), ShellPage.SendDefaultIPCMessage);
DataContext = ViewModel;
}
public void RefreshEnabledState()
{
ViewModel.ModuleEnabledChangedOnSettingsPage();
}
private void SWVersionButtonClicked(object sender, RoutedEventArgs e)
{
ViewModel.SWVersionButtonClicked();
}
private void SettingsButtonClicked(object sender, RoutedEventArgs e)
{
ViewModel.SettingsButtonClicked(sender);
}
}
}

View File

@@ -73,7 +73,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
}
}
private int FilterRemapKeysList(List<KeysDataModel> remapKeysList)
public static int FilterRemapKeysList(List<KeysDataModel> remapKeysList)
{
if (remapKeysList != null)
{

View File

@@ -85,10 +85,16 @@
<SolidColorBrush x:Key="NavigationViewContentGridBorderBrush" Color="Transparent" />
</NavigationView.Resources>
<NavigationView.MenuItems>
<NavigationViewItem
x:Uid="Shell_Dashboard"
helpers:NavHelper.NavigateTo="views:DashboardPage"
Icon="{ui:FontIcon Glyph=&#xE80F;}" />
<NavigationViewItem
x:Uid="Shell_General"
helpers:NavHelper.NavigateTo="views:GeneralPage"
Icon="{ui:BitmapIcon Source=/Assets/Settings/FluentIcons/FluentIconsSettings.png}" />
Icon="{ui:FontIcon Glyph=&#xE713;}" />
<NavigationViewItemSeparator />
<NavigationViewItem
x:Uid="Shell_AlwaysOnTop"

View File

@@ -236,7 +236,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
public void Refresh()
{
shellFrame.Navigate(typeof(GeneralPage));
shellFrame.Navigate(typeof(DashboardPage));
}
// Tell the current page view model to update
@@ -361,7 +361,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
internal static void EnsurePageIsSelected()
{
NavigationService.EnsurePageIsSelected(typeof(GeneralPage));
NavigationService.EnsurePageIsSelected(typeof(DashboardPage));
}
private void SetTitleBar()