U4-11541 - Change the color pickers "active" appearance

Created by Jan Skovgaard 28 Jul 2018, 11:28:21 Updated by Sebastiaan Janssen 01 Aug 2018, 07:58:22

Tags: PR

Subtask of: U4-11510

So when I looked at this PR https://github.com/umbraco/Umbraco-CMS/pull/2792 for the color picker in the document editor I thought that it would be nice to display the active state on the "Approved color picker" datatype in the same fashion instead of using that dashed border. The dashed border does not look too good whenever labels are active and using the "checkmark" icon like when selecting the color for the backoffice icons aligns the visuals etc. :-)

3 Attachments


Chriztian Steinmeier 28 Jul 2018, 21:21:27

I like it!

Can't see from the picture if the checkmark is outlined, but I think it should be; otherwise we have to have a dark version too and provide logic to decide which one to use, depending on the underlying color. If the icon is outlined with a dark color, it'll be visible even on very bright backgrounds.

Jan Skovgaard 29 Jul 2018, 05:42:19

@greystate Yeah I realise I should have used a better color example to illustrate it. But it has a outline like you see in this screendump by Owain on his first PR for the color picker on the document type here https://github.com/umbraco/Umbraco-CMS/pull/2555#issuecomment-387024919

It's the same markup and styling that is being used for the color picker datatype with this PR :)

Jan Skovgaard 29 Jul 2018, 05:50:54

The background color in the circle is set to 0.15% black so it works on top of a pure white color too.

Chriztian Steinmeier 29 Jul 2018, 08:38:21

@JanSkovgaard Yes, of course - perfect :)

Sebastiaan Janssen 01 Aug 2018, 07:58:13

Fixed with PR: https://github.com/umbraco/Umbraco-CMS/pull/2816

Priority: Normal

Type: Bug

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted: Pull request

Affected versions:

Due in version: 7.12.0


Story Points: