replace jquery-minicolors with coloris (#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">

(cherry picked from commit dd8dde2be89921b2b1497c6cc5eafdde213429cb)
This commit is contained in:
silverwind 2024-03-29 04:00:07 +01:00 committed by Gergely Nagy
parent 16696a42f5
commit 2e542f17a3
No known key found for this signature in database
18 changed files with 224 additions and 106 deletions

View file

@ -77,7 +77,6 @@ cpu.out
/public/assets/css /public/assets/css
/public/assets/fonts /public/assets/fonts
/public/assets/img/avatar /public/assets/img/avatar
/public/assets/img/webpack
/vendor /vendor
/web_src/fomantic/node_modules /web_src/fomantic/node_modules
/web_src/fomantic/build/* /web_src/fomantic/build/*

1
.gitignore vendored
View file

@ -83,7 +83,6 @@ cpu.out
/public/assets/css /public/assets/css
/public/assets/fonts /public/assets/fonts
/public/assets/licenses.txt /public/assets/licenses.txt
/public/assets/img/webpack
/vendor /vendor
/web_src/fomantic/node_modules /web_src/fomantic/node_modules
/web_src/fomantic/build/* /web_src/fomantic/build/*

View file

@ -130,7 +130,7 @@ FOMANTIC_WORK_DIR := web_src/fomantic
WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f) WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
WEBPACK_CONFIGS := webpack.config.js tailwind.config.js WEBPACK_CONFIGS := webpack.config.js tailwind.config.js
WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts public/assets/img/webpack WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts
BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST)) BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST))

15
package-lock.json generated
View file

@ -9,11 +9,11 @@
"@citation-js/plugin-bibtex": "0.7.9", "@citation-js/plugin-bibtex": "0.7.9",
"@citation-js/plugin-csl": "0.7.9", "@citation-js/plugin-csl": "0.7.9",
"@citation-js/plugin-software-formats": "0.6.1", "@citation-js/plugin-software-formats": "0.6.1",
"@claviska/jquery-minicolors": "2.3.6",
"@github/markdown-toolbar-element": "2.2.3", "@github/markdown-toolbar-element": "2.2.3",
"@github/relative-time-element": "4.4.0", "@github/relative-time-element": "4.4.0",
"@github/text-expander-element": "2.6.1", "@github/text-expander-element": "2.6.1",
"@mcaptcha/vanilla-glue": "0.1.0-alpha-3", "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
"@melloware/coloris": "0.23.0",
"@primer/octicons": "19.9.0", "@primer/octicons": "19.9.0",
"add-asset-webpack-plugin": "2.0.1", "add-asset-webpack-plugin": "2.0.1",
"ansi_up": "6.0.2", "ansi_up": "6.0.2",
@ -395,14 +395,6 @@
"node": ">=14.0.0" "node": ">=14.0.0"
} }
}, },
"node_modules/@claviska/jquery-minicolors": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/@claviska/jquery-minicolors/-/jquery-minicolors-2.3.6.tgz",
"integrity": "sha512-8Ro6D4GCrmOl41+6w4NFhEOpx8vjxwVRI69bulXsFDt49uVRKhLU5TnzEV7AmOJrylkVq+ugnYNMiGHBieeKUQ==",
"peerDependencies": {
"jquery": ">= 1.7.x"
}
},
"node_modules/@csstools/css-parser-algorithms": { "node_modules/@csstools/css-parser-algorithms": {
"version": "2.6.1", "version": "2.6.1",
"resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz", "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz",
@ -1298,6 +1290,11 @@
"@mcaptcha/core-glue": "^0.1.0-alpha-5" "@mcaptcha/core-glue": "^0.1.0-alpha-5"
} }
}, },
"node_modules/@melloware/coloris": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/@melloware/coloris/-/coloris-0.23.0.tgz",
"integrity": "sha512-VGIjI9+IQwg6BHjIE10yl0K2ARYz5bsjn6BgFEs1y1ErPAQymgdoxwVcSVL4Ai5t9OVs8xaCB7JKHqFu2N96Ow=="
},
"node_modules/@nodelib/fs.scandir": { "node_modules/@nodelib/fs.scandir": {
"version": "2.1.5", "version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",

View file

@ -8,11 +8,11 @@
"@citation-js/plugin-bibtex": "0.7.9", "@citation-js/plugin-bibtex": "0.7.9",
"@citation-js/plugin-csl": "0.7.9", "@citation-js/plugin-csl": "0.7.9",
"@citation-js/plugin-software-formats": "0.6.1", "@citation-js/plugin-software-formats": "0.6.1",
"@claviska/jquery-minicolors": "2.3.6",
"@github/markdown-toolbar-element": "2.2.3", "@github/markdown-toolbar-element": "2.2.3",
"@github/relative-time-element": "4.4.0", "@github/relative-time-element": "4.4.0",
"@github/text-expander-element": "2.6.1", "@github/text-expander-element": "2.6.1",
"@mcaptcha/vanilla-glue": "0.1.0-alpha-3", "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
"@melloware/coloris": "0.23.0",
"@primer/octicons": "19.9.0", "@primer/octicons": "19.9.0",
"add-asset-webpack-plugin": "2.0.1", "add-asset-webpack-plugin": "2.0.1",
"ansi_up": "6.0.2", "ansi_up": "6.0.2",

View file

@ -42,8 +42,8 @@
<div class="field color-field"> <div class="field color-field">
<label for="new_project_column_color_picker">{{ctx.Locale.Tr "repo.projects.column.color"}}</label> <label for="new_project_column_color_picker">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
<div class="color picker column"> <div class="js-color-picker-input column">
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color_picker" name="color"> <input maxlength="7" placeholder="#c320f6" id="new_project_column_color_picker" name="color">
{{template "repo/issue/label_precolors"}} {{template "repo/issue/label_precolors"}}
</div> </div>
</div> </div>
@ -114,8 +114,8 @@
<div class="field color-field"> <div class="field color-field">
<label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label> <label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
<div class="color picker column"> <div class="js-color-picker-input column">
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color" name="color" value="{{.Color}}"> <input maxlength="7" placeholder="#c320f6" id="new_project_column_color" name="color" value="{{.Color}}">
{{template "repo/issue/label_precolors"}} {{template "repo/issue/label_precolors"}}
</div> </div>
</div> </div>

View file

@ -52,8 +52,8 @@
</div> </div>
<div class="field color-field"> <div class="field color-field">
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label> <label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
<div class="color picker column"> <div class="column js-color-picker-input">
<input class="color-picker" name="color" value="#70c24a" required maxlength="7"> <input name="color" value="#70c24a"placeholder="#c320f6" required maxlength="7">
{{template "repo/issue/label_precolors"}} {{template "repo/issue/label_precolors"}}
</div> </div>
</div> </div>

View file

@ -27,8 +27,8 @@
</div> </div>
<div class="field color-field"> <div class="field color-field">
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label> <label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
<div class="color picker column"> <div class="js-color-picker-input column">
<input class="color-picker" name="color" value="#70c24a" required maxlength="7"> <input name="color" value="#70c24a" placeholder="#c320f6" required maxlength="7">
{{template "repo/issue/label_precolors"}} {{template "repo/issue/label_precolors"}}
</div> </div>
</div> </div>

View file

@ -1457,11 +1457,6 @@ table th[data-sortt-desc] .svg {
vertical-align: -0.15em; vertical-align: -0.15em;
} }
/* for the jquery.minicolors plugin */
.minicolors-panel {
background: var(--color-secondary-dark-1) !important;
}
.ui.tabular.menu { .ui.tabular.menu {
border-color: var(--color-secondary); border-color: var(--color-secondary);
} }

View file

@ -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;
}

View file

@ -102,26 +102,3 @@
.card-ghost * { .card-ghost * {
opacity: 0; opacity: 0;
} }
.color-field .minicolors.minicolors-theme-default {
display: block;
}
.color-field .minicolors.minicolors-theme-default .minicolors-input {
height: 38px;
padding-left: 2rem;
}
.color-field .minicolors.minicolors-theme-default .minicolors-swatch {
top: 10px;
}
.edit-project-column-modal .color.picker.column,
.new-project-column-modal .color.picker.column {
display: flex;
}
.edit-project-column-modal .color.picker.column .minicolors,
.new-project-column-modal .color.picker.column .minicolors {
flex: 1;
}

View file

@ -2299,24 +2299,6 @@
padding-top: 15px; padding-top: 15px;
} }
.edit-label.modal .form .color.picker.column,
.new-label.modal .form .color.picker.column {
display: flex;
}
.edit-label.modal .form .color.picker.column .minicolors,
.new-label.modal .form .color.picker.column .minicolors {
flex: 1;
}
.edit-label.modal .form .minicolors-swatch.minicolors-sprite,
.new-label.modal .form .minicolors-swatch.minicolors-sprite {
top: 10px;
left: 10px;
width: 15px;
height: 15px;
}
.tab-size-1 { .tab-size-1 {
tab-size: 1 !important; tab-size: 1 !important;
-moz-tab-size: 1 !important; -moz-tab-size: 1 !important;

View file

@ -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) { const [{coloris, init}] = await Promise.all([
if (!els.length) return; import(/* webpackChunkName: "colorpicker" */'@melloware/coloris'),
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
await Promise.all([
import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors'),
import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors/jquery.minicolors.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}));
});
}
}
} }

View file

@ -2,7 +2,6 @@ import $ from 'jquery';
import '../vendor/jquery.are-you-sure.js'; import '../vendor/jquery.are-you-sure.js';
import {clippie} from 'clippie'; import {clippie} from 'clippie';
import {createDropzone} from './dropzone.js'; import {createDropzone} from './dropzone.js';
import {initCompColorPicker} from './comp/ColorPicker.js';
import {showGlobalErrorMessage} from '../bootstrap.js'; import {showGlobalErrorMessage} from '../bootstrap.js';
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js'; import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
import {svg} from '../svg.js'; import {svg} from '../svg.js';
@ -379,10 +378,7 @@ function initGlobalShowModal() {
$attrTarget.text(attrib.value); // FIXME: it should be more strict here, only handle div/span/p $attrTarget.text(attrib.value); // FIXME: it should be more strict here, only handle div/span/p
} }
} }
const $colorPickers = $modal.find('.color-picker');
if ($colorPickers.length > 0) {
initCompColorPicker(); // FIXME: this might cause duplicate init
}
$modal.modal('setting', { $modal.modal('setting', {
onApprove: () => { onApprove: () => {
// "form-fetch-action" can handle network errors gracefully, // "form-fetch-action" can handle network errors gracefully,

View file

@ -1,16 +0,0 @@
import $ from 'jquery';
import {createColorPicker} from '../colorpicker.js';
export function initCompColorPicker() {
(async () => {
await createColorPicker(document.querySelectorAll('.color-picker'));
for (const el of document.querySelectorAll('.precolors .color')) {
el.addEventListener('click', (e) => {
const color = e.target.getAttribute('data-color-hex');
const parent = e.target.closest('.color.picker');
$(parent.querySelector('.color-picker')).minicolors('value', color);
});
}
})();
}

View file

@ -1,5 +1,4 @@
import $ from 'jquery'; import $ from 'jquery';
import {initCompColorPicker} from './ColorPicker.js';
function isExclusiveScopeName(name) { function isExclusiveScopeName(name) {
return /.*[^/]\/[^/].*/.test(name); return /.*[^/]\/[^/].*/.test(name);
@ -28,13 +27,17 @@ function updateExclusiveLabelEdit(form) {
export function initCompLabelEdit(selector) { export function initCompLabelEdit(selector) {
if (!$(selector).length) return; if (!$(selector).length) return;
initCompColorPicker();
// Create label // Create label
$('.new-label.button').on('click', () => { $('.new-label.button').on('click', () => {
updateExclusiveLabelEdit('.new-label'); updateExclusiveLabelEdit('.new-label');
$('.new-label.modal').modal({ $('.new-label.modal').modal({
onApprove() { onApprove() {
const form = document.querySelector('.new-label.form');
if (!form.checkValidity()) {
form.reportValidity();
return false;
}
$('.new-label.form').trigger('submit'); $('.new-label.form').trigger('submit');
}, },
}).modal('show'); }).modal('show');
@ -60,10 +63,18 @@ export function initCompLabelEdit(selector) {
updateExclusiveLabelEdit('.edit-label'); updateExclusiveLabelEdit('.edit-label');
$('.edit-label .label-desc-input').val(this.getAttribute('data-description')); $('.edit-label .label-desc-input').val(this.getAttribute('data-description'));
$('.edit-label .color-picker').minicolors('value', this.getAttribute('data-color'));
const colorInput = document.querySelector('.edit-label .js-color-picker-input input');
colorInput.value = this.getAttribute('data-color');
colorInput.dispatchEvent(new Event('input', {bubbles: true}));
$('.edit-label.modal').modal({ $('.edit-label.modal').modal({
onApprove() { onApprove() {
const form = document.querySelector('.edit-label.form');
if (!form.checkValidity()) {
form.reportValidity();
return false;
}
$('.edit-label.form').trigger('submit'); $('.edit-label.form').trigger('submit');
}, },
}).modal('show'); }).modal('show');

View file

@ -86,6 +86,7 @@ import {initRepoRecentCommits} from './features/recent-commits.js';
import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js'; import {initRepoDiffCommitBranchesAndTags} from './features/repo-diff-commit.js';
import {initDirAuto} from './modules/dirauto.js'; import {initDirAuto} from './modules/dirauto.js';
import {initRepositorySearch} from './features/repo-search.js'; import {initRepositorySearch} from './features/repo-search.js';
import {initColorPickers} from './features/colorpicker.js';
// Init Gitea's Fomantic settings // Init Gitea's Fomantic settings
initGiteaFomantic(); initGiteaFomantic();
@ -188,4 +189,5 @@ onDomReady(() => {
initRepoDiffView(); initRepoDiffView();
initPdfViewer(); initPdfViewer();
initScopedAccessTokenCategories(); initScopedAccessTokenCategories();
initColorPickers();
}); });

View file

@ -196,13 +196,6 @@ export default {
filename: 'fonts/[name].[contenthash:8][ext]', filename: 'fonts/[name].[contenthash:8][ext]',
}, },
}, },
{
test: /\.png$/i,
type: 'asset/resource',
generator: {
filename: 'img/webpack/[name].[contenthash:8][ext]',
},
},
], ],
}, },
plugins: [ plugins: [