Skip to content

Commit dd8dde2

Browse files
silverwindsilverwind
authored
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">
1 parent 62b073e commit dd8dde2

18 files changed

+224
-106
lines changed

‎.dockerignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,6 @@ cpu.out
7878
/public/assets/css
7979
/public/assets/fonts
8080
/public/assets/img/avatar
81-
/public/assets/img/webpack
8281
/vendor
8382
/web_src/fomantic/node_modules
8483
/web_src/fomantic/build/*

‎.gitignore

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ cpu.out
7777
/public/assets/css
7878
/public/assets/fonts
7979
/public/assets/licenses.txt
80-
/public/assets/img/webpack
8180
/vendor
8281
/web_src/fomantic/node_modules
8382
/web_src/fomantic/build/*

‎Makefile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ FOMANTIC_WORK_DIR := web_src/fomantic
119119
WEBPACK_SOURCES := $(shell find web_src/js web_src/css -type f)
120120
WEBPACK_CONFIGS := webpack.config.js tailwind.config.js
121121
WEBPACK_DEST := public/assets/js/index.js public/assets/css/index.css
122-
WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts public/assets/img/webpack
122+
WEBPACK_DEST_ENTRIES := public/assets/js public/assets/css public/assets/fonts
123123

124124
BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
125125
BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST))

‎package-lock.json

Lines changed: 6 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@
88
"@citation-js/plugin-bibtex": "0.7.9",
99
"@citation-js/plugin-csl": "0.7.9",
1010
"@citation-js/plugin-software-formats": "0.6.1",
11-
"@claviska/jquery-minicolors": "2.3.6",
1211
"@github/markdown-toolbar-element": "2.2.3",
1312
"@github/relative-time-element": "4.4.0",
1413
"@github/text-expander-element": "2.6.1",
1514
"@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
15+
"@melloware/coloris": "0.23.0",
1616
"@primer/octicons": "19.9.0",
1717
"add-asset-webpack-plugin": "2.0.1",
1818
"ansi_up": "6.0.2",

‎templates/projects/view.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,8 @@
4242

4343
<div class="field color-field">
4444
<label for="new_project_column_color_picker">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
45-
<div class="color picker column">
46-
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color_picker" name="color">
45+
<div class="js-color-picker-input column">
46+
<input maxlength="7" placeholder="#c320f6" id="new_project_column_color_picker" name="color">
4747
{{template "repo/issue/label_precolors"}}
4848
</div>
4949
</div>
@@ -114,8 +114,8 @@
114114

115115
<div class="field color-field">
116116
<label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
117-
<div class="color picker column">
118-
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color" name="color" value="{{.Color}}">
117+
<div class="js-color-picker-input column">
118+
<input maxlength="7" placeholder="#c320f6" id="new_project_column_color" name="color" value="{{.Color}}">
119119
{{template "repo/issue/label_precolors"}}
120120
</div>
121121
</div>

‎templates/repo/issue/labels/edit_delete_label.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@
5252
</div>
5353
<div class="field color-field">
5454
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
55-
<div class="color picker column">
56-
<input class="color-picker" name="color" value="#70c24a" required maxlength="7">
55+
<div class="column js-color-picker-input">
56+
<input name="color" value="#70c24a"placeholder="#c320f6" required maxlength="7">
5757
{{template "repo/issue/label_precolors"}}
5858
</div>
5959
</div>

‎templates/repo/issue/labels/label_new.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@
2727
</div>
2828
<div class="field color-field">
2929
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
30-
<div class="color picker column">
31-
<input class="color-picker" name="color" value="#70c24a" required maxlength="7">
30+
<div class="js-color-picker-input column">
31+
<input name="color" value="#70c24a" placeholder="#c320f6" required maxlength="7">
3232
{{template "repo/issue/label_precolors"}}
3333
</div>
3434
</div>

‎web_src/css/base.css

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1436,11 +1436,6 @@ table th[data-sortt-desc] .svg {
14361436
vertical-align: -0.15em;
14371437
}
14381438

1439-
/* for the jquery.minicolors plugin */
1440-
.minicolors-panel {
1441-
background: var(--color-secondary-dark-1) !important;
1442-
}
1443-
14441439
.ui.tabular.menu {
14451440
border-color: var(--color-secondary);
14461441
}

‎web_src/css/features/colorpicker.css

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
/* This is a stripped-down version of coloris's CSS tailored to our needs. It does only include
2+
opaqua colors, and if more features like opacity are needed, the CSS needs to be extended
3+
based on upstream: https://github.com/mdbassit/Coloris/blob/main/src/coloris.css. */
4+
5+
.js-color-picker-input {
6+
display: flex;
7+
flex-wrap: wrap;
8+
}
9+
10+
.js-color-picker-input input {
11+
padding-top: 8px !important;
12+
padding-bottom: 8px !important;
13+
padding-left: 32px !important;
14+
}
15+
16+
.clr-picker {
17+
display: none;
18+
flex-wrap: wrap;
19+
position: absolute;
20+
width: 200px;
21+
z-index: 1002; /* above .ui.modal which has 1001 */
22+
border-radius: var(--border-radius);
23+
background-color: var(--color-menu);
24+
justify-content: flex-end;
25+
direction: ltr;
26+
box-shadow: 0 5px 20px var(--color-shadow);
27+
user-select: none;
28+
}
29+
30+
.clr-picker.clr-open {
31+
display: flex;
32+
}
33+
34+
.clr-gradient {
35+
position: relative;
36+
width: 100%;
37+
height: 100px;
38+
border-radius: 3px 3px 0 0;
39+
background: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentcolor); /* stylelint-disable-line scale-unlimited/declaration-strict-value */
40+
cursor: pointer;
41+
}
42+
43+
.clr-marker {
44+
position: absolute;
45+
width: 12px;
46+
height: 12px;
47+
margin: -6px 0 0 -6px;
48+
border: 1px solid var(--color-white);
49+
border-radius: 50%;
50+
background-color: currentcolor;
51+
cursor: pointer;
52+
}
53+
54+
.clr-picker input[type="range"]::-webkit-slider-runnable-track {
55+
width: 100%;
56+
height: 16px;
57+
}
58+
59+
.clr-picker input[type="range"]::-webkit-slider-thumb {
60+
width: 16px;
61+
height: 16px;
62+
-webkit-appearance: none;
63+
}
64+
65+
.clr-picker input[type="range"]::-moz-range-track {
66+
width: 100%;
67+
height: 16px;
68+
border: 0;
69+
}
70+
71+
.clr-picker input[type="range"]::-moz-range-thumb {
72+
width: 16px;
73+
height: 16px;
74+
border: 0;
75+
}
76+
77+
.clr-hue {
78+
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 */
79+
position: relative;
80+
width: calc(100% - 40px);
81+
height: 10px;
82+
margin: 10px 20px;
83+
border-radius: 4px;
84+
}
85+
86+
.clr-hue input[type="range"] {
87+
position: absolute;
88+
width: calc(100% + 32px);
89+
margin: 0;
90+
background-color: transparent;
91+
opacity: 0;
92+
cursor: pointer;
93+
appearance: none;
94+
}
95+
96+
.clr-hue div {
97+
position: absolute;
98+
width: 16px;
99+
height: 16px;
100+
left: 0;
101+
top: 50%;
102+
transform: translate(-50%, -50%);
103+
border: 2px solid var(--color-white);
104+
border-radius: 50%;
105+
background-color: currentcolor;
106+
box-shadow: 0 0 1px var(--color-shadow);
107+
pointer-events: none;
108+
}
109+
110+
.clr-field {
111+
flex: 1;
112+
position: relative;
113+
color: transparent;
114+
}
115+
116+
.clr-field button {
117+
position: absolute;
118+
aspect-ratio: 1;
119+
height: 16px;
120+
left: 10px;
121+
top: 50%;
122+
transform: translateY(-50%);
123+
margin: 0;
124+
padding: 0;
125+
border: 0;
126+
color: inherit;
127+
pointer-events: none;
128+
border-radius: 2px;
129+
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 */
130+
background-position: 0 0, 4px 4px;
131+
background-size: 8px 8px;
132+
}
133+
134+
.clr-field button::after {
135+
content: "";
136+
display: block;
137+
position: absolute;
138+
width: 100%;
139+
height: 100%;
140+
left: 0;
141+
top: 0;
142+
border-radius: inherit;
143+
background-color: currentcolor;
144+
}
145+
146+
.clr-marker:focus {
147+
outline: none;
148+
}
149+
150+
.clr-keyboard-nav .clr-marker:focus,
151+
.clr-keyboard-nav .clr-hue input:focus + div,
152+
.clr-keyboard-nav .clr-alpha input:focus + div {
153+
outline: none;
154+
box-shadow: 0 0 2px 2px var(--color-white);
155+
}
156+
157+
.clr-picker .clr-preview,
158+
.clr-picker .clr-clear,
159+
.clr-picker .clr-swatches,
160+
.clr-picker .clr-format,
161+
.clr-picker .clr-alpha,
162+
.clr-picker .clr-color {
163+
display: none;
164+
}

‎web_src/css/features/projects.css

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -102,26 +102,3 @@
102102
.card-ghost * {
103103
opacity: 0;
104104
}
105-
106-
.color-field .minicolors.minicolors-theme-default {
107-
display: block;
108-
}
109-
110-
.color-field .minicolors.minicolors-theme-default .minicolors-input {
111-
height: 38px;
112-
padding-left: 2rem;
113-
}
114-
115-
.color-field .minicolors.minicolors-theme-default .minicolors-swatch {
116-
top: 10px;
117-
}
118-
119-
.edit-project-column-modal .color.picker.column,
120-
.new-project-column-modal .color.picker.column {
121-
display: flex;
122-
}
123-
124-
.edit-project-column-modal .color.picker.column .minicolors,
125-
.new-project-column-modal .color.picker.column .minicolors {
126-
flex: 1;
127-
}

‎web_src/css/repo.css

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2260,24 +2260,6 @@
22602260
padding-top: 15px;
22612261
}
22622262

2263-
.edit-label.modal .form .color.picker.column,
2264-
.new-label.modal .form .color.picker.column {
2265-
display: flex;
2266-
}
2267-
2268-
.edit-label.modal .form .color.picker.column .minicolors,
2269-
.new-label.modal .form .color.picker.column .minicolors {
2270-
flex: 1;
2271-
}
2272-
2273-
.edit-label.modal .form .minicolors-swatch.minicolors-sprite,
2274-
.new-label.modal .form .minicolors-swatch.minicolors-sprite {
2275-
top: 10px;
2276-
left: 10px;
2277-
width: 15px;
2278-
height: 15px;
2279-
}
2280-
22812263
.tab-size-1 {
22822264
tab-size: 1 !important;
22832265
-moz-tab-size: 1 !important;

‎web_src/js/features/colorpicker.js

Lines changed: 27 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,31 @@
1-
import $ from 'jquery';
1+
export async function initColorPickers(selector = '.js-color-picker-input input', opts = {}) {
2+
const inputEls = document.querySelectorAll(selector);
3+
if (!inputEls.length) return;
24

3-
export async function createColorPicker(els) {
4-
if (!els.length) return;
5-
6-
await Promise.all([
7-
import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors'),
8-
import(/* webpackChunkName: "minicolors" */'@claviska/jquery-minicolors/jquery.minicolors.css'),
5+
const [{coloris, init}] = await Promise.all([
6+
import(/* webpackChunkName: "colorpicker" */'@melloware/coloris'),
7+
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
98
]);
109

11-
return $(els).minicolors();
10+
init();
11+
coloris({
12+
el: selector,
13+
alpha: false,
14+
focusInput: true,
15+
selectInput: false,
16+
...opts,
17+
});
18+
19+
for (const inputEl of inputEls) {
20+
const parent = inputEl.closest('.js-color-picker-input');
21+
// prevent tabbing on the color preview `button` inside the input
22+
parent.querySelector('button').tabIndex = -1;
23+
// init precolors
24+
for (const el of parent.querySelectorAll('.precolors .color')) {
25+
el.addEventListener('click', (e) => {
26+
inputEl.value = e.target.getAttribute('data-color-hex');
27+
inputEl.dispatchEvent(new Event('input', {bubbles: true}));
28+
});
29+
}
30+
}
1231
}

0 commit comments

Comments
 (0)