[Settings][Dashboard]Switch to settings page on module clicked (#29554)

* Settings Dashboard: Adding feature switch to settings page if module panel clicked.

* fixing xaml styling

* Refactoring, creating common methods GetModuleAccentColor and GetModulePageType

* Correct button style to be invisible. Add the same functionality to the disabled modules.

* fixing XAML styling
This commit is contained in:
Laszlo Nemeth 2023-11-09 15:43:28 +01:00 committed by GitHub
parent 912d7ec060
commit 9620d265ae
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 225 additions and 150 deletions

View File

@ -5,6 +5,8 @@
using global::PowerToys.GPOWrapper;
using ManagedCommon;
using Microsoft.PowerToys.Settings.UI.Library;
using Microsoft.PowerToys.Settings.UI.Views;
using Windows.UI;
namespace Microsoft.PowerToys.Settings.UI.Helpers
{
@ -129,5 +131,69 @@ namespace Microsoft.PowerToys.Settings.UI.Helpers
default: return GpoRuleConfigured.Unavailable;
}
}
public static Color GetModuleAccentColor(ModuleType moduleType)
{
return moduleType switch
{
ModuleType.AlwaysOnTop => Color.FromArgb(255, 74, 196, 242), // #4ac4f2
ModuleType.Awake => Color.FromArgb(255, 40, 177, 233), // #28b1e9
ModuleType.ColorPicker => Color.FromArgb(255, 7, 129, 211), // #0781d3
ModuleType.CropAndLock => Color.FromArgb(255, 32, 166, 228), // #20a6e4
ModuleType.EnvironmentVariables => Color.FromArgb(255, 16, 132, 208), // #1084d0
ModuleType.FancyZones => Color.FromArgb(255, 65, 209, 247), // #41d1f7
ModuleType.FileLocksmith => Color.FromArgb(255, 245, 161, 20), // #f5a114
ModuleType.FindMyMouse => Color.FromArgb(255, 104, 109, 112), // #686d70
ModuleType.Hosts => Color.FromArgb(255, 16, 132, 208), // #1084d0
ModuleType.ImageResizer => Color.FromArgb(255, 85, 207, 248), // #55cff8
ModuleType.KeyboardManager => Color.FromArgb(255, 224, 231, 238), // #e0e7ee
ModuleType.MouseHighlighter => Color.FromArgb(255, 17, 126, 199), // #117ec7
ModuleType.MouseJump => Color.FromArgb(255, 240, 240, 239), // #f0f0ef
ModuleType.MousePointerCrosshairs => Color.FromArgb(255, 25, 115, 182), // #1973b6
ModuleType.MouseWithoutBorders => Color.FromArgb(255, 31, 164, 227), // #1fa4e3
ModuleType.PastePlain => Color.FromArgb(255, 243, 156, 16), // #f39c10
ModuleType.Peek => Color.FromArgb(255, 255, 214, 103), // #ffd667
ModuleType.PowerRename => Color.FromArgb(255, 43, 186, 243), // #2bbaf3
ModuleType.PowerLauncher => Color.FromArgb(255, 51, 191, 240), // #33bff0
ModuleType.PowerAccent => Color.FromArgb(255, 84, 89, 92), // #54595c
ModuleType.RegistryPreview => Color.FromArgb(255, 17, 80, 138), // #11508a
ModuleType.MeasureTool => Color.FromArgb(255, 135, 144, 153), // #879099
ModuleType.ShortcutGuide => Color.FromArgb(255, 193, 202, 209), // #c1cad1
ModuleType.PowerOCR => Color.FromArgb(255, 24, 153, 224), // #1899e0
_ => Color.FromArgb(255, 255, 255, 255), // never called, all values listed above
};
}
public static System.Type GetModulePageType(ModuleType moduleType)
{
return moduleType switch
{
ModuleType.AlwaysOnTop => typeof(AlwaysOnTopPage),
ModuleType.Awake => typeof(AwakePage),
ModuleType.ColorPicker => typeof(ColorPickerPage),
ModuleType.CropAndLock => typeof(CropAndLockPage),
ModuleType.EnvironmentVariables => typeof(EnvironmentVariablesPage),
ModuleType.FancyZones => typeof(FancyZonesPage),
ModuleType.FileLocksmith => typeof(FileLocksmithPage),
ModuleType.FindMyMouse => typeof(MouseUtilsPage),
ModuleType.Hosts => typeof(HostsPage),
ModuleType.ImageResizer => typeof(ImageResizerPage),
ModuleType.KeyboardManager => typeof(KeyboardManagerPage),
ModuleType.MouseHighlighter => typeof(MouseUtilsPage),
ModuleType.MouseJump => typeof(MouseUtilsPage),
ModuleType.MousePointerCrosshairs => typeof(MouseUtilsPage),
ModuleType.MouseWithoutBorders => typeof(MouseWithoutBordersPage),
ModuleType.PastePlain => typeof(PastePlainPage),
ModuleType.Peek => typeof(PeekPage),
ModuleType.PowerRename => typeof(PowerRenamePage),
ModuleType.PowerLauncher => typeof(PowerLauncherPage),
ModuleType.PowerAccent => typeof(PowerAccentPage),
ModuleType.RegistryPreview => typeof(RegistryPreviewPage),
ModuleType.MeasureTool => typeof(MeasureToolPage),
ModuleType.ShortcutGuide => typeof(ShortcutGuidePage),
ModuleType.PowerOCR => typeof(PowerOcrPage),
_ => typeof(DashboardPage), // never called, all values listed above
};
}
}
}

View File

@ -1,4 +1,4 @@
<Page
<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"
@ -300,77 +300,86 @@
</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>
<Button
Padding="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Background="Transparent"
BorderThickness="0"
Click="DashboardListItemClick"
Tag="{x:Bind Tag, Mode=OneWay}">
<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>
<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>
</Button>
</DataTemplate>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
@ -389,53 +398,62 @@
</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}" />
<Button
Padding="0"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
Background="Transparent"
BorderThickness="0"
Click="DashboardListItemClick"
Tag="{x:Bind Tag, Mode=OneWay}">
<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>
</Grid>
</Button>
</DataTemplate>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>

View File

@ -49,5 +49,10 @@ namespace Microsoft.PowerToys.Settings.UI.Views
{
ViewModel.SWVersionButtonClicked();
}
private void DashboardListItemClick(object sender, RoutedEventArgs e)
{
ViewModel.DashboardListItemClick(sender);
}
}
}

View File

@ -78,7 +78,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
IsLocked = gpo == GpoRuleConfigured.Enabled || gpo == GpoRuleConfigured.Disabled,
Icon = ModuleHelper.GetModuleTypeFluentIconName(moduleType),
EnabledChangedCallback = EnabledChangedOnUI,
AccentColor = GetModuleAccentColor(moduleType),
AccentColor = ModuleHelper.GetModuleAccentColor(moduleType),
DashboardModuleItems = GetModuleItems(moduleType),
});
if (moduleType == ModuleType.KeyboardManager && gpo != GpoRuleConfigured.Disabled)
@ -88,38 +88,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
}
}
private Color GetModuleAccentColor(ModuleType moduleType)
{
return moduleType switch
{
ModuleType.AlwaysOnTop => Color.FromArgb(255, 74, 196, 242), // #4ac4f2
ModuleType.Awake => Color.FromArgb(255, 40, 177, 233), // #28b1e9
ModuleType.ColorPicker => Color.FromArgb(255, 7, 129, 211), // #0781d3
ModuleType.CropAndLock => Color.FromArgb(255, 32, 166, 228), // #20a6e4
ModuleType.EnvironmentVariables => Color.FromArgb(255, 16, 132, 208), // #1084d0
ModuleType.FancyZones => Color.FromArgb(255, 65, 209, 247), // #41d1f7
ModuleType.FileLocksmith => Color.FromArgb(255, 245, 161, 20), // #f5a114
ModuleType.FindMyMouse => Color.FromArgb(255, 104, 109, 112), // #686d70
ModuleType.Hosts => Color.FromArgb(255, 16, 132, 208), // #1084d0
ModuleType.ImageResizer => Color.FromArgb(255, 85, 207, 248), // #55cff8
ModuleType.KeyboardManager => Color.FromArgb(255, 224, 231, 238), // #e0e7ee
ModuleType.MouseHighlighter => Color.FromArgb(255, 17, 126, 199), // #117ec7
ModuleType.MouseJump => Color.FromArgb(255, 240, 240, 239), // #f0f0ef
ModuleType.MousePointerCrosshairs => Color.FromArgb(255, 25, 115, 182), // #1973b6
ModuleType.MouseWithoutBorders => Color.FromArgb(255, 31, 164, 227), // #1fa4e3
ModuleType.PastePlain => Color.FromArgb(255, 243, 156, 16), // #f39c10
ModuleType.Peek => Color.FromArgb(255, 255, 214, 103), // #ffd667
ModuleType.PowerRename => Color.FromArgb(255, 43, 186, 243), // #2bbaf3
ModuleType.PowerLauncher => Color.FromArgb(255, 51, 191, 240), // #33bff0
ModuleType.PowerAccent => Color.FromArgb(255, 84, 89, 92), // #54595c
ModuleType.RegistryPreview => Color.FromArgb(255, 17, 80, 138), // #11508a
ModuleType.MeasureTool => Color.FromArgb(255, 135, 144, 153), // #879099
ModuleType.ShortcutGuide => Color.FromArgb(255, 193, 202, 209), // #c1cad1
ModuleType.PowerOCR => Color.FromArgb(255, 24, 153, 224), // #1899e0
_ => Color.FromArgb(255, 255, 255, 255), // never called, all values listed above
};
}
private void LoadKBMSettingsFromJson()
{
KeyboardManagerProfile kbmProfile = GetKBMProfile();
@ -528,5 +496,23 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
var actionName = "Launch";
SendConfigMSG("{\"action\":{\"RegistryPreview\":{\"action_name\":\"" + actionName + "\", \"value\":\"\"}}}");
}
internal void DashboardListItemClick(object sender)
{
Button button = sender as Button;
if (button == null)
{
return;
}
if (!(button.Tag is ModuleType))
{
return;
}
ModuleType moduleType = (ModuleType)button.Tag;
NavigationService.Navigate(ModuleHelper.GetModulePageType(moduleType));
}
}
}