forked from go-gitea/gitea
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
replace jquery-minicolors with coloris (go-gitea#30055)
Get rid of one more jQuery dependant and have a nicer color picker as well. Now there is only a single global color picker init because that is all that's necessary because the elements are present on the page when the init code runs. The init is slightly weird because the module only takes a selector instead of DOM elements directly. The label modals now also perform form validation because previously it was possible to trigger a 500 error `Color cannot be empty.` by clearing out the color value on labels. <img width="867" alt="Screenshot 2024-03-25 at 00 21 05" src="https://github.com/go-gitea/gitea/assets/115237/71215c39-abb1-4881-b5c1-9954b4a89adb"> <img width="860" alt="Screenshot 2024-03-25 at 00 20 48" src="https://github.com/go-gitea/gitea/assets/115237/a12cb68f-c38b-4433-ba05-53bbb4b1023e">
- Loading branch information
1 parent
40cdc84
commit 7439b8b
Showing
18 changed files
with
224 additions
and
106 deletions.
There are no files selected for viewing
This file contains 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 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 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 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 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 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 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 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 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 { | ||
| 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 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 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 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; | ||
| // 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.