-
-
Notifications
You must be signed in to change notification settings - Fork 5.8k
replace jquery-minicolors with coloris #30055
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from all commits
Commits
Show all changes
16 commits
Select commit
Hold shift + click to select a range
3f12ac5
replace jquery-minicolors with coloris
silverwind 52d805f
css cleanup
silverwind c4ee30c
Update web_src/css/features/colorpicker.css
silverwind 98014d3
lowercase
silverwind 0e28fa2
comment z-index
silverwind cb5b94e
Merge branch 'main' into coloris
silverwind 22f7b91
Update web_src/js/features/colorpicker.js
silverwind c36d353
Merge remote-tracking branch 'origin/main' into coloris
silverwind 28dcdca
strip down css to essentials, add comment
silverwind 46ba737
tweak comment
silverwind 0e2d09e
remove public/assets/img/webpack
silverwind b0a58d7
fix lint
silverwind 015f2be
more css cleanup, remove negative margins
silverwind 58aced4
Merge branch 'main' into coloris
silverwind 08138c9
Merge branch 'main' into coloris
silverwind 48a1845
add js-color-picker-input class, many cleanups
silverwind File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,164 @@ | ||
| /* This is a stripped-down version of coloris's CSS tailored to our needs. It does only include | ||
| opaqua colors, and if more features like opacity are needed, the CSS needs to be extended | ||
| based on upstream: https://github.com/mdbassit/Coloris/blob/main/src/coloris.css. */ | ||
|
|
||
| .js-color-picker-input { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| } | ||
|
|
||
| .js-color-picker-input input { | ||
| padding-top: 8px !important; | ||
| padding-bottom: 8px !important; | ||
| padding-left: 32px !important; | ||
| } | ||
|
|
||
| .clr-picker { | ||
wxiaoguang marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| display: none; | ||
| flex-wrap: wrap; | ||
| position: absolute; | ||
| width: 200px; | ||
| z-index: 1002; /* above .ui.modal which has 1001 */ | ||
| border-radius: var(--border-radius); | ||
| background-color: var(--color-menu); | ||
| justify-content: flex-end; | ||
| direction: ltr; | ||
| box-shadow: 0 5px 20px var(--color-shadow); | ||
| user-select: none; | ||
| } | ||
|
|
||
| .clr-picker.clr-open { | ||
| display: flex; | ||
| } | ||
|
|
||
| .clr-gradient { | ||
| position: relative; | ||
| width: 100%; | ||
| height: 100px; | ||
| border-radius: 3px 3px 0 0; | ||
| background: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentcolor); /* stylelint-disable-line scale-unlimited/declaration-strict-value */ | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .clr-marker { | ||
| position: absolute; | ||
| width: 12px; | ||
| height: 12px; | ||
| margin: -6px 0 0 -6px; | ||
| border: 1px solid var(--color-white); | ||
| border-radius: 50%; | ||
| background-color: currentcolor; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .clr-picker input[type="range"]::-webkit-slider-runnable-track { | ||
| width: 100%; | ||
| height: 16px; | ||
| } | ||
|
|
||
| .clr-picker input[type="range"]::-webkit-slider-thumb { | ||
| width: 16px; | ||
| height: 16px; | ||
| -webkit-appearance: none; | ||
| } | ||
|
|
||
| .clr-picker input[type="range"]::-moz-range-track { | ||
| width: 100%; | ||
| height: 16px; | ||
| border: 0; | ||
| } | ||
|
|
||
| .clr-picker input[type="range"]::-moz-range-thumb { | ||
| width: 16px; | ||
| height: 16px; | ||
| border: 0; | ||
| } | ||
|
|
||
| .clr-hue { | ||
| background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); /* stylelint-disable-line scale-unlimited/declaration-strict-value */ | ||
| position: relative; | ||
| width: calc(100% - 40px); | ||
| height: 10px; | ||
| margin: 10px 20px; | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| .clr-hue input[type="range"] { | ||
| position: absolute; | ||
| width: calc(100% + 32px); | ||
| margin: 0; | ||
| background-color: transparent; | ||
| opacity: 0; | ||
| cursor: pointer; | ||
| appearance: none; | ||
| } | ||
|
|
||
| .clr-hue div { | ||
| position: absolute; | ||
| width: 16px; | ||
| height: 16px; | ||
| left: 0; | ||
| top: 50%; | ||
| transform: translate(-50%, -50%); | ||
| border: 2px solid var(--color-white); | ||
| border-radius: 50%; | ||
| background-color: currentcolor; | ||
| box-shadow: 0 0 1px var(--color-shadow); | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| .clr-field { | ||
| flex: 1; | ||
| position: relative; | ||
| color: transparent; | ||
| } | ||
|
|
||
| .clr-field button { | ||
| position: absolute; | ||
| aspect-ratio: 1; | ||
| height: 16px; | ||
| left: 10px; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| color: inherit; | ||
| pointer-events: none; | ||
| border-radius: 2px; | ||
| background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa); /* stylelint-disable-line scale-unlimited/declaration-strict-value */ | ||
| background-position: 0 0, 4px 4px; | ||
| background-size: 8px 8px; | ||
| } | ||
|
|
||
| .clr-field button::after { | ||
| content: ""; | ||
| display: block; | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 100%; | ||
| left: 0; | ||
| top: 0; | ||
| border-radius: inherit; | ||
| background-color: currentcolor; | ||
| } | ||
|
|
||
| .clr-marker:focus { | ||
| outline: none; | ||
| } | ||
|
|
||
| .clr-keyboard-nav .clr-marker:focus, | ||
| .clr-keyboard-nav .clr-hue input:focus + div, | ||
| .clr-keyboard-nav .clr-alpha input:focus + div { | ||
| outline: none; | ||
| box-shadow: 0 0 2px 2px var(--color-white); | ||
| } | ||
|
|
||
| .clr-picker .clr-preview, | ||
| .clr-picker .clr-clear, | ||
| .clr-picker .clr-swatches, | ||
| .clr-picker .clr-format, | ||
| .clr-picker .clr-alpha, | ||
| .clr-picker .clr-color { | ||
| display: none; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,31 @@ | ||
| import $ from 'jquery'; | ||
| export async function initColorPickers(selector = '.js-color-picker-input input', opts = {}) { | ||
| const inputEls = document.querySelectorAll(selector); | ||
| if (!inputEls.length) return; | ||
|
|
||
| export async function createColorPicker(els) { | ||
| if (!els.length) return; | ||
|
|
||
| await Promise.all([ | ||
| import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors'), | ||
| import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors/jquery.minicolors.css'), | ||
| const [{coloris, init}] = await Promise.all([ | ||
| import(/* webpackChunkName: "colorpicker" */'@melloware/coloris'), | ||
| import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'), | ||
| ]); | ||
|
|
||
| return $(els).minicolors(); | ||
| init(); | ||
| coloris({ | ||
| el: selector, | ||
| alpha: false, | ||
| focusInput: true, | ||
| selectInput: false, | ||
| ...opts, | ||
| }); | ||
|
|
||
| for (const inputEl of inputEls) { | ||
| const parent = inputEl.closest('.js-color-picker-input'); | ||
| // prevent tabbing on the color preview `button` inside the input | ||
| parent.querySelector('button').tabIndex = -1; | ||
delvh marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| // init precolors | ||
| for (const el of parent.querySelectorAll('.precolors .color')) { | ||
| el.addEventListener('click', (e) => { | ||
| inputEl.value = e.target.getAttribute('data-color-hex'); | ||
| inputEl.dispatchEvent(new Event('input', {bubbles: true})); | ||
| }); | ||
| } | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.