Reconsider the swatch design

[superhighfives]

From #3 (comment)

One thing I would love to look at in future is making the text editable as well, so you can paste in your own value on either side. I want that to be really seamless, so it's a little further down the track, but I know I'll need to slightly rethink the layout of the swatches. This could be a good opportunity to consider that now.

One thought is centralising the copy to a single icon, with left and right click. Here's a quick sketch:

I think my only concern would be doing it in a way that makes it clear it has a right click, but that could be a part of the onboarding, potentially. Also, you have the ability to change the colour format in preferences, so it's never 100% hidden. 🤔

[superhighfives]

Thoughts:

• Make the text values selectable, and editable, so you can compare colours without the picker
• Show keyboard shortcuts in the UI, to make them clearer (see Show keyboard shortcuts in app #23)—could be on button hover, or small text
• Copy button on click, right click for copy options (is there a right click icon / indicator for Mac UI? 🤔)

[ovanbiervliet]

Regarding icon contrast too low (#43), it looks like it is not solved in Big Sur 11.3 (tried latest beta). So this redesign of the swatch seems like a better route 👍

[superhighfives]

Massive thanks for @bikrrr for these (edited down) ideas:

Idea 1 – Easier copying of the current color

I found myself clicking on the color value itself to copy it. I remembered that it was in the more/overflow (3-dot) menu, but it felt a little clunky as that's far away from the displayed value and takes two clicks. So my idea is to allow copying with a single click by clicking in the bottom footer of the color swatch. That area could display a "copy" icon next to the value on hover, indicating "copy" is available (plus it'd still be in the "more" and right-click menus).

Idea 2 – Select which value types to display

Promote the color value type selector to the title bar, like this:
Color selector title bar.png
This makes it more discoverable off the bat, and super-quick to change types. This would remove the need to have the two "more" menus and, if it remembered the last value, you could remove that section from Preferences as well.

Big fan of the idea of moving the format into the toolbar, and I've made a branch to start testing that out. Would love to try that in a beta. This simplification also makes sense to me as part of the swatch redesign considerations.

The other thing this helps us resolve is that the more menu causes a bunch of issues (primarily, that component in SwiftUI doesn't have a huge number of API options, which makes it difficult to customise when placed against different colours) so reducing the need for it at all, a ton of pain points will go away. And visually things will be both simplified and more findable. you go from this more menu and preferences, to a switcher for format and a copy button. Win win.

🙌

[superhighfives]

Some pretty significant changes to the UI in v0.0.10-beta1, including an overhaul of the swatch itself, the removal of the contextual menu, and the relocation of the color format option from preferences to the toolbar. You can get it by checking "Subscribe to beta updates" in preferences and checking for updates. 👍

[ovanbiervliet]

• Love the output switcher in the toolbar, especially that it's not a dropdown. Perhaps in the future when more output formats are added this will not be sustainable but for now 👌
• The copy and swap buttons are good too, really work fine together
• Minor annoyance: why is there a slight shade behind the fg/bg text, other than aesthetic? It does not really add to readability, and it's a different color than what is mentioned from the capture:
  

[superhighfives]

Yeah, this is something I've been thinking about as well. Was initially intended to aid readability, but had to make some changes to match Apple's defaults for the Touch Bar, so it doesn't make as much sense as before. Having a look as part of the wider swatch considerations. Thanks @ovanbiervliet.

[superhighfives]

Great, you can try out an update to this in the v0.0.10-beta2 by checking "Subscribe to beta updates" in preferences and checking for updates. 🙌

[ovanbiervliet]

Perfect!

[superhighfives]

Great, this is merged in and will be released with v0.0.10. 👍