From b775d0710f5cf3135affd7b063ada917023a753a Mon Sep 17 00:00:00 2001 From: Niels Laute Date: Fri, 16 Dec 2022 11:15:55 +0100 Subject: [PATCH] [Settings] Custom color format UI tweaks (#22790) * Custom color format tweaks * Delete vs. remove * Update expect.txt * [ColorPicker]Support BGR and RGB decimal value formats (#22771) * ColorPicker add both decimal value formats * ColorPicker, custom format dialog, resizing columns * Custom color format tweaks * Delete vs. remove * Update expect.txt * Fix rebase * Fix error --- .github/actions/spell-check/expect.txt | 1 + .../Controls/ColorFormatEditor.xaml | 119 ++++++++ .../Controls/ColorFormatEditor.xaml.cs | 101 ++++++ .../Converters/ColorFormatConverter.cs | 31 ++ .../Settings.UI/PowerToys.Settings.csproj | 6 + .../Settings.UI/Strings/en-us/Resources.resw | 83 ++--- .../ViewModels/ColorPickerViewModel.cs | 4 +- .../Settings.UI/Views/ColorPickerPage.xaml | 288 +++--------------- .../Settings.UI/Views/ColorPickerPage.xaml.cs | 54 ++-- 9 files changed, 382 insertions(+), 305 deletions(-) create mode 100644 src/settings-ui/Settings.UI/Controls/ColorFormatEditor.xaml create mode 100644 src/settings-ui/Settings.UI/Controls/ColorFormatEditor.xaml.cs create mode 100644 src/settings-ui/Settings.UI/Converters/ColorFormatConverter.cs diff --git a/.github/actions/spell-check/expect.txt b/.github/actions/spell-check/expect.txt index 4888a1efba..32e6ae7519 100644 --- a/.github/actions/spell-check/expect.txt +++ b/.github/actions/spell-check/expect.txt @@ -649,6 +649,7 @@ hdc hdrop HEB Heiko +Helpline helptext Heure HGFE diff --git a/src/settings-ui/Settings.UI/Controls/ColorFormatEditor.xaml b/src/settings-ui/Settings.UI/Controls/ColorFormatEditor.xaml new file mode 100644 index 0000000000..207887ecdf --- /dev/null +++ b/src/settings-ui/Settings.UI/Controls/ColorFormatEditor.xaml @@ -0,0 +1,119 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/settings-ui/Settings.UI/Controls/ColorFormatEditor.xaml.cs b/src/settings-ui/Settings.UI/Controls/ColorFormatEditor.xaml.cs new file mode 100644 index 0000000000..76c2db391e --- /dev/null +++ b/src/settings-ui/Settings.UI/Controls/ColorFormatEditor.xaml.cs @@ -0,0 +1,101 @@ +// 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.Collections.Generic; +using System.ComponentModel; +using System.Security.Cryptography; +using System.Windows.Input; +using ManagedCommon; +using Microsoft.PowerToys.Settings.UI.Helpers; +using Microsoft.PowerToys.Settings.UI.Library; +using Microsoft.PowerToys.Settings.UI.ViewModels; +using Microsoft.UI.Xaml.Controls; +using Windows.ApplicationModel.Resources; +using Windows.System; + +namespace Microsoft.PowerToys.Settings.UI.Controls +{ + public sealed partial class ColorFormatEditor : UserControl + { + public ColorFormatEditor() + { + this.InitializeComponent(); + LoadParameters(); + } + + public void LoadParameters() + { + ResourceLoader resourceLoader = ResourceLoader.GetForViewIndependentUse(); + ParametersItemsControl.ItemsSource = new List + { + new ColorFormatParameter() { Parameter = "%Re", Description = resourceLoader.GetString("Help_red") }, + new ColorFormatParameter() { Parameter = "%Gr", Description = resourceLoader.GetString("Help_green") }, + new ColorFormatParameter() { Parameter = "%Bl", Description = resourceLoader.GetString("Help_blue") }, + new ColorFormatParameter() { Parameter = "%Al", Description = resourceLoader.GetString("Help_alpha") }, + new ColorFormatParameter() { Parameter = "%Cy", Description = resourceLoader.GetString("Help_cyan") }, + new ColorFormatParameter() { Parameter = "%Ma", Description = resourceLoader.GetString("Help_magenta") }, + new ColorFormatParameter() { Parameter = "%Ye", Description = resourceLoader.GetString("Help_yellow") }, + new ColorFormatParameter() { Parameter = "%Bk", Description = resourceLoader.GetString("Help_black_key") }, + new ColorFormatParameter() { Parameter = "%Hu", Description = resourceLoader.GetString("Help_hue") }, + new ColorFormatParameter() { Parameter = "%Si", Description = resourceLoader.GetString("Help_saturationI") }, + new ColorFormatParameter() { Parameter = "%Sl", Description = resourceLoader.GetString("Help_saturationL") }, + new ColorFormatParameter() { Parameter = "%Sb", Description = resourceLoader.GetString("Help_saturationB") }, + new ColorFormatParameter() { Parameter = "%Br", Description = resourceLoader.GetString("Help_brightness") }, + new ColorFormatParameter() { Parameter = "%In", Description = resourceLoader.GetString("Help_intensity") }, + new ColorFormatParameter() { Parameter = "%Hn", Description = resourceLoader.GetString("Help_hueNat") }, + new ColorFormatParameter() { Parameter = "%Ll", Description = resourceLoader.GetString("Help_lightnessNat") }, + new ColorFormatParameter() { Parameter = "%Lc", Description = resourceLoader.GetString("Help_lightnessCIE") }, + new ColorFormatParameter() { Parameter = "%Va", Description = resourceLoader.GetString("Help_value") }, + new ColorFormatParameter() { Parameter = "%Wh", Description = resourceLoader.GetString("Help_whiteness") }, + new ColorFormatParameter() { Parameter = "%Bn", Description = resourceLoader.GetString("Help_blackness") }, + new ColorFormatParameter() { Parameter = "%Ca", Description = resourceLoader.GetString("Help_chromaticityA") }, + new ColorFormatParameter() { Parameter = "%Cb", Description = resourceLoader.GetString("Help_chromaticityB") }, + new ColorFormatParameter() { Parameter = "%Xv", Description = resourceLoader.GetString("Help_X_value") }, + new ColorFormatParameter() { Parameter = "%Yv", Description = resourceLoader.GetString("Help_Y_value") }, + new ColorFormatParameter() { Parameter = "%Zv", Description = resourceLoader.GetString("Help_Z_value") }, + new ColorFormatParameter() { Parameter = "%Dv", Description = resourceLoader.GetString("Help_decimal_value_BGR") }, + new ColorFormatParameter() { Parameter = "%Dr", Description = resourceLoader.GetString("Help_decimal_value_RGB") }, + new ColorFormatParameter() { Parameter = "%Na", Description = resourceLoader.GetString("Help_color_name") }, + }; + + ColorParametersItemsControl.ItemsSource = new List + { + new ColorFormatParameter() { Parameter = "b", Description = resourceLoader.GetString("Help_byte") }, + new ColorFormatParameter() { Parameter = "h", Description = resourceLoader.GetString("Help_hexL1") }, + new ColorFormatParameter() { Parameter = "H", Description = resourceLoader.GetString("Help_hexU1") }, + new ColorFormatParameter() { Parameter = "x", Description = resourceLoader.GetString("Help_hexL2") }, + new ColorFormatParameter() { Parameter = "X", Description = resourceLoader.GetString("Help_hexU2") }, + new ColorFormatParameter() { Parameter = "f", Description = resourceLoader.GetString("Help_floatWith") }, + new ColorFormatParameter() { Parameter = "F", Description = resourceLoader.GetString("Help_floatWithout") }, + }; + } + + private void NewColorName_TextChanged(object sender, TextChangedEventArgs e) + { + OnPropertyChanged(); + } + + private void NewColorFormatTextBox_TextChanged(object sender, TextChangedEventArgs e) + { + OnPropertyChanged(); + } + + public event EventHandler PropertyChanged; + + private void OnPropertyChanged() + { + PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("PropertyChanged")); + } + } + +#pragma warning disable SA1402 // File may only contain a single type + public class ColorFormatParameter +#pragma warning restore SA1402 // File may only contain a single type + { + public string Parameter { get; set; } + + public string Description { get; set; } + } +} diff --git a/src/settings-ui/Settings.UI/Converters/ColorFormatConverter.cs b/src/settings-ui/Settings.UI/Converters/ColorFormatConverter.cs new file mode 100644 index 0000000000..5d6f7e83b6 --- /dev/null +++ b/src/settings-ui/Settings.UI/Converters/ColorFormatConverter.cs @@ -0,0 +1,31 @@ +// 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 ManagedCommon; +using Microsoft.PowerToys.Settings.UI.Library; +using Microsoft.UI.Xaml.Data; + +namespace Microsoft.PowerToys.Settings.UI.Converters +{ + public sealed class ColorFormatConverter : IValueConverter + { + public object Convert(object value, Type targetType, object parameter, string language) + { + if (value != null) + { + return ColorFormatHelper.GetStringRepresentation(null, (string)value); + } + else + { + return string.Empty; + } + } + + public object ConvertBack(object value, Type targetType, object parameter, string language) + { + return value; + } + } +} diff --git a/src/settings-ui/Settings.UI/PowerToys.Settings.csproj b/src/settings-ui/Settings.UI/PowerToys.Settings.csproj index e89a7660f8..9c2c9272db 100644 --- a/src/settings-ui/Settings.UI/PowerToys.Settings.csproj +++ b/src/settings-ui/Settings.UI/PowerToys.Settings.csproj @@ -55,6 +55,9 @@ https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json + + + @@ -89,6 +92,9 @@ + + MSBuild:Compile + Always diff --git a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw index 43f6616ea0..b4821a373b 100644 --- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw +++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw @@ -888,12 +888,15 @@ Remove Removes a user defined setting group for Image Resizer + + + Delete Image Resizer - Add a size + Add new size Save sizes @@ -1270,7 +1273,7 @@ Made with 💗 by Microsoft and the PowerToys community. Move down - Add custom color format + Add new format Format @@ -1296,118 +1299,118 @@ Made with 💗 by Microsoft and the PowerToys community. Cancel - + The following parameters can be used: - + red - + green - + blue - + alpha - + cyan - + magenta - + yellow - + black key - + hue - + hue (natural) - + saturation (HSI) - + saturation (HSL) - + saturation (HSB) - + brightness - + intensity - + lightness (nat) - + lightness (CIE) - + value - + whiteness - + blackness - + chromaticityA - + chromaticityB - + X value - + Y value - + Z value - + decimal value (RGB) - + decimal value (BGR) - + color name - + The red, green, blue and alpha values can be formatted to the following formats: - + byte value (default) - + hex lowercase one digit - + hex uppercase one digit - + hex lowercase two digits - + hex uppercase two digits - + float with leading zero - + float without leading zero - + Example: %ReX means red value in hex uppercase two digits format. diff --git a/src/settings-ui/Settings.UI/ViewModels/ColorPickerViewModel.cs b/src/settings-ui/Settings.UI/ViewModels/ColorPickerViewModel.cs index 3e8e70361f..b193758438 100644 --- a/src/settings-ui/Settings.UI/ViewModels/ColorPickerViewModel.cs +++ b/src/settings-ui/Settings.UI/ViewModels/ColorPickerViewModel.cs @@ -395,7 +395,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels return newColorFormatModel; } - internal void SetValidity(ColorFormatModel colorFormatModel, string oldName) + internal bool SetValidity(ColorFormatModel colorFormatModel, string oldName) { if ((colorFormatModel.Format == string.Empty) || (colorFormatModel.Name == string.Empty)) { @@ -410,6 +410,8 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels colorFormatModel.IsValid = ColorFormats.Count(x => x.Name.ToUpperInvariant().Equals(colorFormatModel.Name.ToUpperInvariant(), StringComparison.Ordinal)) < (colorFormatModel.IsNew ? 1 : 2); } + + return colorFormatModel.IsValid; } internal void DeleteModel(ColorFormatModel colorFormatModel) diff --git a/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml b/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml index d77072d265..7e39d09dfb 100644 --- a/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml +++ b/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml @@ -3,13 +3,15 @@ xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls" + xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:labs="using:CommunityToolkit.Labs.WinUI" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" - xmlns:converters="using:CommunityToolkit.WinUI.UI.Converters" - xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library" xmlns:viewmodels="using:Microsoft.PowerToys.Settings.UI.ViewModels" d:DataContext="{d:DesignInstance Type=viewmodels:ColorPickerViewModel}" + xmlns:models="using:Microsoft.PowerToys.Settings.UI.Library" xmlns:ui="using:CommunityToolkit.WinUI.UI" + xmlns:viewmodels="using:Microsoft.PowerToys.Settings.UI.ViewModels" x:Name="RootPage" + d:DataContext="{d:DesignInstance Type=viewmodels:ColorPickerViewModel}" AutomationProperties.LandmarkType="Main" mc:Ignorable="d"> @@ -17,21 +19,15 @@ - + - + - + - - - + + + - - + + @@ -67,13 +51,8 @@ - - + + - + - + + Glyph=}"> - + + - + @@ -217,172 +166,29 @@ + SecondaryButtonClick="ColorFormatDialog_CancelButtonClick"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - + - - + + \ No newline at end of file diff --git a/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml.cs b/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml.cs index 12c5fcb8f1..753567e5ee 100644 --- a/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml.cs +++ b/src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml.cs @@ -4,10 +4,13 @@ using System; using System.Collections.Generic; +using System.Globalization; using System.Windows.Input; +using CommunityToolkit.Labs.WinUI; using ManagedCommon; using Microsoft.PowerToys.Settings.UI.Helpers; using Microsoft.PowerToys.Settings.UI.Library; +using Microsoft.PowerToys.Settings.UI.Library.Utilities; using Microsoft.PowerToys.Settings.UI.ViewModels; using Microsoft.UI.Xaml.Controls; using Windows.ApplicationModel.Resources; @@ -23,6 +26,8 @@ namespace Microsoft.PowerToys.Settings.UI.Views public ICommand UpdateCommand => new RelayCommand(Update); + private ResourceLoader resourceLoader = ResourceLoader.GetForViewIndependentUse(); + public ColorPickerPage() { var settingsUtils = new SettingsUtils(); @@ -81,6 +86,24 @@ namespace Microsoft.PowerToys.Settings.UI.Views } } + private async void RemoveButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e) + { + ColorFormatModel color = ((MenuFlyoutItem)sender).DataContext as ColorFormatModel; + + ContentDialog dialog = new ContentDialog(); + dialog.XamlRoot = RootPage.XamlRoot; + dialog.Title = color.Name; + dialog.PrimaryButtonText = resourceLoader.GetString("Yes"); + dialog.CloseButtonText = resourceLoader.GetString("No"); + dialog.DefaultButton = ContentDialogButton.Primary; + dialog.Content = new TextBlock() { Text = resourceLoader.GetString("Delete_Dialog_Description") }; + dialog.PrimaryButtonClick += (s, args) => + { + ViewModel.DeleteModel(color); + }; + var result = await dialog.ShowAsync(); + } + private void Add() { ColorFormatModel newColorFormat = ColorFormatDialog.DataContext as ColorFormatModel; @@ -98,12 +121,11 @@ namespace Microsoft.PowerToys.Settings.UI.Views private async void NewFormatClick(object sender, Microsoft.UI.Xaml.RoutedEventArgs e) { - var resourceLoader = ResourceLoader.GetForViewIndependentUse(); ColorFormatDialog.Title = resourceLoader.GetString("AddCustomColorFormat"); ColorFormatModel newColorFormatModel = ViewModel.GetNewColorFormatModel(); ColorFormatDialog.DataContext = newColorFormatModel; ColorFormatDialog.Tag = string.Empty; - NewColorFormat.Description = " " + ColorFormatHelper.GetStringRepresentation(null, newColorFormatModel.Format); + ColorFormatDialog.PrimaryButtonText = resourceLoader.GetString("ColorFormatSave"); ColorFormatDialog.PrimaryButtonCommand = AddCommand; await ColorFormatDialog.ShowAsync(); @@ -122,36 +144,22 @@ namespace Microsoft.PowerToys.Settings.UI.Views ColorFormatDialog.Hide(); } - private void NewColorFormat_TextChanged(object sender, TextChangedEventArgs e) - { - NewColorFormat.Description = " " + ColorFormatHelper.GetStringRepresentation(null, NewColorFormat.Text); - ViewModel.SetValidity(ColorFormatDialog.DataContext as ColorFormatModel, ColorFormatDialog.Tag as string); - } - - private void NewColorName_TextChanged(object sender, TextChangedEventArgs e) - { - ViewModel.SetValidity(ColorFormatDialog.DataContext as ColorFormatModel, ColorFormatDialog.Tag as string); - } - - private void RemoveButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e) - { - Button btn = sender as Button; - ColorFormatModel colorFormatModel = btn.DataContext as ColorFormatModel; - ViewModel.DeleteModel(colorFormatModel); - } - private async void EditButton_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e) { - var resourceLoader = ResourceLoader.GetForViewIndependentUse(); - Button btn = sender as Button; + SettingsCard btn = sender as SettingsCard; ColorFormatModel colorFormatModel = btn.DataContext as ColorFormatModel; ColorFormatDialog.Title = resourceLoader.GetString("EditCustomColorFormat"); ColorFormatDialog.DataContext = colorFormatModel; ColorFormatDialog.Tag = new KeyValuePair(colorFormatModel.Name, colorFormatModel.Format); - NewColorFormat.Description = " " + ColorFormatHelper.GetStringRepresentation(null, colorFormatModel.Format); + ColorFormatDialog.PrimaryButtonText = resourceLoader.GetString("ColorFormatUpdate"); ColorFormatDialog.PrimaryButtonCommand = UpdateCommand; await ColorFormatDialog.ShowAsync(); } + + private void ColorFormatEditor_PropertyChanged(object sender, EventArgs e) + { + ColorFormatDialog.IsPrimaryButtonEnabled = ViewModel.SetValidity(ColorFormatDialog.DataContext as ColorFormatModel, ColorFormatDialog.Tag as string); + } } }