Color Picker Placement

Beta
#1

From the department of pixel-level feedback, I bring to you a color picker issue.

I’m guessing this is a result of the refactoring of the tools, but here’s the rundown:

When setting up an interactive element, I’ll need to change both the Base and Interaction colors. The most logical progression is to click the Base Swatch first, then select a color from the picker.

In the production build, there’s a tiny peak of the Interaction swatch visible to the bottom left of the color picker. It’s not much, but it’s enough to click on in order to switch to that swatch.

But in the beta, the swatch is no longer visible, so you have have to get rid of the color picker by first clicking in the background of the inspector (or some other control) and then clicking that swatch. (I know this isn’t strictly true, and there’s actually 1 or 2 pixels worth of the interaction swatch available… but still, that’s a hard target to hit)

In any event, I’d appreciate a little more of a peak of the Interaction color swatch, or some other way to more quickly switch between those two color settings.

Either bumping it a little higher, or further to the side (or whatever you want to do)

1 Like
#2

Hi Devin,

Thanks for pointing this out. Regretfully at this time, we’re opting not to make any changes here. We’ll keep it in mind for the next cycle as we have numerous things planned related to floating panels (more pickers, undocking workspaces etc.) The ability to click that little bit of space on the second color picker actually wasn’t really intentional. I do understand the UX concern this poses where you can’t see the second item in that row. We’ve been increasingly using that picker pattern, and we wouldn’t want to just change the spacing for one context.

We did make several adjustments to the markup and styling for those controls. Primarily it was refactored to remove the limitation of 5 controls in a box. We also made some little dimension adjustments. Previously, the two “pickers” were output next to each other inline. Now all the controls sit in a grid to make sure half size controls always line up. This means the spacing increased slightly.

I know this isn’t an official solution, but if you wanted to correct that yourself and used a browser extension to add custom CSS you could do this:

.cs-picker-modal.cs-picker-floating-right {
  margin-left: 25px;
}
#3

Alrighty, I will add that to my growing list of customizations. Thanks!

#4

Thanks Devin!

Soon you won’t need to manage that separately. When we do the workspace improvements (next cycle) we are most likely going to add a custom CSS field for the app itself. It might be hidden until activating a constant for developers or power users, but at least you’ll be able to save the CSS right into the site. It should be filterable too in case it’s easier to do in a child theme.

#5

:thumbsup: