Color Picker consistency

[trepmal]

The color pickers used on the custom background page and custom header pages appear and behave slightly differently.

Custom Background:

On the Custom Background page, the picker uses a non-button/text trigger, and once a color is entered a 'clear' option is added.

Custom Header:

On the Custom Header page, the picker uses a button trigger. No 'clear' option is offered.

Twenty Eleven's Theme Options includes another variation:

It is very similar to the Custom Header style, but with an added color swatch preview.

[scribu]

+1

[ryan]

Let's do it.

[tw2113]

I got this. Working on getting patches soon.

[tw2113]

uses button style for color choosing instead of text link

[tw2113]

Here's the custom-background.php diff file. It was pretty straightforward overall. I didn't include the little swatch preview because of the preview at the top is so prominent. ​http://core.trac.wordpress.org/attachment/ticket/19616/custombg.diff

[tw2113]

A bit curious how to go about the color swatch option. I believe a lot of that part is utilizing some jquery + css, to restrict the size of the swatch and make it clickable with the color wheel. However, as I'm still new to the core editing, I am not sure which files the js/css should go into.

[tw2113]

Accidentally had the 2011 text domain in the first patch.

[tw2113]

custom-header.php color selecting changes

[tw2113]

Just added the diff files for adding the color swatch for the Custom Header page

[tw2113]

updated to remove prefixes on trepmal's suggestion

[nacin]

This needs a slight refresh for trunk, I imagine.

[aaroncampbell]

Twentyeleven style

[aaroncampbell]

The new patch (19616.diff​) moves everything to the Twentyeleven style with the swatch. I like the swatch, it seems like the friendliest option. I also went with the button instead of the link and added the clear link when a color is selected. I even did that on the background page for two reasons:

1. Consistency is nice, even if there are two color previews (swatch and big preview box at the top)
2. If the background image is set to tile, you can't see the background color. I know that this means you can't see the background color on the site either (in theory), but since the color picker is still there having the swatch makes it more usable.

[lancewillett]

Replying to aaroncampbell:

The new patch (19616.diff​) moves everything to the Twentyeleven style with the swatch.

One issue I saw in testing: the swatch should trigger the same click event as the "Select a Color" button (broken in both Background and Header).

The rest tests out, works as expected.

[aaroncampbell]

Replying to lancewillett:

One issue I saw in testing: the swatch should trigger the same click event as the "Select a Color" button (broken in both Background and Header).

Good catch. Fixed it in 19616.2.diff​

[nacin]

17:13	koopersmith	For the love of everything, punt.

[scribu]

Related: #21206

[johnbillion]

Why is the hexadecimal representation of the colour the primary input method and primary display? That's not very user-friendly.

The colour picker JS should hide the text input and show it below the colour chart when it's clicked.

[downstairsdev]

This issue has been addressed with the new colorpicker. See: #21206

A patch has been submitted if anyone wants to help test.