[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
This commit is contained in:
Niels Laute 2022-12-16 11:15:55 +01:00 committed by GitHub
parent b17955c968
commit b775d0710f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 382 additions and 305 deletions

View File

@ -649,6 +649,7 @@ hdc
hdrop
HEB
Heiko
Helpline
helptext
Heure
HGFE

View File

@ -0,0 +1,119 @@
<!-- Copyright (c) Microsoft Corporation. All rights reserved. -->
<!-- Licensed under the MIT License. See LICENSE in the project root for license information. -->
<UserControl
x:Class="Microsoft.PowerToys.Settings.UI.Controls.ColorFormatEditor"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:CommunityToolkit="using:CommunityToolkit.WinUI.UI.Controls"
xmlns:converters="using:Microsoft.PowerToys.Settings.UI.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:Microsoft.PowerToys.Settings.UI.Controls"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<UserControl.Resources>
<converters:ColorFormatConverter x:Key="ColorFormatConverter" />
<DataTemplate x:Key="FormatParameterTemplate" x:DataType="local:ColorFormatParameter">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="34" />
<ColumnDefinition Width="110" />
</Grid.ColumnDefinitions>
<TextBlock
FontWeight="SemiBold"
IsTextSelectionEnabled="True"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind Parameter}" />
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind Description}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
</Grid>
</DataTemplate>
<DataTemplate x:Key="ColorParameterTemplate" x:DataType="local:ColorFormatParameter">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="18" />
<ColumnDefinition Width="186" />
</Grid.ColumnDefinitions>
<TextBlock
FontWeight="SemiBold"
IsTextSelectionEnabled="True"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind Parameter}" />
<TextBlock
Grid.Column="1"
VerticalAlignment="Center"
Foreground="{ThemeResource TextFillColorSecondaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{x:Bind Description}"
TextTrimming="CharacterEllipsis"
TextWrapping="NoWrap" />
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemPanelTemplate">
<CommunityToolkit:WrapPanel
HorizontalSpacing="20"
Orientation="Horizontal"
VerticalSpacing="4" />
</ItemsPanelTemplate>
</UserControl.Resources>
<Grid>
<StackPanel Spacing="12">
<TextBox
x:Name="NewColorName"
x:Uid="NewColorName"
IsSpellCheckEnabled="False"
Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TextChanged="NewColorName_TextChanged" />
<TextBox
x:Name="NewColorFormatTextBox"
x:Uid="NewColorFormat"
IsSpellCheckEnabled="False"
Text="{Binding Format, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
TextChanged="NewColorFormatTextBox_TextChanged" />
<TextBlock
Margin="12,0,0,0"
FontWeight="SemiBold"
Foreground="{ThemeResource AccentTextFillColorPrimaryBrush}"
Style="{StaticResource CaptionTextBlockStyle}"
Text="{Binding ElementName=NewColorFormatTextBox, Path=Text, Converter={StaticResource ColorFormatConverter}}" />
<TextBlock
x:Uid="ColorFormatEditorHelpline1"
Margin="0,12,0,0"
Style="{StaticResource CaptionTextBlockStyle}" />
<ItemsControl
x:Name="ParametersItemsControl"
ItemTemplate="{StaticResource FormatParameterTemplate}"
ItemsPanel="{StaticResource ItemPanelTemplate}" />
<TextBlock
x:Uid="ColorFormatEditorHelpline2"
Margin="0,12,0,0"
VerticalAlignment="Bottom"
Style="{StaticResource CaptionTextBlockStyle}" />
<ItemsControl
x:Name="ColorParametersItemsControl"
ItemTemplate="{StaticResource ColorParameterTemplate}"
ItemsPanel="{StaticResource ItemPanelTemplate}" />
<TextBlock
x:Uid="ColorFormatEditorHelpline3"
VerticalAlignment="Bottom"
Style="{StaticResource CaptionTextBlockStyle}" />
</StackPanel>
</Grid>
</UserControl>

View File

@ -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<ColorFormatParameter>
{
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<ColorFormatParameter>
{
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; }
}
}

View File

@ -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;
}
}
}

View File

@ -55,6 +55,9 @@
<PropertyGroup>
<RestoreAdditionalProjectSources>https://pkgs.dev.azure.com/dotnet/CommunityToolkit/_packaging/CommunityToolkit-Labs/nuget/v3/index.json</RestoreAdditionalProjectSources>
</PropertyGroup>
<ItemGroup>
<None Remove="Controls\ColorFormatEditor.xaml" />
</ItemGroup>
<ItemGroup>
<Content Include="Assets\SplashScreen.scale-200.png" />
@ -89,6 +92,9 @@
<ProjectReference Include="..\Settings.UI.Library\Settings.UI.Library.csproj" />
</ItemGroup>
<ItemGroup>
<Page Update="Controls\ColorFormatEditor.xaml">
<Generator>MSBuild:Compile</Generator>
</Page>
<None Update="icon.ico">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
</None>

View File

@ -888,12 +888,15 @@
<data name="RemoveButton.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
<value>Remove</value>
<comment>Removes a user defined setting group for Image Resizer</comment>
</data>
<data name="RemoveItem.Text" xml:space="preserve">
<value>Delete</value>
</data>
<data name="ImageResizer_Image.[using:Microsoft.UI.Xaml.Automation]AutomationProperties.Name" xml:space="preserve">
<value>Image Resizer</value>
</data>
<data name="ImageResizer_AddSizeButton.Content" xml:space="preserve">
<value>Add a size</value>
<value>Add new size</value>
</data>
<data name="ImageResizer_SaveSizeButton.Label" xml:space="preserve">
<value>Save sizes</value>
@ -1270,7 +1273,7 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
<value>Move down</value>
</data>
<data name="ColorPickerAddNewFormat.Content" xml:space="preserve">
<value>Add custom color format</value>
<value>Add new format</value>
</data>
<data name="NewColorFormat.Header" xml:space="preserve">
<value>Format</value>
@ -1296,118 +1299,118 @@ Made with 💗 by Microsoft and the PowerToys community.</value>
<data name="ColorFormatDialog.SecondaryButtonText" xml:space="preserve">
<value>Cancel</value>
</data>
<data name="HelpLine1.Text" xml:space="preserve">
<data name="ColorFormatEditorHelpline1.Text" xml:space="preserve">
<value>The following parameters can be used:</value>
</data>
<data name="Help_red.Text" xml:space="preserve">
<data name="Help_red" xml:space="preserve">
<value>red</value>
</data>
<data name="Help_green.Text" xml:space="preserve">
<data name="Help_green" xml:space="preserve">
<value>green</value>
</data>
<data name="Help_blue.Text" xml:space="preserve">
<data name="Help_blue" xml:space="preserve">
<value>blue</value>
</data>
<data name="Help_alpha.Text" xml:space="preserve">
<data name="Help_alpha" xml:space="preserve">
<value>alpha</value>
</data>
<data name="Help_cyan.Text" xml:space="preserve">
<data name="Help_cyan" xml:space="preserve">
<value>cyan</value>
</data>
<data name="Help_magenta.Text" xml:space="preserve">
<data name="Help_magenta" xml:space="preserve">
<value>magenta</value>
</data>
<data name="Help_yellow.Text" xml:space="preserve">
<data name="Help_yellow" xml:space="preserve">
<value>yellow</value>
</data>
<data name="Help_black_key.Text" xml:space="preserve">
<data name="Help_black_key" xml:space="preserve">
<value>black key</value>
</data>
<data name="Help_hue.Text" xml:space="preserve">
<data name="Help_hue" xml:space="preserve">
<value>hue</value>
</data>
<data name="Help_hueNat.Text" xml:space="preserve">
<data name="Help_hueNat" xml:space="preserve">
<value>hue (natural)</value>
</data>
<data name="Help_saturationI.Text" xml:space="preserve">
<data name="Help_saturationI" xml:space="preserve">
<value>saturation (HSI)</value>
</data>
<data name="Help_saturationL.Text" xml:space="preserve">
<data name="Help_saturationL" xml:space="preserve">
<value>saturation (HSL)</value>
</data>
<data name="Help_saturationB.Text" xml:space="preserve">
<data name="Help_saturationB" xml:space="preserve">
<value>saturation (HSB)</value>
</data>
<data name="Help_brightness.Text" xml:space="preserve">
<data name="Help_brightness" xml:space="preserve">
<value>brightness</value>
</data>
<data name="Help_intensity.Text" xml:space="preserve">
<data name="Help_intensity" xml:space="preserve">
<value>intensity</value>
</data>
<data name="Help_lightnessNat.Text" xml:space="preserve">
<data name="Help_lightnessNat" xml:space="preserve">
<value>lightness (nat)</value>
</data>
<data name="Help_lightnessCIE.Text" xml:space="preserve">
<data name="Help_lightnessCIE" xml:space="preserve">
<value>lightness (CIE)</value>
</data>
<data name="Help_value.Text" xml:space="preserve">
<data name="Help_value" xml:space="preserve">
<value>value</value>
</data>
<data name="Help_whiteness.Text" xml:space="preserve">
<data name="Help_whiteness" xml:space="preserve">
<value>whiteness</value>
</data>
<data name="Help_blackness.Text" xml:space="preserve">
<data name="Help_blackness" xml:space="preserve">
<value>blackness</value>
</data>
<data name="Help_chromaticityA.Text" xml:space="preserve">
<data name="Help_chromaticityA" xml:space="preserve">
<value>chromaticityA</value>
</data>
<data name="Help_chromaticityB.Text" xml:space="preserve">
<data name="Help_chromaticityB" xml:space="preserve">
<value>chromaticityB</value>
</data>
<data name="Help_X_value.Text" xml:space="preserve">
<data name="Help_X_value" xml:space="preserve">
<value>X value</value>
</data>
<data name="Help_Y_value.Text" xml:space="preserve">
<data name="Help_Y_value" xml:space="preserve">
<value>Y value</value>
</data>
<data name="Help_Z_value.Text" xml:space="preserve">
<data name="Help_Z_value" xml:space="preserve">
<value>Z value</value>
</data>
<data name="Help_decimal_value_RGB.Text" xml:space="preserve">
<data name="Help_decimal_value_RGB" xml:space="preserve">
<value>decimal value (RGB)</value>
</data>
<data name="Help_decimal_value_BGR.Text" xml:space="preserve">
<data name="Help_decimal_value_BGR" xml:space="preserve">
<value>decimal value (BGR)</value>
</data>
<data name="Help_color_name.Text" xml:space="preserve">
<data name="Help_color_name" xml:space="preserve">
<value>color name</value>
</data>
<data name="HelpLine2.Text" xml:space="preserve">
<data name="ColorFormatEditorHelpline2.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">
<data name="Help_byte" xml:space="preserve">
<value>byte value (default)</value>
</data>
<data name="Help_hexL1.Text" xml:space="preserve">
<data name="Help_hexL1" xml:space="preserve">
<value>hex lowercase one digit</value>
</data>
<data name="Help_hexU1.Text" xml:space="preserve">
<data name="Help_hexU1" xml:space="preserve">
<value>hex uppercase one digit</value>
</data>
<data name="Help_hexL2.Text" xml:space="preserve">
<data name="Help_hexL2" xml:space="preserve">
<value>hex lowercase two digits</value>
</data>
<data name="Help_hexU2.Text" xml:space="preserve">
<data name="Help_hexU2" xml:space="preserve">
<value>hex uppercase two digits</value>
</data>
<data name="Help_floatWith.Text" xml:space="preserve">
<data name="Help_floatWith" xml:space="preserve">
<value>float with leading zero</value>
</data>
<data name="Help_floatWithout.Text" xml:space="preserve">
<data name="Help_floatWithout" xml:space="preserve">
<value>float without leading zero</value>
</data>
<data name="HelpLine3.Text" xml:space="preserve">
<data name="ColorFormatEditorHelpline3.Text" xml:space="preserve">
<value>Example: %ReX means red value in hex uppercase two digits format.</value>
</data>
<data name="ColorPicker_ShowColorName.Header" xml:space="preserve">

View File

@ -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)

View File

@ -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 @@
<converters:BoolToVisibilityConverter x:Key="BoolToVis" />
</Page.Resources>
<controls:SettingsPageControl
x:Uid="ColorPicker"
ModuleImageSource="ms-appx:///Assets/Modules/ColorPicker.png">
<controls:SettingsPageControl x:Uid="ColorPicker" ModuleImageSource="ms-appx:///Assets/Modules/ColorPicker.png">
<controls:SettingsPageControl.ModuleContent>
<StackPanel
x:Name="ColorPickerView"
Orientation="Vertical">
<StackPanel x:Name="ColorPickerView" Orientation="Vertical">
<labs:SettingsCard
x:Uid="ColorPicker_EnableColorPicker"
HeaderIcon="{ui:BitmapIcon Source=/Assets/FluentIcons/FluentIconsColorPicker.png}"
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured, Converter={StaticResource BoolNegationConverter}}">
<ToggleSwitch
x:Uid="ToggleSwitch"
IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
<ToggleSwitch x:Uid="ToggleSwitch" IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
</labs:SettingsCard>
<InfoBar
x:Uid="GPO_IsSettingForced"
@ -40,25 +36,13 @@
IsTabStop="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabledGpoConfigured}"
Severity="Informational" />
<controls:SettingsGroup
x:Uid="Shortcut"
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
<labs:SettingsCard
x:Uid="Activation_Shortcut"
HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
Glyph=&#xEDA7;}">
<controls:ShortcutControl
MinWidth="{StaticResource SettingActionControlMinWidth}"
HotkeySettings="{x:Bind Path=ViewModel.ActivationShortcut, Mode=TwoWay}" />
<controls:SettingsGroup x:Uid="Shortcut" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
<labs:SettingsCard x:Uid="Activation_Shortcut" HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xEDA7;}">
<controls:ShortcutControl MinWidth="{StaticResource SettingActionControlMinWidth}" HotkeySettings="{x:Bind Path=ViewModel.ActivationShortcut, Mode=TwoWay}" />
</labs:SettingsCard>
<labs:SettingsCard
x:Uid="ColorPicker_ActivationAction"
HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
Glyph=&#xEC4E;}">
<ComboBox
MinWidth="{StaticResource SettingActionControlMinWidth}"
SelectedIndex="{x:Bind Path=ViewModel.ActivationBehavior, Mode=TwoWay}">
<labs:SettingsCard x:Uid="ColorPicker_ActivationAction" HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xEC4E;}">
<ComboBox MinWidth="{StaticResource SettingActionControlMinWidth}" SelectedIndex="{x:Bind Path=ViewModel.ActivationBehavior, Mode=TwoWay}">
<ComboBoxItem x:Uid="EditorFirst" />
<ComboBoxItem x:Uid="ColorPickerFirst" />
<ComboBoxItem x:Uid="ColorPickerOnly" />
@ -67,13 +51,8 @@
</controls:SettingsGroup>
<controls:SettingsGroup
x:Uid="ColorFormats"
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
<labs:SettingsCard
x:Uid="ColorPicker_CopiedColorRepresentation"
HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily},
Glyph=&#xF0E3;}">
<controls:SettingsGroup x:Uid="ColorFormats" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
<labs:SettingsCard x:Uid="ColorPicker_CopiedColorRepresentation" HeaderIcon="{ui:FontIcon FontFamily={StaticResource SymbolThemeFontFamily}, Glyph=&#xF0E3;}">
<ComboBox
x:Name="ColorPicker_ComboBox"
MinWidth="{StaticResource SettingActionControlMinWidth}"
@ -86,9 +65,7 @@
</labs:SettingsCard>
<labs:SettingsCard x:Uid="ColorPicker_ShowColorName">
<ToggleSwitch
x:Uid="ToggleSwitch"
IsOn="{Binding ShowColorName, Mode=TwoWay}" />
<ToggleSwitch x:Uid="ToggleSwitch" IsOn="{Binding ShowColorName, Mode=TwoWay}" />
</labs:SettingsCard>
<!--
Disabling this until we have a safer way to reset cursor as
@ -101,20 +78,17 @@
-->
</controls:SettingsGroup>
<controls:SettingsGroup
x:Uid="ColorPicker_Editor"
IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
<controls:SettingsGroup x:Uid="ColorPicker_Editor" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}">
<labs:SettingsCard
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"
/>
Click="NewFormatClick"
Style="{StaticResource AccentButtonStyle}" />
</labs:SettingsCard>
<!-- Disabled reordering by dragging -->
<!-- CanReorderItems="True" AllowDrop="True" -->
@ -126,61 +100,26 @@
<DataTemplate x:DataType="models:ColorFormatModel">
<labs:SettingsCard
Margin="0,0,0,2"
Click="EditButton_Click"
Description="{x:Bind Example, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
Header="{x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
Header="{x:Bind Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
IsClickEnabled="True">
<labs:SettingsCard.Resources>
<x:Double x:Key="SettingsCardLeftIndention">42</x:Double>
<x:Double x:Key="SettingsCardActionButtonWidth">0</x:Double>
</labs:SettingsCard.Resources>
<Grid
HorizontalAlignment="Right"
ColumnSpacing="8">
<Grid.ColumnDefinitions>
<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>
<StackPanel Orientation="Horizontal" Spacing="4">
<ToggleSwitch
x:Uid="Enable_ColorFormat"
HorizontalAlignment="Right"
AutomationProperties.HelpText="{x:Bind Name}"
IsOn="{x:Bind IsShown, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
OffContent=""
OnContent="" />
<Button
x:Uid="More_Options_Button"
Grid.Column="1"
VerticalAlignment="Center"
Background="Transparent"
Content="&#xE712;"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Style="{StaticResource SubtleButtonStyle}">
@ -202,13 +141,23 @@
<FontIcon Glyph="&#xE74B;" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
<MenuFlyoutSeparator />
<MenuFlyoutItem
x:Uid="RemoveItem"
Click="RemoveButton_Click"
IsEnabled="{x:Bind CanBeDeleted, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
<MenuFlyoutItem.Icon>
<FontIcon Glyph="&#xE74D;" />
</MenuFlyoutItem.Icon>
</MenuFlyoutItem>
</MenuFlyout>
</Button.Flyout>
<ToolTipService.ToolTip>
<TextBlock x:Uid="More_Options_ButtonTooltip" />
</ToolTipService.ToolTip>
</Button>
</Grid>
</StackPanel>
</labs:SettingsCard>
</DataTemplate>
</ItemsControl.ItemTemplate>
@ -217,172 +166,29 @@
<ContentDialog
x:Name="ColorFormatDialog"
x:Uid="ColorFormatDialog"
IsPrimaryButtonEnabled="{Binding IsValid, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
PrimaryButtonStyle="{ThemeResource AccentButtonStyle}"
SecondaryButtonClick="ColorFormatDialog_CancelButtonClick"
IsPrimaryButtonEnabled="{Binding IsValid, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}">
SecondaryButtonClick="ColorFormatDialog_CancelButtonClick">
<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 />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="37px"/>
<ColumnDefinition Width="127px"/>
<ColumnDefinition Width="37px"/>
<ColumnDefinition Width="127px"/>
<ColumnDefinition Width="37px"/>
<ColumnDefinition Width="127px"/>
</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_BGR" Grid.Row="8" Grid.Column="3"/>
<TextBlock Text = "%Dr" Grid.Row="8" Grid.Column="4" FontWeight="Bold"/>
<TextBlock x:Uid="Help_decimal_value_RGB" Grid.Row="8" Grid.Column="5"/>
<TextBlock Text = "%Na" Grid.Row="9" FontWeight="Bold"/>
<TextBlock x:Uid="Help_color_name" Grid.Row="9" Grid.Column="1"/>
</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 HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Auto">
<controls:ColorFormatEditor
Width="480"
Margin="2,0,0,0"
HorizontalAlignment="Left"
PropertyChanged="ColorFormatEditor_PropertyChanged" />
</ScrollViewer>
</ContentDialog>
</StackPanel>
</controls:SettingsPageControl.ModuleContent>
<controls:SettingsPageControl.PrimaryLinks>
<controls:PageLink
x:Uid="LearnMore_ColorPicker"
Link="https://aka.ms/PowerToysOverview_ColorPicker" />
<controls:PageLink x:Uid="LearnMore_ColorPicker" Link="https://aka.ms/PowerToysOverview_ColorPicker" />
</controls:SettingsPageControl.PrimaryLinks>
<controls:SettingsPageControl.SecondaryLinks>
<controls:PageLink
Link="https://github.com/martinchrzan/ColorPicker/"
Text="Martin Chrzan's Color Picker" />
<controls:PageLink
Link="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c"
Text="Niels Laute's UX concept" />
<controls:PageLink Link="https://github.com/martinchrzan/ColorPicker/" Text="Martin Chrzan's Color Picker" />
<controls:PageLink Link="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c" Text="Niels Laute's UX concept" />
</controls:SettingsPageControl.SecondaryLinks>
</controls:SettingsPageControl>
</Page>

View File

@ -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<string, string>(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);
}
}
}