WordPress.org

Make WordPress Core

Opened 2 years ago

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

Download all attachments as: .zip

Change History (29)

comment:1 scribu2 years ago

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

+1

comment:2 ryan2 years ago

  • Milestone changed from Awaiting Review to 3.4

Let's do it.

comment:3 tw21132 years ago

I got this. Working on getting patches soon.

tw21132 years ago

uses button style for color choosing instead of text link

comment:4 tw21132 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

comment:5 tw21132 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.

tw21132 years ago

Accidentally had the 2011 text domain in the first patch.

tw21132 years ago

custom-header.php color selecting changes

comment:6 tw21132 years ago

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

tw21132 years ago

updated to remove prefixes on trepmal's suggestion

comment:7 tw21132 years ago

  • Keywords has-patch added; needs-patch removed

comment:8 tw21132 years ago

  • Cc michael.d.beckwith@… added

comment:9 sabreuse2 years ago

  • Cc sabreuse@… added

comment:10 lancewillett2 years ago

  • Cc lancewillett added

comment:11 nacin2 years ago

  • Keywords needs-refresh commit added

This needs a slight refresh for trunk, I imagine.

aaroncampbell2 years ago

Twentyeleven style

comment:12 follow-up: aaroncampbell2 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.

comment:13 in reply to: ↑ 12 ; follow-up: lancewillett2 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.

aaroncampbell2 years ago

comment:14 in reply to: ↑ 13 aaroncampbell2 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

comment:15 nacin2 years ago

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

comment:17 johnbillion22 months 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

comment:18 scribu22 months ago

  • Keywords commit removed

comment:19 meliko22 months ago

  • Cc melissachoyce@… added

comment:20 saracannon22 months ago

  • Cc sararcannon@… added

comment:21 Mamaduka21 months ago

  • Cc georgemamadashvili@… added

comment:22 downstairsdev20 months 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 20 months ago by SergeyBiryukov (previous) (diff)

comment:23 scribu20 months ago

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