Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#19616 closed enhancement (duplicate)

Color Picker consistency

Reported by: trepmal's profile trepmal Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.2
Component: UI Keywords: has-patch
Focuses: Cc:

Description

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

Custom Background:
http://cl.ly/CjWS/custom-background.png

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:
http://cl.ly/CiPg/custom-header.png

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

Twenty Eleven's Theme Options includes another variation:
http://cl.ly/Cihf/theme-options.png
It is very similar to the Custom Header style, but with an added color swatch preview.

Attachments (6)

custombg.diff (1.1 KB) - added by tw2113 12 years ago.
uses button style for color choosing instead of text link
custombg.2.diff (1.1 KB) - added by tw2113 12 years ago.
Accidentally had the 2011 text domain in the first patch.
customheader.diff (2.0 KB) - added by tw2113 12 years ago.
custom-header.php color selecting changes
customheader.2.diff (2.0 KB) - added by tw2113 12 years ago.
updated to remove prefixes on trepmal's suggestion
19616.diff (4.8 KB) - added by aaroncampbell 12 years ago.
Twentyeleven style
19616.2.diff (5.1 KB) - added by aaroncampbell 12 years ago.

Download all attachments as: .zip

Change History (29)

#1 @scribu
12 years ago

  • Keywords needs-patch added
  • Type changed from defect (bug) to enhancement

+1

#2 @ryan
12 years ago

  • Milestone changed from Awaiting Review to 3.4

Let's do it.

#3 @tw2113
12 years ago

I got this. Working on getting patches soon.

@tw2113
12 years ago

uses button style for color choosing instead of text link

#4 @tw2113
12 years ago

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

#5 @tw2113
12 years ago

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
12 years ago

Accidentally had the 2011 text domain in the first patch.

@tw2113
12 years ago

custom-header.php color selecting changes

#6 @tw2113
12 years ago

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

@tw2113
12 years ago

updated to remove prefixes on trepmal's suggestion

#7 @tw2113
12 years ago

  • Keywords has-patch added; needs-patch removed

#8 @tw2113
12 years ago

  • Cc michael.d.beckwith@… added

#9 @sabreuse
12 years ago

  • Cc sabreuse@… added

#10 @lancewillett
12 years ago

  • Cc lancewillett added

#11 @nacin
12 years ago

  • Keywords needs-refresh commit added

This needs a slight refresh for trunk, I imagine.

@aaroncampbell
12 years ago

Twentyeleven style

#12 follow-up: @aaroncampbell
12 years ago

  • Keywords needs-refresh removed

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.

#13 in reply to: ↑ 12 ; follow-up: @lancewillett
12 years ago

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.

#14 in reply to: ↑ 13 @aaroncampbell
12 years ago

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

#15 @nacin
12 years ago

  • Milestone changed from 3.4 to Future Release
17:13	koopersmith	For the love of everything, punt.

#16 @scribu
12 years ago

Related: #21206

#17 @johnbillion
12 years ago

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.

http://i.imgur.com/wBoR6.png

#18 @scribu
12 years ago

  • Keywords commit removed

#19 @meliko
12 years ago

  • Cc melissachoyce@… added

#20 @saracannon
12 years ago

  • Cc sararcannon@… added

#21 @Mamaduka
12 years ago

  • Cc georgemamadashvili@… added

#22 @downstairsdev
12 years ago

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

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

Last edited 12 years ago by SergeyBiryukov (previous) (diff)

#23 @scribu
12 years ago

  • Milestone Future Release deleted
  • Resolution set to duplicate
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.