Color Picker V2

[martinchrzan]

Summary of the Pull Request

Color Picker V2 is here!

Following on #5379 we have added a new "Editor" window which will be opened when pressing Activation shortcut for Color Picker (Shift + Win + C), this is configurable and you can decide on following actions.
For a faster adoption, we set this setting to be checked by a default.

When pressing the activation shortcut, following window will open:

Top left corner - color picker icon will open color picker and you can start picking your colors on the screen
Left side list - history of picked/configured colors, newest on top, we have set this list to show 20 latest colors (we can expose this number settings in SettingsUI, to be configurable). Right click enables removing colors from this list.
Top right corner - settings icon - will open SettingsUI and ColorPicker page directly (this functionality is dependent on #7408)
Middle part top - color gradient - biggest middle bar shows the current color, on sides there are color variations - clicking on those will add a new color into history
Middle part - color formats

DEMOS!

New picking experience
The new picking experiences uses Fluent Design (like drop shadows for better contrast) and is now theme aware. Picker size is dynamic depending on the color format length displayed inside.

Checking different colors and copying desired color format into the clipboard
You can either select and copy only a part of a color format or click the icon on the right to copy the whole string into the clipboard directly.

Fine tune picked color
You can pick a different shade of color by clicking on the smaller rectangles. These will be added to the history and will be selected. By clicking on the main color you can finetune the color by using the sliders.

Theming support
Colorpicker now supports light, dark and all high contrast themes (#7290)

New icon
Shown in taskbar and task manager.

Add/hide color formats
The user is able to show/hide and re-order the color formats in Settings. Using the toggleswitch colorformats can be enabled/disabled, dragging them changes the order.

Please note, there will be further bug fixes and smaller design tweaks!

PR Checklist

• Applies to [Color Picker (Tracker)] Editor V2 & custom color formats #5379, [ColorPicker] Theming and highcontrast support #7290, [ColorPicker Settings] Shortcut setting missing settings group header #7532, [Colorpicker v2] Remove MahApps and add custom thememanger #8023
• CLA signed. If not, go over here and sign the CLA
• Tests added/passed
• Requires documentation to be updated
• I've discussed this with core contributors already. If not checked, I'm ready to accept this work might be rejected in favor of a different grand plan. Issue number where discussion took place: #xxx

Info on Pull Request

What does this include?

Validation Steps Performed

How does someone test & validate?

[htcfreek]

@niels9001 , @martinchrzan
Omg, it's amazing. Great work.

One point I want to be mentioned: The contrast between the copyColor button and the ui background could be higher.

[enricogior]

Great work!!!

Joining @htcfreek in asking if this elements have enough test to background contrast, since we already have some accessibility bugs opened because of similar low contrast values

[niels9001]

Good comments. We need another go to check on accessibility, inc. colors.

[htcfreek]

@niels9001 , @martinchrzan
Omg, it's amazing. Great work.

One point I want to be mentioned: The contrast between the copyColor button and the ui background could be higher.

For clarification:
My comment is regarding to the moment when you hover and press the button. The the color button and the background is nearly the same, what you can see in your own screenshot.

[htcfreek]

And another suggestion:

You have this wide button for adding color representations where the people mostly will click in the middle where you have the plus sign. And then opens a small menu on the right side and you have to move the cursor over the half ui.

1. This is not the best usability and looks a bit like not fully thought it. - But I think you have thought much about the way you could do this ui.
2. Not sure if this is a good solution in way of accessibility.

=> Possible solution: The menu should have the same wide as the button (and centered text) or it opens at the cursor position.

[niels9001]

@htcfreek let's review final UI once this goes out of draft. There's still work to be done and we are aware :)

[enricogior]

@martinchrzan
we did some testing and we didn't run into any issue 👍

I have some feedback for the UX (I didn't read all the comments in the PR, so sorry if these have been already suggested/sorted out):

• the editor opens in the same place where it was last used, it would be nice to have an option to make it open where the cursor is
• is not immediately clear that in the editor is possible to choose a similar color or adjust the current color, have you considered to add a label on top of the color bar?
• what about adding to the right click menu an option to remove all the colors?
  

[martinchrzan]

@enricogior

1. Right know it should open in the center of the screen, we could open it where you picked it, I just wonder if that would not be confusing - lets say you open editor (without picking a color) - center screen - now you press color picking button (top left) and you pick any color - would you want you editor to open at the same place it was before or move to a new location? Or do you want to have as an option in the settings? @niels9001 any opinions on this one?
2. Agree, it is not immediately clear that you can do something with the color bar. @niels9001 what about Enrico's suggestion for some label? Would it be cluttering the UI?
3. Sure we can add that. @niels9001 Should we use the same icon as for "remove"?

[niels9001]

@enricogior

1. Right know it should open in the center of the screen, we could open it where you picked it, I just wonder if that would not be confusing - lets say you open editor (without picking a color) - center screen - now you press color picking button (top left) and you pick any color - would you want you editor to open at the same place it was before or move to a new location? Or do you want to have as an option in the settings? @niels9001 any opinions on this one?
2. Agree, it is not immediately clear that you can do something with the color bar. @niels9001 what about Enrico's suggestion for some label? Would it be cluttering the UI?
3. Sure we can add that. @niels9001 Should we use the same icon as for "remove"?

1. I'd ship it, see if there's any feedback from users about the window position and then think about a solution.
2. I'd avoid using a label because we already have so much UI stuff going on in a small window - the colors change color on mouse hover and a tooltip shows a message. We could maybe change the cursor when hovering over a color? Photoshop does this:

3. I'd go for a 'clear all' button at the bottom of the vertical list - or have keyboard support to multi-select colors (e.g. holding shift, right-clicking => delete would then remove all colors). Adding keyboard support/multi-select might be more work I can imagine?

[enricogior]

@martinchrzan @niels9001
let's ship it and let's see the community feedback.

[martinchrzan]

@niels9001 Should we change the cursor to hand (or something else) when over ColorPickerControlor or would it be confusing since we don't change it on other buttons?

[niels9001]

Yeah, let's leave it out for now and ship it to see if we run into any major issues.

[niels9001]

We could add e.g. a teaching tip at some point as an OoBE for the editor if users don't see it at all.

[martinchrzan]

@niels9001 also, should we drop/decrease drop shadow on the picker/zoom window since I feel like it makes it jerky?
@enricogior did you notice picker being slower when moving on a screen?

[enricogior]

@martinchrzan

did you notice picker being slower when moving on a screen?

No, but I tested on a desktop with a 12 core CPU and a dedicated GPU.

[ghost]

🥳 🎉

[niels9001]

@martinchrzan yeah, if it lags let's get it out. I don't think WPF shadows are as optimized as the UWP ThemeShadows.

[htcfreek]

Do we get this in for 0.27?

[crutkas]

@martinchrzan this will need #8142 fix which is still being tested for CI to pass.

[ghost]

🎉 🥳