Redesigned color picker widget #324

bennothommo · 2021-09-27T14:42:19Z

This PR introduces a newly redesigned color picker widget, built on top of the Pickr UI widget as opposed to Spectrum, which has not seen a release since 2016.

Benefits

More clean and streamlined UX - available colors are now shown within the popover as opposed to spanning across the entire row at all times. The UI is very similar to VSCode's color picker, which should hopefully encourage familiarity.
Text input next to the color picker allows full copy+paste capabilities, as well as simply typing out the color code.
Supports touch screen devices.
Full accessibility and internationalisation support.
Full support for other color formats (HEX / RGB / HSL / CMYK) - this PR would replace Added format option to allow color picker widget to return alternate color formats #105 and fix Allow color picker widget to return alternate color formats #94
Will also fix Pressing Enter after manually entering a colour in the Color Picker widget saves the entire form #321
Will properly clean up and dispose of the widget as needed.

New config options

Option	Description
formats	Specifies the color format(s) to store. Can be a string or an array of values `cmyk`, `hex`, `hsl` and `rgb`. Specifying `all` as a string will allow all formats. Defaults to `hex`.
allowCustom	If `false`, only the colors specified in `availableColors` will be available for selection. The color picker palette will be disabled. Default `true`.

Notes

Given that we've dropped support for IE11 in the Backend, I've used some ES6 code (just arrow functions, really) to resolve some scoping issues in the JS, and the picker itself uses CSS Grid Layout. Both features, AFAICT, have been supported by all browser versions within the last 4-5 years, so I don't think we're leaving anyone behind with this.
This should be fully compatible with values from the old color picker, since they would've been stored as hex values. I also believe that it should be able to convert any value to another format if someone opts to change the format in the config, but I have not tested this yet.
I'll post up a video of this tomorrow, but feel free to have a play around with it on Gitpod in the mean time. Go to Settings > Customize back-end > Colors to get a couple of color picker widgets to play with.

Link: https://github.com/Simonwep/pickr

- Added ability to allow or disallow custom colors - Made picker more usable and match up to the input - Picker shows when input is focused - Added additional format support

LukeTowers · 2021-09-27T14:47:41Z

Something seems off about the font, is that the default font? Maybe we should use a mono space font instead

bennothommo · 2021-09-27T14:54:53Z

@LukeTowers yeah it's the default body font. I'll change it to monospace.

LukeTowers · 2021-09-27T19:48:16Z

Could we also provide format: any to allow the user to pick which format they want to use?

bennothommo · 2021-09-28T03:12:55Z

@LukeTowers multiple format support has been added.

If available colors are specified on a particular color picker, those will be used instead.

…write

LukeTowers · 2021-10-12T06:31:35Z

Is there a docs PR for the changes?

bennothommo · 2021-10-12T06:45:51Z

@LukeTowers not yet - I'll put one through shortly. Any further thoughts on this, as it is ready to merge?

modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm

modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js

modules/backend/models/BrandSetting.php

modules/backend/formwidgets/ColorPicker.php

Refs: wintercms/winter#324

* develop: (25 commits) Support embedded data URIs in the list image column type Make some adjustments to the readme content Update banner in readme Add new GitHub banner Documentation with icons (#347) Limit options shown in group filter, apply scope when retrieving filtered options Add Exception on wrong relation type in relation formwidget (#334) Redesigned color picker widget (#324) Add winter:test command (#202) Use the correct backend timezone config key (#337) Get changelog only of the current branch Fix Markdown editor sizing issue on Chrome. Check overrides for parent locale when compiling language files (#242) Fixing commas in English translation files (#305) Added Latvian translations for Allowed IP messages (#304) Add missing filter translations (#303) Clean up newlines Update Russian language (#302) Fix issue present in overriding RelationController partials using the default code Maintenance Allowed IP list (#147) ...

bennothommo added 7 commits September 25, 2021 08:35

Replace Spectrum with Pickr

1040b63

Link: https://github.com/Simonwep/pickr

Convert Spectrum in widget to corresponding Pickr functionality

5dfa1c8

WIP

3117817

Further colorpicker WIP

5b00cac

- Added ability to allow or disallow custom colors - Made picker more usable and match up to the input - Picker shows when input is focused - Added additional format support

Finalising new color picker functionality

ab89260

Tweaks to allow Enter key to select, but not submit the whole form

85c4b6a

Remove debug code

c069e0c

bennothommo added enhancement PRs that implement a new feature or substantial change Status: Testing Needed needs review Issues/PRs that require a review from a maintainer labels Sep 27, 2021

bennothommo added this to the v1.1.7 milestone Sep 27, 2021

Use a monospaced font for preview color value

1104baa

bennothommo added 4 commits September 28, 2021 09:56

Revert codeeditor.css

8e7dff9

Remove old template code

caff3ce

Add lang strings for ARIA labels in color picker

ba042f8

Allow for multiple formats and format selection

d5f931d

bennothommo added 3 commits September 28, 2021 11:15

Add additional width to input for larger formats

f85914e

Add ability to define default swatches for all color pickers.

f533e71

If available colors are specified on a particular color picker, those will be used instead.

Merge remote-tracking branch 'origin/develop' into wip/colorpicker-re…

f20982b

…write

Fix color picker handling in preview mode

9357e2a

bennothommo removed Status: Testing Needed needs review Issues/PRs that require a review from a maintainer labels Oct 12, 2021

bennothommo added a commit to wintercms/docs that referenced this pull request Oct 12, 2021

Docs for wintercms/winter#324

a889314

bennothommo mentioned this pull request Oct 12, 2021

Added format option to allow color picker widget to return alternate color formats #105

Closed

LukeTowers reviewed Oct 12, 2021

View reviewed changes

modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm Outdated Show resolved Hide resolved

Update modules/backend/formwidgets/colorpicker/partials/_colorpicker.htm

019d5dc

LukeTowers reviewed Oct 12, 2021

View reviewed changes

modules/backend/formwidgets/colorpicker/assets/js/colorpicker.js Outdated Show resolved Hide resolved

modules/backend/models/BrandSetting.php Show resolved Hide resolved

Fix default format value

0c90fde

Mrkbingham reviewed Oct 14, 2021

View reviewed changes

modules/backend/formwidgets/ColorPicker.php Show resolved Hide resolved

bennothommo merged commit 6a2f234 into develop Oct 25, 2021

bennothommo deleted the wip/colorpicker-rewrite branch October 25, 2021 03:19

bennothommo added a commit to wintercms/docs that referenced this pull request Oct 25, 2021

Docs for new color picker widget (#33)

2055554

Refs: wintercms/winter#324

LukeTowers added the Status: Completed label Oct 25, 2021

arvislacis mentioned this pull request Nov 28, 2021

Update Latvian language #358

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Redesigned color picker widget #324

Redesigned color picker widget #324

Uh oh!

bennothommo commented Sep 27, 2021 •

edited

Loading

Uh oh!

LukeTowers commented Sep 27, 2021

Uh oh!

bennothommo commented Sep 27, 2021

Uh oh!

LukeTowers commented Sep 27, 2021

Uh oh!

bennothommo commented Sep 28, 2021

Uh oh!

LukeTowers commented Oct 12, 2021

Uh oh!

bennothommo commented Oct 12, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Redesigned color picker widget #324

Redesigned color picker widget #324

Uh oh!

Conversation

bennothommo commented Sep 27, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Benefits

New config options

Notes

Uh oh!

LukeTowers commented Sep 27, 2021

Uh oh!

bennothommo commented Sep 27, 2021

Uh oh!

LukeTowers commented Sep 27, 2021

Uh oh!

bennothommo commented Sep 28, 2021

Uh oh!

LukeTowers commented Oct 12, 2021

Uh oh!

bennothommo commented Oct 12, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bennothommo commented Sep 27, 2021 •

edited

Loading