U4-5322 - Add Labels to Colors in Color Picker

Created by Nicholas Westby 07 Aug 2014, 23:51:41 Updated by Nicholas Westby 13 Jun 2018, 18:46:56

Tags: PR

Subtask of: U4-9609

It would be nice if I could assign labels to colors in the color picker data type.

That way, users could refer to them by name. Also, I sometimes just want the user to select a color-based style (e.g., the "blue" style), which actually changes multiple elements to different colors (e.g., blue text with a light-blue background on hover).

If I could allow the user to select a color based on label label, my code could compare against that label and I wouldn't have to worry about comparing against a hex value that may change in the future (e.g., I may decide that the "blue" style around the site should actually be a less saturated blue).

2 Attachments


Nicholas Westby 02 Feb 2015, 05:23:17

FYI, I'm currently attempting to address this.

Nicholas Westby 02 Feb 2015, 05:31:27

It's not quite working yet, but this is what I have so far (in case anybody has recommendations before I submit a pull request): !prototype.png!

Nicholas Westby 11 Feb 2015, 07:18:59

Looks like I have it working. Before I remove my debug code and send a pull request, feel free to recommend a better layout (this is all I have so far): !layout.png!

I can see that not working well for colors with long labels. I might just do overflow hidden and add a title attribute to show the full label on hover.

Nicholas Westby 16 Feb 2015, 07:23:11

Pull request submitted: https://github.com/umbraco/Umbraco-CMS/pull/639

Bjarne Fyrstenborg 01 Mar 2015, 02:09:27

Maybe something like the color picker here http://bootflat.github.io/color-picker.html or color swatches here http://bootflat.github.io/documentation.html where you maybe as a developer can decide whether color names and color hex code is presented with the color.

The color swatches could be another idea if you had some themes or just used some gradients. Or you had some boxes/widgets where the editor could choose header color. That is a different issue and could always create a custom property editor for that. But maybe also more a palette/theme picker, which could save json, with a name/alias + each color with color-code together with an alias e.g. that "header-color" meant "#3366BB". The last part is not directly related to this issue - more a enhancement/alternative to the existing color picker.

Bjarne Fyrstenborg 01 Mar 2015, 02:18:17

For a color scheme picker like this in WordPress https://wordpress.org/plugins/admin-color-schemes/screenshots/ I think nuPickers can be used with the radiobutton list and render an image (or some styling of html in a razor macro) based on the value.

Stephan 16 Oct 2017, 14:21:38

New PR https://github.com/umbraco/Umbraco-CMS/pull/2245 heavily inspired from original PR https://github.com/umbraco/Umbraco-CMS/pull/639/files which I had to close because the original repo/patch was not available anymore.

Test: when editing a color picker data type it should be possible to add labels to colors, and to check a box to "use labels in prevalues". If the box is not checked, everything should work as before, ie the color picker should work, and the value should be returned to views as a string (including w/ModelsBuidler). If the box is checked, the color picker should display the labels underneath the colors. In addition, the color is returned as an object to views, with two properties: the color (string) and the label (string).

@Knickerbocker I know it's quite late... but your feedback is always appreciated!

Robert Copilau 17 Oct 2017, 12:46:51

Nice one @Knickerbocker and @zpqrtbnk! Tested everything included in the test plan provided by Stephan and everything works as expected. Merging.

Sebastiaan Janssen 19 Oct 2017, 10:36:36

We'll work on this some more to split up the datatype into two different datatypes, since the current situation will inevitably cause confusion and frustration with people expecting the current data format to be stored, while we now "magically" store a new format with the click of a checkbox.

The new datatype can also combine with the sorting fixes in this PR: https://github.com/umbraco/Umbraco-CMS/pull/1504

Nicholas Westby 20 Oct 2017, 02:08:13

Makes sense. I'm glad to see progress being made on this. I'm curious, does anybody know if there is a precedent for a core property editor that has a list of complex items/prevalues (i.e., each item is storing more than just a simple number or string)? Just curious, as that's what this one would do (i.e., it'd store a label and value for each item). I suppose the Umbraco grid would fall into this category, though it's a fair bit more complicated.

Sebastiaan Janssen 04 Jan 2018, 09:25:21

Unfortunately our focus has been elsewhere recently and there's a bit of extra work to do before we can put it into a release properly. I'll move this to 7.8 so that we can pull it all together properly.

Nicholas Westby 13 Jun 2018, 18:46:56

Was this merged in? I see that a replacement pull request was created, and that replacement pull request is marked as "merged": https://github.com/umbraco/Umbraco-CMS/pull/2245

Priority: Normal

Type: Feature (request)

State: Reopened


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.1.4, 7.9.0

Due in version:

Sprint: Sprint 74

Story Points: 2