mirror/PowerToys
1
0
Fork 0
mirror of https://github.com/microsoft/PowerToys.git synced 2025-06-07 01:08:18 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Color Picker - show color name (#8553)

Browse Source 
* Added color name ported from WinUI implementation

* Added new words into expect.txt

* Change color name foreground

* Moved show color name checkbox
This commit is contained in:
martinchrzan 2020-12-15 08:46:38 +01:00 committed by GitHub
parent f4ffdbe8a9
commit cddf48547d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 998 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
.github/actions/spell-check/expect.txt vendored
View File

@ -166,6 +166,7 @@ bitmask
bla
blockquote
blog
BLUEGRAY
BLURBEHIND
BLURREGION
bmi
@ -180,6 +181,7 @@ BPBF
bpp
Breadcrumb
bricelam
BRIGHTGREEN
Browsable
bsd
bsearch
@ -391,11 +393,19 @@ CYSMICON
cz
Dac
dacl
DARKBLUE
DARKGRAY
DARKGREEN
DARKPURPLE
DARKRED
DARKTEAL
DARKYELLOW
Dataflows
DATAW
davidegiacometti
Dayof
Dbg
DBLEPSILON
DBLCLKS
DCOM
dcomp
@ -898,6 +908,7 @@ IBeam
IBind
icase
iccex
ICEBLUE
IClass
ico
ICollection
@ -1165,6 +1176,12 @@ LEVELID
LExit
lhs
LIBID
LIGHTBLUE
LIGHTGRAY
LIGHTGREEN
LIGHTORANGE
LIGHTTURQUOISE
LIGHTYELLOW
lindex
linecap
Linkmenu
@ -1503,6 +1520,7 @@ OLECHAR
oledb
oledbcommand
oledbconnection
OLIVEGREEN
OLogo
Onboarding
onebranch
@ -1537,6 +1555,7 @@ OWNDC
PACL
PAINTSTRUCT
PAIT
PALEBLUE
PALETTEWINDOW
Pano
paramref
@ -1910,6 +1929,7 @@ Shortcuttool
shortdate
SHORTPATH
should've
showcolorname
SHOWDEFAULT
SHOWELEVATIONPROMPT
SHOWMAXIMIZED
@ -1944,6 +1964,7 @@ SKIPDOTNETINSTALL
SKIPOWNPROCESS
sku
Skype
SKYBLUE
SLGP
Slideshow
sln

5
src/core/Microsoft.PowerToys.Settings.UI.Library/ColorPickerProperties.cs
View File

@ -21,6 +21,7 @@ namespace Microsoft.PowerToys.Settings.UI.Library
VisibleColorFormats.Add("HEX", true);
VisibleColorFormats.Add("RGB", true);
VisibleColorFormats.Add("HSL", true);
ShowColorName = false;
ActivationAction = ColorPickerActivationAction.OpenColorPickerAndThenEditor;
}
@ -47,6 +48,10 @@ namespace Microsoft.PowerToys.Settings.UI.Library
[System.Diagnostics.CodeAnalysis.SuppressMessage("Usage", "CA2227:Collection properties should be read only", Justification = "Need to change this collection")]
public Dictionary<string, bool> VisibleColorFormats { get; set; }
[JsonPropertyName("showcolorname")]
[JsonConverter(typeof(BoolPropertyJsonConverter))]
public bool ShowColorName { get; set; }
public override string ToString()
=> JsonSerializer.Serialize(this);
}

14
src/core/Microsoft.PowerToys.Settings.UI.Library/ViewModels/ColorPickerViewModel.cs
View File

@ -188,6 +188,20 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
}
}
public bool ShowColorName
{
get => _colorPickerSettings.Properties.ShowColorName;
set
{
if (_colorPickerSettings.Properties.ShowColorName != value)
{
_colorPickerSettings.Properties.ShowColorName = value;
OnPropertyChanged(nameof(ShowColorName));
NotifySettingsChanged();
}
}
}
public ObservableCollection<ColorFormatModel> ColorFormats { get; } = new ObservableCollection<ColorFormatModel>();
private void InitializeColorFormats()

3
src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
View File

@ -870,4 +870,7 @@
<data name="ColorPicker_ColorFormatsDescription.Text" xml:space="preserve">
<value>Editor color formats (Change the order by dragging)</value>
</data>
<data name="ColorPicker_ShowColorName.Content" xml:space="preserve">
<value>Show color name</value>
</data>
</root>

23
src/core/Microsoft.PowerToys.Settings.UI/Views/ColorPickerPage.xaml
View File

@ -101,16 +101,16 @@
Margin="{StaticResource SmallTopMargin}"
IsEnabled="{Binding IsEnabled}"
GroupName="ColorPickerActivationAction">
<RadioButton.Content>
<RadioButton.Content>
<TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
<Run x:Uid="ColorPickerOnly"/>
<LineBreak/>
<Run x:Uid="ColorPickerOnly_Description" Foreground="{ThemeResource SystemBaseMediumColor}"/>
</TextBlock>
</RadioButton.Content>
</RadioButton>
</TextBlock>
</RadioButton.Content>
</RadioButton>
</StackPanel>
<TextBlock x:Uid="ColorFormats"
Style="{StaticResource SettingsGroupTitleStyle}"
Foreground="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToForegroundConverter}}"/>
@ -126,7 +126,12 @@
Loaded="ColorPicker_ComboBox_Loaded"
SelectedValue="{Binding SelectedColorRepresentationValue, Mode=TwoWay}"
SelectedValuePath="Key" />
<CheckBox x:Uid="ColorPicker_ShowColorName"
IsChecked="{Binding ShowColorName, Mode=TwoWay}"
Margin="{StaticResource SmallTopMargin}"
IsEnabled="{Binding IsEnabled}"/>
<TextBlock Margin="{StaticResource MediumTopMargin}"
x:Name="ColorFormatsListViewLabel"
TextWrapping="WrapWholeWords"
@ -232,6 +237,12 @@
NavigateUri="https://github.com/martinchrzan/ColorPicker/">
<TextBlock Text="Martin Chrzan's Color Picker" TextWrapping="Wrap" />
</HyperlinkButton>
<HyperlinkButton Margin="0,-3,0,0"
NavigateUri="https://medium.com/@Niels9001/a-fluent-color-meter-for-powertoys-20407ededf0c">
<TextBlock Text="Niels Laute's UX concept" TextWrapping="Wrap" />
</HyperlinkButton>
</StackPanel>
</RelativePanel>
</Grid>

4
src/modules/colorPicker/ColorPickerUI/Behaviors/AppearAnimationBehavior.cs
View File

@ -45,6 +45,10 @@ namespace ColorPicker.Behaviors
};
AssociatedObject.BeginAnimation(UIElement.OpacityProperty, opacityAppear);
// force re-evaluation of tooltip size
AssociatedObject.SizeToContent = SizeToContent.Manual;
AssociatedObject.SizeToContent = SizeToContent.WidthAndHeight;
}
private void Hide()

29
src/modules/colorPicker/ColorPickerUI/Converters/BoolToInvertedVisibilityConverter.cs Normal file
View File

@ -0,0 +1,29 @@
// 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.Globalization;
using System.Windows;
using System.Windows.Data;
namespace ColorPicker.Converters
{
public class BoolToInvertedVisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
if ((bool)value)
{
return Visibility.Collapsed;
}
return Visibility.Visible;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
}

264
src/modules/colorPicker/ColorPickerUI/Helpers/ColorNameHelper.cs Normal file
View File

@ -0,0 +1,264 @@
// 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.Drawing;
using ColorPicker.Properties;
namespace ColorPicker.Helpers
{
public static class ColorNameHelper
{
public const float DBLEPSILON = 2.2204460492503131e-16f;
// For the purposes of naming colors, there are four steps that we go through.
//
// 1. For numerical ease, we convert the HSL values from the range [0, 1]
// to the range [0, 255].
//
// 2. If luminosity is sufficiently high or low (> 240 or < 20), or if
// saturation is sufficiently low (<= 20), then we declare that we're in the
// achromatic range. In this case, we return either white, black, or three
// different shades of gray (depending on luminosity).
//
// 3. If we do have a chromatic color, the first thing we need to determine
// about it is what the hue limits are for its saturation value - at different
// levels of saturation, we have different hue values that we'll consider the
// boundaries for different classes of named colors. The hue limits for various
// saturation values are as below.
//
// The numbers correspond to the following color buckets, with 0 meaning that
// that bucket does not apply to the given saturation value:
//
// 1 - coral, 2 - red, 3 - orange, 4 - brown, 5 - tan, 6 - gold, 7 - yellow, 8 - olive green (with brown),
// 9 - olive green (with green) 10 - lime green, 11 - green - 12 - bright green 13 - teal, 14 - aqua,
// 15 - turquoise, 16 - pale blue, 17 - blue, 18 - blue-gray, 19 - indigo, 20 - purple, 21 - pink, 22 - brown, 23 - red
private static int[] hueLimitsForSatLevel1 = // Sat: 20-75
{
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
8, 0, 0, 44, 0, 0, 0, 63, 0, 0, 122, 0, 134, 0, 0, 0, 0, 166, 176, 241, 0, 256, 0,
};
private static int[] hueLimitsForSatLevel2 = // Sat: 75-115
{
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
0, 10, 0, 32, 46, 0, 0, 0, 61, 0, 106, 0, 136, 144, 0, 0, 0, 158, 166, 241, 0, 0, 256,
};
private static int[] hueLimitsForSatLevel3 = // Sat: 115-150
{
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
0, 8, 0, 0, 39, 46, 0, 0, 0, 71, 120, 0, 131, 144, 0, 0, 163, 0, 177, 211, 249, 0, 256,
};
private static int[] hueLimitsForSatLevel4 = // Sat: 150-240
{
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
0, 11, 26, 0, 0, 38, 45, 0, 0, 56, 100, 121, 129, 0, 140, 0, 180, 0, 0, 224, 241, 0, 256,
};
private static int[] hueLimitsForSatLevel5 = // Sat: 240-255
{
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
0, 13, 27, 0, 0, 36, 45, 0, 0, 59, 118, 0, 127, 136, 142, 0, 185, 0, 0, 216, 239, 0, 256,
};
// 4. Once we have the color bucket, next we have three sub-buckets that we need to worry about,
// corresponding to three different levels of luminosity. For example, if we're in the "blue" bucket,
// that might correspond to light blue, blue, or dark blue, depending on luminosity.
// For each bucket, the luminosity cutoffs for the purposes of discerning between light, mid, and dark colors
// are different, so we define luminosity limits for low and high luminosity for each bucket, as follows:
private static int[] lumLimitsForHueIndexLow =
{
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
130, 100, 115, 100, 100, 100, 110, 75, 100, 90, 100, 100, 100, 100, 80, 100, 100, 100, 100, 100, 100, 100, 100,
};
private static int[] lumLimitsForHueIndexHigh =
{
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
170, 170, 170, 155, 170, 170, 170, 170, 170, 115, 170, 170, 170, 170, 170, 170, 170, 170, 150, 150, 170, 140, 165,
};
// 5. Finally, once we have a luminosity sub-bucket in the saturation color bucket, we have everything we need
// to retrieve a name. For each of the 23 buckets, we have names associated with light, mid, and dark variations
// of that color, which are defined as follows:
private static string[] colorNamesLight =
{
Resources.TEXT_COLOR_CORAL,
Resources.TEXT_COLOR_ROSE,
Resources.TEXT_COLOR_LIGHTORANGE,
Resources.TEXT_COLOR_TAN,
Resources.TEXT_COLOR_TAN,
Resources.TEXT_COLOR_LIGHTYELLOW,
Resources.TEXT_COLOR_LIGHTYELLOW,
Resources.TEXT_COLOR_TAN,
Resources.TEXT_COLOR_LIGHTGREEN,
Resources.TEXT_COLOR_LIME,
Resources.TEXT_COLOR_LIGHTGREEN,
Resources.TEXT_COLOR_LIGHTGREEN,
Resources.TEXT_COLOR_AQUA,
Resources.TEXT_COLOR_SKYBLUE,
Resources.TEXT_COLOR_LIGHTTURQUOISE,
Resources.TEXT_COLOR_PALEBLUE,
Resources.TEXT_COLOR_LIGHTBLUE,
Resources.TEXT_COLOR_ICEBLUE,
Resources.TEXT_COLOR_PERIWINKLE,
Resources.TEXT_COLOR_LAVENDER,
Resources.TEXT_COLOR_PINK,
Resources.TEXT_COLOR_TAN,
Resources.TEXT_COLOR_ROSE,
};
private static string[] colorNamesMid =
{
Resources.TEXT_COLOR_CORAL,
Resources.TEXT_COLOR_RED,
Resources.TEXT_COLOR_ORANGE,
Resources.TEXT_COLOR_BROWN,
Resources.TEXT_COLOR_TAN,
Resources.TEXT_COLOR_GOLD,
Resources.TEXT_COLOR_YELLOW,
Resources.TEXT_COLOR_OLIVEGREEN,
Resources.TEXT_COLOR_OLIVEGREEN,
Resources.TEXT_COLOR_GREEN,
Resources.TEXT_COLOR_GREEN,
Resources.TEXT_COLOR_BRIGHTGREEN,
Resources.TEXT_COLOR_TEAL,
Resources.TEXT_COLOR_AQUA,
Resources.TEXT_COLOR_TURQUOISE,
Resources.TEXT_COLOR_PALEBLUE,
Resources.TEXT_COLOR_BLUE,
Resources.TEXT_COLOR_BLUEGRAY,
Resources.TEXT_COLOR_INDIGO,
Resources.TEXT_COLOR_PURPLE,
Resources.TEXT_COLOR_PINK,
Resources.TEXT_COLOR_BROWN,
Resources.TEXT_COLOR_RED,
};
private static string[] colorNamesDark =
{
Resources.TEXT_COLOR_BROWN,
Resources.TEXT_COLOR_DARKRED,
Resources.TEXT_COLOR_BROWN,
Resources.TEXT_COLOR_BROWN,
Resources.TEXT_COLOR_BROWN,
Resources.TEXT_COLOR_DARKYELLOW,
Resources.TEXT_COLOR_DARKYELLOW,
Resources.TEXT_COLOR_BROWN,
Resources.TEXT_COLOR_DARKGREEN,
Resources.TEXT_COLOR_DARKGREEN,
Resources.TEXT_COLOR_DARKGREEN,
Resources.TEXT_COLOR_DARKGREEN,
Resources.TEXT_COLOR_DARKTEAL,
Resources.TEXT_COLOR_DARKTEAL,
Resources.TEXT_COLOR_DARKTEAL,
Resources.TEXT_COLOR_DARKBLUE,
Resources.TEXT_COLOR_DARKBLUE,
Resources.TEXT_COLOR_BLUEGRAY,
Resources.TEXT_COLOR_INDIGO,
Resources.TEXT_COLOR_DARKPURPLE,
Resources.TEXT_COLOR_PLUM,
Resources.TEXT_COLOR_BROWN,
Resources.TEXT_COLOR_DARKRED,
};
public static string GetColorName(Color color)
{
var (hue, sat, lum) = ColorHelper.ConvertToHSLColor(color);
hue = (hue == 0 ? 0 : hue / 360) * 255; // this implementation is using normalization to 0-255 instead of 0-360°
sat = sat * 255;
lum = lum * 255;
// First, if we're in the achromatic state, return the appropriate achromatic color name.
if (lum > 240)
{
return Resources.TEXT_COLOR_WHITE;
}
else if (lum < 20)
{
return Resources.TEXT_COLOR_BLACK;
}
if (sat <= 20)
{
if (lum > 170)
{
return Resources.TEXT_COLOR_LIGHTGRAY;
}
else if (lum > 100)
{
return Resources.TEXT_COLOR_GRAY;
}
else
{
return Resources.TEXT_COLOR_DARKGRAY;
}
}
// If we have a chromatic color, we need to first get the hue limits for the saturation value.
int[] pHueLimits;
if (sat > 20 && sat <= 75)
{
pHueLimits = hueLimitsForSatLevel1;
}
else if (sat > 75 && sat <= 115)
{
pHueLimits = hueLimitsForSatLevel2;
}
else if (sat > 115 && sat <= 150)
{
pHueLimits = hueLimitsForSatLevel3;
}
else if (sat > 150 && sat <= 240)
{
pHueLimits = hueLimitsForSatLevel4;
}
else
{
pHueLimits = hueLimitsForSatLevel5;
}
// Now that we have that, we can get the color index, which represents which
// of the 23 buckets we're located in.
int colorIndex = -1;
for (int i = 0; i < colorNamesMid.Length; ++i)
{
if (hue < pHueLimits[i])
{
colorIndex = i;
break;
}
}
// Assuming we got a color index (and we always should get one), then next we need to
// figure out which luminosity sub-bucket we're located in.
// Once we have that, we'll return the color name from the appropriate array.
if (colorIndex != -1)
{
if (lum > lumLimitsForHueIndexHigh[colorIndex])
{
return colorNamesLight[colorIndex];
}
else if (lum < lumLimitsForHueIndexLow[colorIndex])
{
return colorNamesDark[colorIndex];
}
else
{
return colorNamesMid[colorIndex];
}
}
return string.Empty;
}
public static bool AreClose(double a, double b)
{
return (float)Math.Abs(a - b) <= DBLEPSILON * (float)Math.Abs(a);
}
}
}

3
src/modules/colorPicker/ColorPickerUI/MainWindow.xaml
View File

@ -6,14 +6,13 @@
mc:Ignorable="d"
xmlns:e="http://schemas.microsoft.com/xaml/behaviors"
xmlns:behaviors="clr-namespace:ColorPicker.Behaviors"
Height="64"
WindowStyle="None"
Opacity="0.01"
ShowInTaskbar="False"
ResizeMode="NoResize"
Topmost="True"
Background="Transparent"
SizeToContent="Width"
SizeToContent="WidthAndHeight"
AllowsTransparency="True">
<e:Interaction.Behaviors>
<behaviors:ChangeWindowPositionBehavior/>

378
src/modules/colorPicker/ColorPickerUI/Properties/Resources.Designer.cs generated
View File

@ -222,6 +222,384 @@ namespace ColorPicker.Properties {
}
}
/// <summary>
/// Looks up a localized string similar to Aqua.
/// </summary>
public static string TEXT_COLOR_AQUA {
get {
return ResourceManager.GetString("TEXT_COLOR_AQUA", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Black.
/// </summary>
public static string TEXT_COLOR_BLACK {
get {
return ResourceManager.GetString("TEXT_COLOR_BLACK", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Blue.
/// </summary>
public static string TEXT_COLOR_BLUE {
get {
return ResourceManager.GetString("TEXT_COLOR_BLUE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Blue gray.
/// </summary>
public static string TEXT_COLOR_BLUEGRAY {
get {
return ResourceManager.GetString("TEXT_COLOR_BLUEGRAY", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Bright green.
/// </summary>
public static string TEXT_COLOR_BRIGHTGREEN {
get {
return ResourceManager.GetString("TEXT_COLOR_BRIGHTGREEN", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Brown.
/// </summary>
public static string TEXT_COLOR_BROWN {
get {
return ResourceManager.GetString("TEXT_COLOR_BROWN", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Coral.
/// </summary>
public static string TEXT_COLOR_CORAL {
get {
return ResourceManager.GetString("TEXT_COLOR_CORAL", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Dark blue.
/// </summary>
public static string TEXT_COLOR_DARKBLUE {
get {
return ResourceManager.GetString("TEXT_COLOR_DARKBLUE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Dark gray.
/// </summary>
public static string TEXT_COLOR_DARKGRAY {
get {
return ResourceManager.GetString("TEXT_COLOR_DARKGRAY", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Dark green.
/// </summary>
public static string TEXT_COLOR_DARKGREEN {
get {
return ResourceManager.GetString("TEXT_COLOR_DARKGREEN", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Dark purple.
/// </summary>
public static string TEXT_COLOR_DARKPURPLE {
get {
return ResourceManager.GetString("TEXT_COLOR_DARKPURPLE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Dark red.
/// </summary>
public static string TEXT_COLOR_DARKRED {
get {
return ResourceManager.GetString("TEXT_COLOR_DARKRED", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Dark teal.
/// </summary>
public static string TEXT_COLOR_DARKTEAL {
get {
return ResourceManager.GetString("TEXT_COLOR_DARKTEAL", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Dark yellow.
/// </summary>
public static string TEXT_COLOR_DARKYELLOW {
get {
return ResourceManager.GetString("TEXT_COLOR_DARKYELLOW", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Gold.
/// </summary>
public static string TEXT_COLOR_GOLD {
get {
return ResourceManager.GetString("TEXT_COLOR_GOLD", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Gray.
/// </summary>
public static string TEXT_COLOR_GRAY {
get {
return ResourceManager.GetString("TEXT_COLOR_GRAY", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Green.
/// </summary>
public static string TEXT_COLOR_GREEN {
get {
return ResourceManager.GetString("TEXT_COLOR_GREEN", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Ice blue.
/// </summary>
public static string TEXT_COLOR_ICEBLUE {
get {
return ResourceManager.GetString("TEXT_COLOR_ICEBLUE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Indigo.
/// </summary>
public static string TEXT_COLOR_INDIGO {
get {
return ResourceManager.GetString("TEXT_COLOR_INDIGO", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Lavender.
/// </summary>
public static string TEXT_COLOR_LAVENDER {
get {
return ResourceManager.GetString("TEXT_COLOR_LAVENDER", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Light blue.
/// </summary>
public static string TEXT_COLOR_LIGHTBLUE {
get {
return ResourceManager.GetString("TEXT_COLOR_LIGHTBLUE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Light gray.
/// </summary>
public static string TEXT_COLOR_LIGHTGRAY {
get {
return ResourceManager.GetString("TEXT_COLOR_LIGHTGRAY", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Light green.
/// </summary>
public static string TEXT_COLOR_LIGHTGREEN {
get {
return ResourceManager.GetString("TEXT_COLOR_LIGHTGREEN", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Light orange.
/// </summary>
public static string TEXT_COLOR_LIGHTORANGE {
get {
return ResourceManager.GetString("TEXT_COLOR_LIGHTORANGE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Light turquoise.
/// </summary>
public static string TEXT_COLOR_LIGHTTURQUOISE {
get {
return ResourceManager.GetString("TEXT_COLOR_LIGHTTURQUOISE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Light yellow.
/// </summary>
public static string TEXT_COLOR_LIGHTYELLOW {
get {
return ResourceManager.GetString("TEXT_COLOR_LIGHTYELLOW", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Lime.
/// </summary>
public static string TEXT_COLOR_LIME {
get {
return ResourceManager.GetString("TEXT_COLOR_LIME", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Olive green.
/// </summary>
public static string TEXT_COLOR_OLIVEGREEN {
get {
return ResourceManager.GetString("TEXT_COLOR_OLIVEGREEN", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Orange.
/// </summary>
public static string TEXT_COLOR_ORANGE {
get {
return ResourceManager.GetString("TEXT_COLOR_ORANGE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Pale blue.
/// </summary>
public static string TEXT_COLOR_PALEBLUE {
get {
return ResourceManager.GetString("TEXT_COLOR_PALEBLUE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Periwinkle.
/// </summary>
public static string TEXT_COLOR_PERIWINKLE {
get {
return ResourceManager.GetString("TEXT_COLOR_PERIWINKLE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Pink.
/// </summary>
public static string TEXT_COLOR_PINK {
get {
return ResourceManager.GetString("TEXT_COLOR_PINK", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Plum.
/// </summary>
public static string TEXT_COLOR_PLUM {
get {
return ResourceManager.GetString("TEXT_COLOR_PLUM", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Purple.
/// </summary>
public static string TEXT_COLOR_PURPLE {
get {
return ResourceManager.GetString("TEXT_COLOR_PURPLE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Red.
/// </summary>
public static string TEXT_COLOR_RED {
get {
return ResourceManager.GetString("TEXT_COLOR_RED", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Rose.
/// </summary>
public static string TEXT_COLOR_ROSE {
get {
return ResourceManager.GetString("TEXT_COLOR_ROSE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Sky blue.
/// </summary>
public static string TEXT_COLOR_SKYBLUE {
get {
return ResourceManager.GetString("TEXT_COLOR_SKYBLUE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Tan.
/// </summary>
public static string TEXT_COLOR_TAN {
get {
return ResourceManager.GetString("TEXT_COLOR_TAN", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Teal.
/// </summary>
public static string TEXT_COLOR_TEAL {
get {
return ResourceManager.GetString("TEXT_COLOR_TEAL", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Turquoise.
/// </summary>
public static string TEXT_COLOR_TURQUOISE {
get {
return ResourceManager.GetString("TEXT_COLOR_TURQUOISE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to White.
/// </summary>
public static string TEXT_COLOR_WHITE {
get {
return ResourceManager.GetString("TEXT_COLOR_WHITE", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Yellow.
/// </summary>
public static string TEXT_COLOR_YELLOW {
get {
return ResourceManager.GetString("TEXT_COLOR_YELLOW", resourceCulture);
}
}
/// <summary>
/// Looks up a localized string similar to Value slider.
/// </summary>

168
src/modules/colorPicker/ColorPickerUI/Properties/Resources.resx
View File

@ -193,4 +193,172 @@
<value>Value slider</value>
<comment>Tool tip that appears when hovering over a slider that represents the color value (from HSV)</comment>
</data>
<data name="TEXT_COLOR_WHITE" xml:space="preserve">
<value>White</value>
<comment>White color</comment>
</data>
<data name="TEXT_COLOR_BLACK" xml:space="preserve">
<value>Black</value>
<comment>Black color</comment>
</data>
<data name="TEXT_COLOR_LIGHTGRAY" xml:space="preserve">
<value>Light gray</value>
<comment>Light gray color</comment>
</data>
<data name="TEXT_COLOR_GRAY" xml:space="preserve">
<value>Gray</value>
<comment>Gray color</comment>
</data>
<data name="TEXT_COLOR_DARKGRAY" xml:space="preserve">
<value>Dark gray</value>
<comment>Dark gray color</comment>
</data>
<data name="TEXT_COLOR_CORAL" xml:space="preserve">
<value>Coral</value>
<comment>Coral color</comment>
</data>
<data name="TEXT_COLOR_ROSE" xml:space="preserve">
<value>Rose</value>
<comment>Rose color</comment>
</data>
<data name="TEXT_COLOR_LIGHTORANGE" xml:space="preserve">
<value>Light orange</value>
<comment>Light orange color</comment>
</data>
<data name="TEXT_COLOR_TAN" xml:space="preserve">
<value>Tan</value>
<comment>Tan color</comment>
</data>
<data name="TEXT_COLOR_LIGHTYELLOW" xml:space="preserve">
<value>Light yellow</value>
<comment>Light yellow color</comment>
</data>
<data name="TEXT_COLOR_LIGHTGREEN" xml:space="preserve">
<value>Light green</value>
<comment>Light green color</comment>
</data>
<data name="TEXT_COLOR_LIME" xml:space="preserve">
<value>Lime</value>
<comment>Lime color</comment>
</data>
<data name="TEXT_COLOR_AQUA" xml:space="preserve">
<value>Aqua</value>
<comment>Aqua color</comment>
</data>
<data name="TEXT_COLOR_SKYBLUE" xml:space="preserve">
<value>Sky blue</value>
<comment>Sky blue color</comment>
</data>
<data name="TEXT_COLOR_LIGHTTURQUOISE" xml:space="preserve">
<value>Light turquoise</value>
<comment>Light turquoise color</comment>
</data>
<data name="TEXT_COLOR_PALEBLUE" xml:space="preserve">
<value>Pale blue</value>
<comment>Pale blue color</comment>
</data>
<data name="TEXT_COLOR_LIGHTBLUE" xml:space="preserve">
<value>Light blue</value>
<comment>Light blue color</comment>
</data>
<data name="TEXT_COLOR_ICEBLUE" xml:space="preserve">
<value>Ice blue</value>
<comment>Ice blue color</comment>
</data>
<data name="TEXT_COLOR_PERIWINKLE" xml:space="preserve">
<value>Periwinkle</value>
<comment>Periwinkle color</comment>
</data>
<data name="TEXT_COLOR_LAVENDER" xml:space="preserve">
<value>Lavender</value>
<comment>Lavender color</comment>
</data>
<data name="TEXT_COLOR_PINK" xml:space="preserve">
<value>Pink</value>
<comment>Pink color</comment>
</data>
<data name="TEXT_COLOR_RED" xml:space="preserve">
<value>Red</value>
<comment>Red color</comment>
</data>
<data name="TEXT_COLOR_ORANGE" xml:space="preserve">
<value>Orange</value>
<comment>Orange color</comment>
</data>
<data name="TEXT_COLOR_BROWN" xml:space="preserve">
<value>Brown</value>
<comment>Brown color</comment>
</data>
<data name="TEXT_COLOR_GOLD" xml:space="preserve">
<value>Gold</value>
<comment>Gold color</comment>
</data>
<data name="TEXT_COLOR_YELLOW" xml:space="preserve">
<value>Yellow</value>
<comment>Yellow color</comment>
</data>
<data name="TEXT_COLOR_OLIVEGREEN" xml:space="preserve">
<value>Olive green</value>
<comment>Olive green color</comment>
</data>
<data name="TEXT_COLOR_GREEN" xml:space="preserve">
<value>Green</value>
<comment>Green color</comment>
</data>
<data name="TEXT_COLOR_BRIGHTGREEN" xml:space="preserve">
<value>Bright green</value>
<comment>Rose color</comment>
</data>
<data name="TEXT_COLOR_TEAL" xml:space="preserve">
<value>Teal</value>
<comment>Teal color</comment>
</data>
<data name="TEXT_COLOR_TURQUOISE" xml:space="preserve">
<value>Turquoise</value>
<comment>Turquoise color</comment>
</data>
<data name="TEXT_COLOR_BLUE" xml:space="preserve">
<value>Blue</value>
<comment>Blue color</comment>
</data>
<data name="TEXT_COLOR_BLUEGRAY" xml:space="preserve">
<value>Blue gray</value>
<comment>Blue gray color</comment>
</data>
<data name="TEXT_COLOR_INDIGO" xml:space="preserve">
<value>Indigo</value>
<comment>Indigo color</comment>
</data>
<data name="TEXT_COLOR_PURPLE" xml:space="preserve">
<value>Purple</value>
<comment>Purple color</comment>
</data>
<data name="TEXT_COLOR_DARKRED" xml:space="preserve">
<value>Dark red</value>
<comment>Dark red color</comment>
</data>
<data name="TEXT_COLOR_DARKYELLOW" xml:space="preserve">
<value>Dark yellow</value>
<comment>Dark yellow color</comment>
</data>
<data name="TEXT_COLOR_DARKGREEN" xml:space="preserve">
<value>Dark green</value>
<comment>Dark green color</comment>
</data>
<data name="TEXT_COLOR_DARKTEAL" xml:space="preserve">
<value>Dark teal</value>
<comment>Dark teal color</comment>
</data>
<data name="TEXT_COLOR_DARKBLUE" xml:space="preserve">
<value>Dark blue</value>
<comment>Dark blue color</comment>
</data>
<data name="TEXT_COLOR_DARKPURPLE" xml:space="preserve">
<value>Dark purple</value>
<comment>Dark purple color</comment>
</data>
<data name="TEXT_COLOR_PLUM" xml:space="preserve">
<value>Plum</value>
<comment>Plum color</comment>
</data>
</root>

1
src/modules/colorPicker/ColorPickerUI/Resources/Styles.xaml
View File

@ -4,6 +4,7 @@
xmlns:converters="clr-namespace:ColorPicker.Converters">
<!--CONVERTERS-->
<BooleanToVisibilityConverter x:Key="bool2VisibilityConverter" />
<converters:BoolToInvertedVisibilityConverter x:Key="bool2InvertedVisibilityConverter"/>
<converters:ColorToBrushConverter x:Key="colorToBrushConverter"/>
<converters:ColorToStringConverter x:Key="colorToStringConverter"/>
<converters:NumberToVisibilityConverter x:Key="numberToVisibilityConverter"/>

2
src/modules/colorPicker/ColorPickerUI/Settings/IUserSettings.cs
View File

@ -23,5 +23,7 @@ namespace ColorPicker.Settings
SettingItem<int> ColorHistoryLimit { get; }
ObservableCollection<string> VisibleColorFormats { get; }
SettingItem<bool> ShowColorName { get; }
}
}

4
src/modules/colorPicker/ColorPickerUI/Settings/UserSettings.cs
View File

@ -42,6 +42,7 @@ namespace ColorPicker.Settings
ActivationAction = new SettingItem<ColorPickerActivationAction>(ColorPickerActivationAction.OpenEditor);
ColorHistoryLimit = new SettingItem<int>(20);
ColorHistory.CollectionChanged += ColorHistory_CollectionChanged;
ShowColorName = new SettingItem<bool>(false);
LoadSettingsFromJson();
@ -73,6 +74,8 @@ namespace ColorPicker.Settings
public ObservableCollection<string> VisibleColorFormats { get; private set; } = new ObservableCollection<string>();
public SettingItem<bool> ShowColorName { get; }
private void LoadSettingsFromJson()
{
// TODO this IO call should by Async, update GetFileWatcher helper to support async
@ -103,6 +106,7 @@ namespace ColorPicker.Settings
CopiedColorRepresentation.Value = settings.Properties.CopiedColorRepresentation;
ActivationAction.Value = settings.Properties.ActivationAction;
ColorHistoryLimit.Value = settings.Properties.ColorHistoryLimit;
ShowColorName.Value = settings.Properties.ShowColorName;
if (settings.Properties.ColorHistory == null)
{

10
src/modules/colorPicker/ColorPickerUI/ViewModelContracts/IMainViewModel.cs
View File

@ -17,5 +17,15 @@ namespace ColorPicker.ViewModelContracts
/// Gets the current selected color as a <see cref="Brush"/>
/// </summary>
Brush ColorBrush { get; }
/// <summary>
/// Gets the color name
/// </summary>
string ColorName { get; }
/// <summary>
/// Gets a value indicating whether gets the show color name
/// </summary>
bool ShowColorName { get; }
}
}

25
src/modules/colorPicker/ColorPickerUI/ViewModels/MainViewModel.cs
View File

@ -37,6 +37,11 @@ namespace ColorPicker.ViewModels
/// </summary>
private Brush _colorBrush;
/// <summary>
/// Backing field for <see cref="ColorName"/>
/// </summary>
private string _colorName;
[ImportingConstructor]
public MainViewModel(
IMouseInfoProvider mouseInfoProvider,
@ -56,6 +61,7 @@ namespace ColorPicker.ViewModels
mouseInfoProvider.OnMouseWheel += MouseInfoProvider_OnMouseWheel;
}
_userSettings.ShowColorName.PropertyChanged += (s, e) => { OnPropertyChanged(nameof(ShowColorName)); };
keyboardMonitor?.Start();
}
@ -85,6 +91,21 @@ namespace ColorPicker.ViewModels
}
}
public string ColorName
{
get => _colorName;
private set
{
_colorName = value;
OnPropertyChanged();
}
}
public bool ShowColorName
{
get => _userSettings.ShowColorName.Value;
}
/// <summary>
/// Tell the color picker that the color on the position of the mouse cursor have changed
/// </summary>
@ -94,6 +115,10 @@ namespace ColorPicker.ViewModels
{
ColorBrush = new SolidColorBrush(Color.FromArgb(color.A, color.R, color.G, color.B));
ColorText = ColorRepresentationHelper.GetStringRepresentation(color, _userSettings.CopiedColorRepresentation.Value);
if (_userSettings.ShowColorName.Value)
{
ColorName = ColorNameHelper.GetColorName(color);
}
}
/// <summary>

60
src/modules/colorPicker/ColorPickerUI/Views/MainView.xaml
View File

@ -22,26 +22,70 @@
ShadowDepth="1" />
</Border.Effect>-->
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid>
<!--only color format - one line -->
<Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2InvertedVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="36"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="{Binding ColorBrush}"
<Border Background="{Binding ColorBrush}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderBrush="{DynamicResource WindowBorderBrush}"
BorderThickness="1"
x:Name="ColorBorder"
x:Name="ColorBorderSmall"
CornerRadius="4"/>
<TextBlock Margin="8,5,8,8"
<TextBlock Margin="8,5,8,8"
FontSize="16"
FontWeight="SemiBold"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Grid.Column="1"
Text="{Binding ColorText}"/>
</Grid>
<!--color format and color name - two lines-->
<Grid Margin="2" Visibility="{Binding ShowColorName, Converter={StaticResource bool2VisibilityConverter}}">
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="26"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="52"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Border Background="{Binding ColorBrush}"
HorizontalAlignment="Stretch"
Grid.RowSpan="2"
VerticalAlignment="Stretch"
BorderBrush="{DynamicResource WindowBorderBrush}"
BorderThickness="1"
Margin="1"
x:Name="ColorBorderBig"
CornerRadius="4"/>
<TextBlock Margin="8,5,6,0"
FontSize="16"
Grid.Row="0"
FontWeight="SemiBold"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Grid.Column="1"
Text="{Binding ColorText}"/>
<TextBlock Margin="8,0,8,2"
Height="26"
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
FontSize="16"
FontWeight="SemiBold"
Foreground="{DynamicResource PrimaryForegroundBrush}"
Opacity="0.6"
Text="{Binding ColorName}"/>
</Grid>
</Grid>
</Border>
</Grid>