[ColorPicker]Custom color formats (#22141)

* [ColorPicker] Development: custom color formats, first steps

* ColorPicker development of custom format handling.

* Custom color format developmnet.
Added common helper class for format string
Fixed settings loading
Added numbering if default name exists   (My format (1))

* Custom color format implementation.
Extended the colorPicker settings with the format string
Updated the color to string conversion

* Custom color format in color picker, development.
Adding edit, delete buttons. Implement functionality
Re-arranging settings panel (newly created formats at the top)
Implementing details (valid parameters, more format elements, more types)

* Minor commit

* Development color picker custom formats. "Last" steps.
Replacing hard coded english strings with resources, polishing.

* Adding help to the format edit dialog.

* Undoing changes unwillingly commited in Host module

* Fixing bug unable to delete a custom format after renaming it - use the colorformat object as reference (and not the name)
Modifying the default custom formula
Removing unnecessary using directives

* Udating the default user defined color format

* Removing unnecessary using directive

* ColorPicker Implementing custom color formats: adding custom formats to the default format selection (dropdown box).

* Fix binding of name and example

* Custom color formats, implemented steps:
vorwarts compatibility loading settings.
Fixed UI as requested (removed one settings panel, added button to the first panel)

* Minor change in the UI: description modified

* ColorPicker Custom Color Formats develepoment.
Added conversion from old predefined formats to customizable formats.
Extended default settings (in case settings file is deleted/corrupted).
Minor fixes.

* Fixing color format parameters.
Implementing 3 different Saturation calculations, 2 Hue calculations and 2 Lightness calculations (depending color format)

* Color Picker: New/Edit Color format. Fixing bug when cancelling addition/edit

* ColorPicker. Updating help section, available parameters

* Fix spellchecker

* Remove the MinWidth so that scrollviewers can be drawn

* ColorPicker bugfix: Not allowing to delete the last color format.
This commit is contained in:
Laszlo Nemeth
2022-12-02 17:44:53 +01:00
committed by GitHub
parent 77dfaab17e
commit ec0fb6a4c7
35 changed files with 2324 additions and 1092 deletions

View File

@@ -6,12 +6,17 @@
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:models="using:Microsoft.PowerToys.Settings.UI.Library"
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:ui="using:CommunityToolkit.WinUI.UI"
x:Name="RootPage"
AutomationProperties.LandmarkType="Main"
mc:Ignorable="d">
<Page.Resources>
<converters:BoolToVisibilityConverter x:Key="BoolToVis" />
</Page.Resources>
<controls:SettingsPageControl
x:Uid="ColorPicker"
ModuleImageSource="ms-appx:///Assets/Modules/ColorPicker.png">
@@ -73,8 +78,9 @@
x:Name="ColorPicker_ComboBox"
MinWidth="{StaticResource SettingActionControlMinWidth}"
DisplayMemberPath="Value"
ItemsSource="{Binding SelectableColorRepresentations}"
ItemsSource="{Binding ColorFormatsPreview, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Loaded="ColorPicker_ComboBox_Loaded"
SelectedIndex="{Binding ColorFormatsPreviewIndex, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
SelectedValue="{Binding SelectedColorRepresentationValue, Mode=TwoWay}"
SelectedValuePath="Key" />
</labs:SettingsCard>
@@ -102,8 +108,14 @@
x:Name="ColorFormatsSetting"
x:Uid="ColorPicker_ColorFormats"
HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
Glyph=&#xE762;}" />
Glyph=&#xE762;}" >
<Button
x:Uid="ColorPickerAddNewFormat"
Click="NewFormatClick"
Style="{StaticResource AccentButtonStyle}"
HorizontalAlignment="Right"
/>
</labs:SettingsCard>
<!-- Disabled reordering by dragging -->
<!-- CanReorderItems="True" AllowDrop="True" -->
<ItemsControl
@@ -114,8 +126,8 @@
<DataTemplate x:DataType="models:ColorFormatModel">
<labs:SettingsCard
Margin="0,0,0,2"
Description="{x:Bind Example}"
Header="{x:Bind Name}">
Description="{x:Bind Example, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Header="{x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<labs:SettingsCard.Resources>
<x:Double x:Key="SettingsCardLeftIndention">42</x:Double>
</labs:SettingsCard.Resources>
@@ -126,11 +138,42 @@
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button
x:Uid="EditButton"
Background="Transparent"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Grid.RowSpan="2"
Width="40"
Height="36"
HorizontalAlignment="Right"
Margin="0,0,160,0"
Content="&#xE70F;"
Click="EditButton_Click">
<ToolTipService.ToolTip>
<TextBlock x:Uid="EditTooltip"/>
</ToolTipService.ToolTip>
</Button>
<Button x:Name="RemoveButton"
x:Uid="RemoveButton"
Background="Transparent"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Grid.RowSpan="2"
Width="40"
Height="36"
Content="&#xE74D;"
HorizontalAlignment="Right"
Margin="0,0,104,0"
IsEnabled="{x:Bind CanBeDeleted, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Click="RemoveButton_Click">
<ToolTipService.ToolTip>
<TextBlock x:Uid="RemoveTooltip"/>
</ToolTipService.ToolTip>
</Button>
<ToggleSwitch
x:Uid="Enable_ColorFormat"
HorizontalAlignment="Right"
AutomationProperties.HelpText="{x:Bind Name}"
IsOn="{x:Bind IsShown, Mode=TwoWay}"
IsOn="{x:Bind IsShown, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
OffContent=""
OnContent="" />
<Button
@@ -169,10 +212,160 @@
</labs:SettingsCard>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</controls:SettingsGroup>
<ContentDialog
x:Name="ColorFormatDialog"
x:Uid="ColorFormatDialog"
PrimaryButtonStyle="{ThemeResource AccentButtonStyle}"
SecondaryButtonClick="ColorFormatDialog_CancelButtonClick"
IsPrimaryButtonEnabled="{Binding IsValid, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<ContentDialog.DataContext>
<models:ColorFormatModel />
</ContentDialog.DataContext>
<ScrollViewer HorizontalScrollMode="Auto" HorizontalScrollBarVisibility="Auto">
<StackPanel
Margin="0,12,0,0"
HorizontalAlignment="Stretch"
Spacing="24">
<TextBox
x:Uid="NewColorName"
x:Name="NewColorName"
IsSpellCheckEnabled="False"
TextChanged="NewColorName_TextChanged"
Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<TextBox
x:Uid="NewColorFormat"
Name="NewColorFormat"
IsSpellCheckEnabled="False"
TextChanged="NewColorFormat_TextChanged"
Text="{Binding Format, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
<!-- The help block -->
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition Height="30"/>
<RowDefinition />
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<TextBlock x:Uid="HelpLine1"/>
<Grid Grid.Row="1">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40px"/>
<ColumnDefinition Width="120px"/>
<ColumnDefinition Width="40px"/>
<ColumnDefinition Width="120px"/>
<ColumnDefinition Width="40px"/>
<ColumnDefinition Width="120px"/>
</Grid.ColumnDefinitions>
<TextBlock Text = "%Re" FontWeight="Bold"/>
<TextBlock x:Uid="Help_red" Grid.Column="1"/>
<TextBlock Text = "%Gr" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_green" Grid.Column="3"/>
<TextBlock Text = "%Bl" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_blue" Grid.Column="5"/>
<TextBlock Text = "%Al" Grid.Row="1" FontWeight="Bold"/>
<TextBlock x:Uid="Help_alpha" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text = "%Cy" Grid.Row="1" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_cyan" Grid.Row="1" Grid.Column="3"/>
<TextBlock Text = "%Ma" Grid.Row="1" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_magenta" Grid.Row="1" Grid.Column="5"/>
<TextBlock Text = "%Ye" Grid.Row="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_yellow" Grid.Row="2" Grid.Column="1"/>
<TextBlock Text = "%Bk" Grid.Row="2" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_black_key" Grid.Row="2" Grid.Column="3"/>
<TextBlock Text = "%Hu" Grid.Row="2" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_hue" Grid.Row="2" Grid.Column="5"/>
<TextBlock Text = "%Si" Grid.Row="3" FontWeight="Bold"/>
<TextBlock x:Uid="Help_saturationI" Grid.Row="3" Grid.Column="1"/>
<TextBlock Text = "%Sl" Grid.Row="3" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_saturationL" Grid.Row="3" Grid.Column="3"/>
<TextBlock Text = "%Sb" Grid.Row="3" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_saturationB" Grid.Row="3" Grid.Column="5"/>
<TextBlock Text = "%Br" Grid.Row="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_brightness" Grid.Row="4" Grid.Column="1"/>
<TextBlock Text = "%In" Grid.Row="4" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_intensity" Grid.Row="4" Grid.Column="3"/>
<TextBlock Text = "%Hn" Grid.Row="4" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_hueNat" Grid.Row="4" Grid.Column="5"/>
<TextBlock Text = "%Ll" Grid.Row="5" FontWeight="Bold"/>
<TextBlock x:Uid="Help_lightnessNat" Grid.Row="5" Grid.Column="1"/>
<TextBlock Text = "%Lc" Grid.Row="5" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_lightnessCIE" Grid.Row="5" Grid.Column="3"/>
<TextBlock Text = "%Va" Grid.Row="5" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_value" Grid.Row="5" Grid.Column="5"/>
<TextBlock Text = "%Wh" Grid.Row="6" FontWeight="Bold"/>
<TextBlock x:Uid="Help_whiteness" Grid.Row="6" Grid.Column="1"/>
<TextBlock Text = "%Bn" Grid.Row="6" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_blackness" Grid.Row="6" Grid.Column="3"/>
<TextBlock Text = "%Ca" Grid.Row="6" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_chromaticityA" Grid.Row="6" Grid.Column="5"/>
<TextBlock Text = "%Cb" Grid.Row="7" FontWeight="Bold"/>
<TextBlock x:Uid="Help_chromaticityB" Grid.Row="7" Grid.Column="1"/>
<TextBlock Text = "%Xv" Grid.Row="7" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_X_value" Grid.Row="7" Grid.Column="3"/>
<TextBlock Text = "%Yv" Grid.Row="7" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_Y_value" Grid.Row="7" Grid.Column="5"/>
<TextBlock Text = "%Zv" Grid.Row="8" FontWeight="Bold"/>
<TextBlock x:Uid="Help_Z_value" Grid.Row="8" Grid.Column="1"/>
<TextBlock Text = "%Dv" Grid.Row="8" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid="Help_decimal_value" Grid.Row="8" Grid.Column="3"/>
<TextBlock Text = "%Na" Grid.Row="8" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_color_name" Grid.Row="8" Grid.Column="5"/>
</Grid>
<TextBlock
Grid.Row="2"
x:Uid="HelpLine2"
VerticalAlignment="Bottom"/>
<Grid Grid.Row="3">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40px"/>
<ColumnDefinition Width="200px"/>
<ColumnDefinition Width="40px"/>
<ColumnDefinition Width="200px"/>
</Grid.ColumnDefinitions>
<TextBlock Text = "b" FontWeight="Bold"/>
<TextBlock x:Uid="Help_byte" Grid.Column="1"/>
<TextBlock Text = "h" Grid.Row="1" FontWeight="Bold"/>
<TextBlock x:Uid = "Help_hexL1" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text = "H" Grid.Row="1" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid = "Help_hexU1" Grid.Row="1" Grid.Column="3"/>
<TextBlock Text = "x" Grid.Row="2" FontWeight="Bold"/>
<TextBlock x:Uid = "Help_hexL2" Grid.Row="2" Grid.Column="1"/>
<TextBlock Text = "X" Grid.Row="2" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid = "Help_hexU2" Grid.Row="2" Grid.Column="3"/>
<TextBlock Text = "f" Grid.Row="3" FontWeight="Bold"/>
<TextBlock x:Uid = "Help_floatWith" Grid.Row="3" Grid.Column="1"/>
<TextBlock Text = "F" Grid.Row="3" Grid.Column="2" FontWeight="Bold"/>
<TextBlock x:Uid = "Help_floatWithout" Grid.Row="3" Grid.Column="3"/>
</Grid>
<TextBlock
Grid.Row="4"
x:Uid = "HelpLine3"
VerticalAlignment="Bottom"/>
</Grid>
</StackPanel>
</ScrollViewer>
</ContentDialog>
</StackPanel>
</controls:SettingsPageControl.ModuleContent>
<controls:SettingsPageControl.PrimaryLinks>

View File

@@ -2,9 +2,16 @@
// 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.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.Views
{
@@ -12,13 +19,17 @@ namespace Microsoft.PowerToys.Settings.UI.Views
{
public ColorPickerViewModel ViewModel { get; set; }
public ICommand AddCommand => new RelayCommand(Add);
public ICommand UpdateCommand => new RelayCommand(Update);
public ColorPickerPage()
{
var settingsUtils = new SettingsUtils();
ViewModel = new ColorPickerViewModel(
settingsUtils,
SettingsRepository<GeneralSettings>.GetInstance(settingsUtils),
SettingsRepository<ColorPickerSettings>.GetInstance(settingsUtils),
null,
ShellPage.SendDefaultIPCMessage);
DataContext = ViewModel;
InitializeComponent();
@@ -37,19 +48,7 @@ namespace Microsoft.PowerToys.Settings.UI.Views
* so after InitializeComponent() the ItemSource is still empty and can't automatically select a entry.
* Selection via SelectedItem and SelectedValue is still not working too
*/
var index = 0;
foreach (var item in ViewModel.SelectableColorRepresentations)
{
if (item.Key == ViewModel.SelectedColorRepresentationValue)
{
break;
}
index++;
}
ColorPicker_ComboBox.SelectedIndex = index;
ViewModel.SetPreviewSelectedIndex();
}
private void ReorderButtonUp_Click(object sender, Microsoft.UI.Xaml.RoutedEventArgs e)
@@ -81,5 +80,78 @@ namespace Microsoft.PowerToys.Settings.UI.Views
ViewModel.ColorFormats.Move(index, index + 1);
}
}
private void Add()
{
ColorFormatModel newColorFormat = ColorFormatDialog.DataContext as ColorFormatModel;
ViewModel.AddNewColorFormat(newColorFormat.Name, newColorFormat.Format, true);
ColorFormatDialog.Hide();
}
private void Update()
{
ColorFormatModel colorFormat = ColorFormatDialog.DataContext as ColorFormatModel;
string oldName = ((KeyValuePair<string, string>)ColorFormatDialog.Tag).Key;
ViewModel.UpdateColorFormat(oldName, colorFormat);
ColorFormatDialog.Hide();
}
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();
}
private void ColorFormatDialog_CancelButtonClick(ContentDialog sender, ContentDialogButtonClickEventArgs args)
{
if (ColorFormatDialog.Tag is KeyValuePair<string, string>)
{
ColorFormatModel modifiedColorFormat = ColorFormatDialog.DataContext as ColorFormatModel;
KeyValuePair<string, string> oldProperties = (KeyValuePair<string, string>)ColorFormatDialog.Tag;
modifiedColorFormat.Name = oldProperties.Key;
modifiedColorFormat.Format = oldProperties.Value;
}
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;
ColorFormatModel colorFormatModel = btn.DataContext as ColorFormatModel;
ColorFormatDialog.Title = resourceLoader.GetString("EditCustomColorFormat");
ColorFormatDialog.DataContext = colorFormatModel;
ColorFormatDialog.Tag = new KeyValuePair<string, string>(colorFormatModel.Name, colorFormatModel.Format);
NewColorFormat.Description = " " + ColorFormatHelper.GetStringRepresentation(null, colorFormatModel.Format);
ColorFormatDialog.PrimaryButtonText = resourceLoader.GetString("ColorFormatUpdate");
ColorFormatDialog.PrimaryButtonCommand = UpdateCommand;
await ColorFormatDialog.ShowAsync();
}
}
}