Mirrors/PowerToys
1
0
Fork 0
mirror of https://github.com/microsoft/PowerToys.git synced 2026-04-04 10:16:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

[ColorPicker]Custom color formats (#22141)

Browse Source 
* [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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/settings-ui/Settings.UI/OOBE/Views/OobeColorPicker.xaml.cs
View File

@@ -49,7 +49,9 @@ namespace Microsoft.PowerToys.Settings.UI.OOBE.Views
protected override void OnNavigatedTo(NavigationEventArgs e)
{
ViewModel.LogOpeningModuleEvent();
HotkeyControl.Keys = SettingsRepository<ColorPickerSettings>.GetInstance(new SettingsUtils()).SettingsConfig.Properties.ActivationShortcut.GetKeysList();
ColorPickerSettings settings = new SettingsUtils().GetSettingsOrDefault<ColorPickerSettings, ColorPickerSettingsVersion1>(ColorPickerSettings.ModuleName, settingsUpgrader: ColorPickerSettings.UpgradeSettings);
HotkeyControl.Keys = settings.Properties.ActivationShortcut.GetKeysList();
}
protected override void OnNavigatedFrom(NavigationEventArgs e)

150
src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
View File

@@ -1261,14 +1261,158 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
<value>Color formats</value>
</data>
<data name="ColorPicker_ColorFormats.Description" xml:space="preserve">
<value>Select which color formats (and in what order) should show up in the editor</value>
<value>Configure the color formats (edit, delete, hide, reorder them)</value>
</data>
<data name="MoveUp.Text" xml:space="preserve">
<value>Move up</value>
</data>
<data name="MoveDown.Text" xml:space="preserve">
<data name="MoveDown.Text" xml:space="preserve">
<value>Move down</value>
</data>
<data name="ColorPickerAddNewFormat.Content" xml:space="preserve">
<value>Add custom color format</value>
</data>
<data name="NewColorFormat.Header" xml:space="preserve">
<value>Format</value>
</data>
<data name="NewColorName.Header" xml:space="preserve">
<value>Name</value>
</data>
<data name="AddCustomColorFormat" xml:space="preserve">
<value>Add custom color format</value>
</data>
<data name="ColorFormatSave" xml:space="preserve">
<value>Save</value>
</data>
<data name="EditCustomColorFormat" xml:space="preserve">
<value>Edit custom color format</value>
</data>
<data name="ColorFormatUpdate" xml:space="preserve">
<value>Update</value>
</data>
<data name="CustomColorFormatDefaultName" xml:space="preserve">
<value>My Format</value>
</data>
<data name="ColorFormatDialog.SecondaryButtonText" xml:space="preserve">
<value>Cancel</value>
</data>
<data name="HelpLine1.Text" xml:space="preserve">
<value>The following parameters can be used:</value>
</data>
<data name="Help_red.Text" xml:space="preserve">
<value>red</value>
</data>
<data name="Help_green.Text" xml:space="preserve">
<value>green</value>
</data>
<data name="Help_blue.Text" xml:space="preserve">
<value>blue</value>
</data>
<data name="Help_alpha.Text" xml:space="preserve">
<value>alpha</value>
</data>
<data name="Help_cyan.Text" xml:space="preserve">
<value>cyan</value>
</data>
<data name="Help_magenta.Text" xml:space="preserve">
<value>magenta</value>
</data>
<data name="Help_yellow.Text" xml:space="preserve">
<value>yellow</value>
</data>
<data name="Help_black_key.Text" xml:space="preserve">
<value>black key</value>
</data>
<data name="Help_hue.Text" xml:space="preserve">
<value>hue</value>
</data>
<data name="Help_hueNat.Text" xml:space="preserve">
<value>hue (natural)</value>
</data>
<data name="Help_saturationI.Text" xml:space="preserve">
<value>saturation (HSI)</value>
</data>
<data name="Help_saturationL.Text" xml:space="preserve">
<value>saturation (HSL)</value>
</data>
<data name="Help_saturationB.Text" xml:space="preserve">
<value>saturation (HSB)</value>
</data>
<data name="Help_brightness.Text" xml:space="preserve">
<value>brightness</value>
</data>
<data name="Help_intensity.Text" xml:space="preserve">
<value>intensity</value>
</data>
<data name="Help_lightnessNat.Text" xml:space="preserve">
<value>lightness (nat)</value>
</data>
<data name="Help_lightnessCIE.Text" xml:space="preserve">
<value>lightness (CIE)</value>
</data>
<data name="Help_value.Text" xml:space="preserve">
<value>value</value>
</data>
<data name="Help_whiteness.Text" xml:space="preserve">
<value>whiteness</value>
</data>
<data name="Help_blackness.Text" xml:space="preserve">
<value>blackness</value>
</data>
<data name="Help_chromaticityA.Text" xml:space="preserve">
<value>chromaticityA</value>
</data>
<data name="Help_chromaticityB.Text" xml:space="preserve">
<value>chromaticityB</value>
</data>
<data name="Help_X_value.Text" xml:space="preserve">
<value>X value</value>
</data>
<data name="Help_Y_value.Text" xml:space="preserve">
<value>Y value</value>
</data>
<data name="Help_Z_value.Text" xml:space="preserve">
<value>Z value</value>
</data>
<data name="Help_decimal_value.Text" xml:space="preserve">
<value>decimal value</value>
</data>
<data name="Help_color_name.Text" xml:space="preserve">
<value>color name</value>
</data>
<data name="HelpLine2.Text" xml:space="preserve">
<value>The red, green, blue and alpha values can be formatted to the following formats:</value>
</data>
<data name="Help_byte.Text" xml:space="preserve">
<value>byte value (default)</value>
</data>
<data name="Help_hexL1.Text" xml:space="preserve">
<value>hex lowercase one digit</value>
</data>
<data name="Help_hexU1.Text" xml:space="preserve">
<value>hex uppercase one digit</value>
</data>
<data name="Help_hexL2.Text" xml:space="preserve">
<value>hex lowercase two digits</value>
</data>
<data name="Help_hexU2.Text" xml:space="preserve">
<value>hex uppercase two digits</value>
</data>
<data name="Help_floatWith.Text" xml:space="preserve">
<value>float with leading zero</value>
</data>
<data name="Help_floatWithout.Text" xml:space="preserve">
<value>float without leading zero</value>
</data>
<data name="HelpLine3.Text" xml:space="preserve">
<value>Example: %ReX means red value in hex uppercase two digits format.</value>
</data>
<data name="Help_blue.Text" xml:space="preserve">
<value>blue</value>
</data>
<data name="Help_blue.Text" xml:space="preserve">
<value>blue</value>
</data>
<data name="ColorPicker_ShowColorName.Header" xml:space="preserve">
<value>Show color name</value>
</data>
@@ -1315,7 +1459,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
<value>Zone index</value>
</data>
<data name="ColorPicker_Editor.Header" xml:space="preserve">
<value>Editor</value>
<value>Color formats</value>
</data>
<data name="FancyZones_OverlappingZonesClosestCenter.Content" xml:space="preserve">
<value>Activate the zone whose center is closest to the cursor</value>

228
src/settings-ui/Settings.UI/ViewModels/ColorPickerViewModel.cs
View File

@@ -10,10 +10,12 @@ using System.Linq;
using System.Text.Json;
using System.Timers;
using global::PowerToys.GPOWrapper;
using ManagedCommon;
using Microsoft.PowerToys.Settings.UI.Library;
using Microsoft.PowerToys.Settings.UI.Library.Enumerations;
using Microsoft.PowerToys.Settings.UI.Library.Helpers;
using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
using Windows.ApplicationModel.Resources;
namespace Microsoft.PowerToys.Settings.UI.ViewModels
{
@@ -35,9 +37,12 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
private GpoRuleConfigured _enabledGpoRuleConfiguration;
private bool _enabledStateIsGPOConfigured;
private bool _isEnabled;
private int _colorFormatPreviewIndex;
private Func<string, int> SendConfigMSG { get; }
private Dictionary<string, string> _colorFormatsPreview;
public ColorPickerViewModel(
ISettingsUtils settingsUtils,
ISettingsRepository<GeneralSettings> settingsRepository,
@@ -50,34 +55,20 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
throw new ArgumentNullException(nameof(settingsRepository));
}
SelectableColorRepresentations = new Dictionary<ColorRepresentationType, string>
{
{ ColorRepresentationType.CMYK, "CMYK - cmyk(100%, 50%, 75%, 0%)" },
{ ColorRepresentationType.HEX, "HEX - ffaa00" },
{ ColorRepresentationType.HSB, "HSB - hsb(100, 50%, 75%)" },
{ ColorRepresentationType.HSI, "HSI - hsi(100, 50%, 75%)" },
{ ColorRepresentationType.HSL, "HSL - hsl(100, 50%, 75%)" },
{ ColorRepresentationType.HSV, "HSV - hsv(100, 50%, 75%)" },
{ ColorRepresentationType.HWB, "HWB - hwb(100, 50%, 75%)" },
{ ColorRepresentationType.NCol, "NCol - R10, 50%, 75%" },
{ ColorRepresentationType.RGB, "RGB - rgb(100, 50, 75)" },
{ ColorRepresentationType.CIELAB, "CIE LAB - CIELab(76, 21, 80)" },
{ ColorRepresentationType.CIEXYZ, "CIE XYZ - xyz(56, 50, 7)" },
{ ColorRepresentationType.VEC4, "VEC4 - (1.0f, 0.7f, 0f, 1f)" },
{ ColorRepresentationType.DecimalValue, "Decimal - 16755200" },
{ ColorRepresentationType.HexInteger, "HEX Integer - 0xFFAA00EE" },
};
GeneralSettingsConfig = settingsRepository.SettingsConfig;
_settingsUtils = settingsUtils ?? throw new ArgumentNullException(nameof(settingsUtils));
if (colorPickerSettingsRepository == null)
{
throw new ArgumentNullException(nameof(colorPickerSettingsRepository));
// used in release. This method converts the settings stored in the previous form, so we have forwards compatibility
_colorPickerSettings = _settingsUtils.GetSettingsOrDefault<ColorPickerSettings, ColorPickerSettingsVersion1>(ColorPickerSettings.ModuleName, settingsUpgrader: ColorPickerSettings.UpgradeSettings);
}
else
{
_colorPickerSettings = colorPickerSettingsRepository.SettingsConfig; // used in the unit tests
}
_colorPickerSettings = colorPickerSettingsRepository.SettingsConfig;
_enabledGpoRuleConfiguration = GPOWrapper.GetConfiguredColorPickerEnabledValue();
if (_enabledGpoRuleConfiguration == GpoRuleConfigured.Disabled || _enabledGpoRuleConfiguration == GpoRuleConfigured.Enabled)
{
@@ -101,11 +92,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
InitializeColorFormats();
}
/// <summary>
/// Gets a list with all selectable <see cref="ColorRepresentationType"/>s
/// </summary>
public IReadOnlyDictionary<ColorRepresentationType, string> SelectableColorRepresentations { get; }
public bool IsEnabled
{
get => _isEnabled;
@@ -164,11 +150,16 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
}
}
public ColorRepresentationType SelectedColorRepresentationValue
public string SelectedColorRepresentationValue
{
get => _colorPickerSettings.Properties.CopiedColorRepresentation;
set
{
if (value == null)
{
return; // do not set null value, it occurs when the combobox itemSource gets modified. Right after it well be reset to the correct value
}
if (_colorPickerSettings.Properties.CopiedColorRepresentation != value)
{
_colorPickerSettings.Properties.CopiedColorRepresentation = value;
@@ -212,66 +203,63 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
public ObservableCollection<ColorFormatModel> ColorFormats { get; } = new ObservableCollection<ColorFormatModel>();
private void InitializeColorFormats()
public Dictionary<string, string> ColorFormatsPreview
{
var visibleFormats = _colorPickerSettings.Properties.VisibleColorFormats;
var formatsUnordered = new List<ColorFormatModel>();
var hexFormatName = ColorRepresentationType.HEX.ToString();
var rgbFormatName = ColorRepresentationType.RGB.ToString();
var hslFormatName = ColorRepresentationType.HSL.ToString();
var hsvFormatName = ColorRepresentationType.HSV.ToString();
var cmykFormatName = ColorRepresentationType.CMYK.ToString();
var hsbFormatName = ColorRepresentationType.HSB.ToString();
var hsiFormatName = ColorRepresentationType.HSI.ToString();
var hwbFormatName = ColorRepresentationType.HWB.ToString();
var ncolFormatName = ColorRepresentationType.NCol.ToString();
var cielabFormatName = ColorRepresentationType.CIELAB.ToString();
var ciexyzFormatName = ColorRepresentationType.CIEXYZ.ToString();
var vec4FormatName = ColorRepresentationType.VEC4.ToString();
var hexIntegerFormatName = "HEX Int";
var decimalFormatName = "Decimal";
formatsUnordered.Add(new ColorFormatModel(hexFormatName, "ef68ff", visibleFormats.ContainsKey(hexFormatName) && visibleFormats[hexFormatName]));
formatsUnordered.Add(new ColorFormatModel(rgbFormatName, "rgb(239, 104, 255)", visibleFormats.ContainsKey(rgbFormatName) && visibleFormats[rgbFormatName]));
formatsUnordered.Add(new ColorFormatModel(hslFormatName, "hsl(294, 100%, 70%)", visibleFormats.ContainsKey(hslFormatName) && visibleFormats[hslFormatName]));
formatsUnordered.Add(new ColorFormatModel(hsvFormatName, "hsv(294, 59%, 100%)", visibleFormats.ContainsKey(hsvFormatName) && visibleFormats[hsvFormatName]));
formatsUnordered.Add(new ColorFormatModel(cmykFormatName, "cmyk(6%, 59%, 0%, 0%)", visibleFormats.ContainsKey(cmykFormatName) && visibleFormats[cmykFormatName]));
formatsUnordered.Add(new ColorFormatModel(hsbFormatName, "hsb(100, 50%, 75%)", visibleFormats.ContainsKey(hsbFormatName) && visibleFormats[hsbFormatName]));
formatsUnordered.Add(new ColorFormatModel(hsiFormatName, "hsi(100, 50%, 75%)", visibleFormats.ContainsKey(hsiFormatName) && visibleFormats[hsiFormatName]));
formatsUnordered.Add(new ColorFormatModel(hwbFormatName, "hwb(100, 50%, 75%)", visibleFormats.ContainsKey(hwbFormatName) && visibleFormats[hwbFormatName]));
formatsUnordered.Add(new ColorFormatModel(ncolFormatName, "R10, 50%, 75%", visibleFormats.ContainsKey(ncolFormatName) && visibleFormats[ncolFormatName]));
formatsUnordered.Add(new ColorFormatModel(cielabFormatName, "CIELab(66, 72, -52)", visibleFormats.ContainsKey(cielabFormatName) && visibleFormats[cielabFormatName]));
formatsUnordered.Add(new ColorFormatModel(ciexyzFormatName, "XYZ(59, 35, 98)", visibleFormats.ContainsKey(ciexyzFormatName) && visibleFormats[ciexyzFormatName]));
formatsUnordered.Add(new ColorFormatModel(vec4FormatName, "(0.94f, 0.41f, 1.00f, 1f)", visibleFormats.ContainsKey(vec4FormatName) && visibleFormats[vec4FormatName]));
formatsUnordered.Add(new ColorFormatModel(decimalFormatName, "15689983", visibleFormats.ContainsKey(decimalFormatName) && visibleFormats[decimalFormatName]));
formatsUnordered.Add(new ColorFormatModel(hexIntegerFormatName, "0xFFAA00EE", visibleFormats.ContainsKey(hexIntegerFormatName) && visibleFormats[hexIntegerFormatName]));
foreach (var storedColorFormat in _colorPickerSettings.Properties.VisibleColorFormats)
get => _colorFormatsPreview;
set
{
var predefinedFormat = formatsUnordered.FirstOrDefault(it => it.Name == storedColorFormat.Key);
if (predefinedFormat != null)
{
predefinedFormat.PropertyChanged += ColorFormat_PropertyChanged;
ColorFormats.Add(predefinedFormat);
formatsUnordered.Remove(predefinedFormat);
}
_colorFormatsPreview = value;
OnPropertyChanged(nameof(ColorFormatsPreview));
}
}
public int ColorFormatsPreviewIndex
{
get
{
return _colorFormatPreviewIndex;
}
// settings file might not have all formats listed, add remaining ones we support
foreach (var remainingColorFormat in formatsUnordered)
set
{
remainingColorFormat.PropertyChanged += ColorFormat_PropertyChanged;
ColorFormats.Add(remainingColorFormat);
if (value != _colorFormatPreviewIndex)
{
_colorFormatPreviewIndex = value;
OnPropertyChanged(nameof(ColorFormatsPreviewIndex));
}
}
}
private void InitializeColorFormats()
{
foreach (var storedColorFormat in _colorPickerSettings.Properties.VisibleColorFormats)
{
string format = storedColorFormat.Value.Value;
if (format == string.Empty)
{
format = ColorFormatHelper.GetDefaultFormat(storedColorFormat.Key);
}
ColorFormatModel customColorFormat = new ColorFormatModel(storedColorFormat.Key, format, storedColorFormat.Value.Key);
customColorFormat.PropertyChanged += ColorFormat_PropertyChanged;
ColorFormats.Add(customColorFormat);
}
// Reordering colors with buttons: disable first and last buttons
ColorFormats[0].CanMoveUp = false;
ColorFormats[ColorFormats.Count - 1].CanMoveDown = false;
UpdateColorFormatPreview();
ColorFormats.CollectionChanged += ColorFormats_CollectionChanged;
}
private void UpdateColorFormatPreview()
{
ColorFormatsPreview = ColorFormats.Select(x => new KeyValuePair<string, string>(x.Name, x.Name + " - " + x.Example)).ToDictionary(x => x.Key, x => x.Value);
SetPreviewSelectedIndex();
ScheduleSavingOfSettings();
}
private void ColorFormats_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
// Reordering colors with buttons: update buttons availability depending on order
@@ -287,7 +275,20 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
ColorFormats[ColorFormats.Count - 1].CanMoveDown = false;
}
if (ColorFormats.Count == 1)
{
ColorFormats.Single().CanBeDeleted = false;
}
else
{
foreach (var color in ColorFormats)
{
color.CanBeDeleted = true;
}
}
UpdateColorFormats();
UpdateColorFormatPreview();
ScheduleSavingOfSettings();
}
@@ -324,10 +325,21 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
_colorPickerSettings.Properties.VisibleColorFormats.Clear();
foreach (var colorFormat in ColorFormats)
{
_colorPickerSettings.Properties.VisibleColorFormats.Add(colorFormat.Name, colorFormat.IsShown);
_colorPickerSettings.Properties.VisibleColorFormats.Add(colorFormat.Name, new KeyValuePair<bool, string>(colorFormat.IsShown, colorFormat.Format));
}
}
internal void AddNewColorFormat(string newColorName, string newColorFormat, bool isShown)
{
if (ColorFormats.Count > 0)
{
ColorFormats[0].CanMoveUp = true;
}
ColorFormats.Insert(0, new ColorFormatModel(newColorName, newColorFormat, isShown));
SetPreviewSelectedIndex();
}
private void NotifySettingsChanged()
{
// Using InvariantCulture as this is an IPC message
@@ -357,5 +369,75 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
Dispose(disposing: true);
GC.SuppressFinalize(this);
}
internal ColorFormatModel GetNewColorFormatModel()
{
var resourceLoader = ResourceLoader.GetForViewIndependentUse();
string defaultName = resourceLoader.GetString("CustomColorFormatDefaultName");
ColorFormatModel newColorFormatModel = new ColorFormatModel();
newColorFormatModel.Name = defaultName;
int extensionNumber = 1;
while (ColorFormats.Any(x => x.Name.Equals(newColorFormatModel.Name, StringComparison.Ordinal)))
{
newColorFormatModel.Name = defaultName + " (" + extensionNumber + ")";
extensionNumber++;
}
return newColorFormatModel;
}
internal void SetValidity(ColorFormatModel colorFormatModel, string oldName)
{
if ((colorFormatModel.Format == string.Empty) || (colorFormatModel.Name == string.Empty))
{
colorFormatModel.IsValid = false;
}
else if (colorFormatModel.Name == oldName)
{
colorFormatModel.IsValid = true;
}
else
{
colorFormatModel.IsValid = ColorFormats.Count(x => x.Name.ToUpperInvariant().Equals(colorFormatModel.Name.ToUpperInvariant(), StringComparison.Ordinal)) < 2;
}
}
internal void DeleteModel(ColorFormatModel colorFormatModel)
{
ColorFormats.Remove(colorFormatModel);
SetPreviewSelectedIndex();
}
internal void UpdateColorFormat(string oldName, ColorFormatModel colorFormat)
{
if (SelectedColorRepresentationValue == oldName)
{
SelectedColorRepresentationValue = colorFormat.Name; // name might be changed by the user
}
UpdateColorFormatPreview();
}
internal void SetPreviewSelectedIndex()
{
int index = 0;
foreach (var item in ColorFormats)
{
if (item.Name == SelectedColorRepresentationValue)
{
break;
}
index++;
}
if (index >= ColorFormats.Count)
{
index = 0;
}
ColorFormatsPreviewIndex = index;
}
}
}

211
src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml
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>

100
src/settings-ui/Settings.UI/Views/ColorPickerPage.xaml.cs
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();
}
}
}