WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

#19616 closed enhancement (duplicate)

Color Picker consistency

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

Download all attachments as: .zip

Change History (29)

#1 @scribu
4 years ago

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

+1

#2 @ryan
4 years ago

  • Milestone changed from Awaiting Review to 3.4

Let's do it.

#3 @tw2113
4 years ago

I got this. Working on getting patches soon.

@tw2113
4 years ago

uses button style for color choosing instead of text link

#4 @tw2113
4 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
4 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
4 years ago

Accidentally had the 2011 text domain in the first patch.

@tw2113
4 years ago

custom-header.php color selecting changes

#6 @tw2113
4 years ago

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

@tw2113
4 years ago

updated to remove prefixes on trepmal's suggestion

#7 @tw2113
4 years ago

  • Keywords has-patch added; needs-patch removed

#8 @tw2113
4 years ago

  • Cc michael.d.beckwith@… added

#9 @sabreuse
4 years ago

  • Cc sabreuse@… added

#10 @lancewillett
4 years ago

  • Cc lancewillett added

#11 @nacin
4 years ago

  • Keywords needs-refresh commit added

This needs a slight refresh for trunk, I imagine.

@aaroncampbell
4 years ago

Twentyeleven style

#12 follow-up: @aaroncampbell
4 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
4 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
4 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
4 years ago

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

#16 @scribu
4 years ago

Related: #21206

#17 @johnbillion
4 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
4 years ago

  • Keywords commit removed

#19 @meliko
4 years ago

  • Cc melissachoyce@… added

#20 @saracannon
4 years ago

  • Cc sararcannon@… added

#21 @Mamaduka
4 years ago

  • Cc georgemamadashvili@… added

#22 @downstairsdev
3 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 3 years ago by SergeyBiryukov (previous) (diff)

#23 @scribu
3 years ago

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