Skip to content

Commit 4ba8a7d

Browse files
silverwindsilverwind
committed
replace jquery-minicolors with coloris
1 parent 3f26fe2 commit 4ba8a7d

File tree

11 files changed

+279
-78
lines changed

11 files changed

+279
-78
lines changed

‎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.3.1",
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.8.0",
1717
"add-asset-webpack-plugin": "2.0.1",
1818
"ansi_up": "6.0.2",

‎web_src/css/base.css

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

1705-
/* for the jquery.minicolors plugin */
1706-
.minicolors-panel {
1707-
background: var(--color-secondary-dark-1) !important;
1708-
}
1709-
17101705
.ui.tabular.menu {
17111706
border-color: var(--color-secondary);
17121707
}

‎web_src/css/features/colorpicker.css

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
/* stylelint-disable scale-unlimited/declaration-strict-value */
2+
input.color-picker {
3+
padding-top: 8px !important;
4+
padding-bottom: 8px !important;
5+
padding-left: 32px !important;
6+
}
7+
8+
.clr-picker {
9+
display: none;
10+
flex-wrap: wrap;
11+
position: absolute;
12+
width: 200px;
13+
z-index: 1002;
14+
border-radius: var(--border-radius);
15+
background-color: var(--color-menu);
16+
justify-content: flex-end;
17+
direction: ltr;
18+
box-shadow: 0 5px 20px var(--color-shadow);
19+
user-select: none;
20+
}
21+
22+
.clr-picker.clr-open,
23+
.clr-picker[data-inline="true"] {
24+
display: flex;
25+
}
26+
27+
.clr-picker[data-inline="true"] {
28+
position: relative;
29+
}
30+
31+
.clr-gradient {
32+
position: relative;
33+
width: 100%;
34+
height: 100px;
35+
border-radius: 3px 3px 0 0;
36+
background-image: linear-gradient(rgba(0,0,0,0), #000), linear-gradient(90deg, #fff, currentColor);
37+
cursor: pointer;
38+
}
39+
40+
.clr-marker {
41+
position: absolute;
42+
width: 12px;
43+
height: 12px;
44+
margin: -6px 0 0 -6px;
45+
border: 1px solid var(--color-white);
46+
border-radius: 50%;
47+
background-color: currentColor;
48+
cursor: pointer;
49+
}
50+
51+
.clr-picker input[type="range"]::-webkit-slider-runnable-track {
52+
width: 100%;
53+
height: 16px;
54+
}
55+
56+
.clr-picker input[type="range"]::-webkit-slider-thumb {
57+
width: 16px;
58+
height: 16px;
59+
-webkit-appearance: none;
60+
}
61+
62+
.clr-picker input[type="range"]::-moz-range-track {
63+
width: 100%;
64+
height: 16px;
65+
border: 0;
66+
}
67+
68+
.clr-picker input[type="range"]::-moz-range-thumb {
69+
width: 16px;
70+
height: 16px;
71+
border: 0;
72+
}
73+
74+
.clr-hue {
75+
background-image: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
76+
}
77+
78+
.clr-hue,
79+
.clr-alpha {
80+
position: relative;
81+
width: calc(100% - 40px);
82+
height: 10px;
83+
margin: 10px 20px;
84+
border-radius: 4px;
85+
}
86+
87+
.clr-alpha span {
88+
display: block;
89+
height: 100%;
90+
width: 100%;
91+
border-radius: inherit;
92+
background-image: linear-gradient(90deg, rgba(0,0,0,0), currentColor);
93+
}
94+
95+
.clr-hue input[type="range"],
96+
.clr-alpha input[type="range"] {
97+
position: absolute;
98+
width: calc(100% + 32px);
99+
height: 16px;
100+
left: -16px;
101+
top: -4px;
102+
margin: 0;
103+
background-color: transparent;
104+
opacity: 0;
105+
cursor: pointer;
106+
appearance: none;
107+
-webkit-appearance: none;
108+
}
109+
110+
.clr-hue div,
111+
.clr-alpha div {
112+
position: absolute;
113+
width: 16px;
114+
height: 16px;
115+
left: 0;
116+
top: 50%;
117+
margin-left: -8px;
118+
transform: translateY(-50%);
119+
border: 2px solid var(--color-white);
120+
border-radius: 50%;
121+
background-color: currentColor;
122+
box-shadow: 0 0 1px var(--color-shadow);
123+
pointer-events: none;
124+
}
125+
126+
.clr-alpha div::before {
127+
content: "";
128+
position: absolute;
129+
height: 100%;
130+
width: 100%;
131+
left: 0;
132+
top: 0;
133+
border-radius: 50%;
134+
background-color: currentColor;
135+
}
136+
137+
.clr-format {
138+
display: none;
139+
order: 1;
140+
width: calc(100% - 40px);
141+
margin: 0 20px 20px;
142+
}
143+
144+
input.clr-color {
145+
order: 1;
146+
width: calc(100% - 80px);
147+
height: 32px;
148+
margin: 15px 20px 20px auto;
149+
padding: 0 10px;
150+
border: 1px solid var(--color-secondary);
151+
border-radius: 16px;
152+
color: var(--color-text);
153+
background-color: var(--color-input-background);
154+
font-family: sans-serif;
155+
font-size: 14px;
156+
text-align: center;
157+
box-shadow: none;
158+
}
159+
160+
input.clr-color:focus {
161+
outline: none;
162+
border: 1px solid var(--color-primary);
163+
}
164+
165+
.clr-field {
166+
flex: 1;
167+
position: relative;
168+
color: transparent;
169+
}
170+
171+
.clr-field button {
172+
position: absolute;
173+
aspect-ratio: 1;
174+
height: 16px;
175+
left: 10px;
176+
top: 50%;
177+
transform: translateY(-50%);
178+
margin: 0;
179+
padding: 0;
180+
border: 0;
181+
color: inherit;
182+
text-indent: -1000px;
183+
white-space: nowrap;
184+
overflow: hidden;
185+
pointer-events: none;
186+
border-radius: 2px;
187+
}
188+
189+
.clr-field button::after {
190+
content: "";
191+
display: block;
192+
position: absolute;
193+
width: 100%;
194+
height: 100%;
195+
left: 0;
196+
top: 0;
197+
border-radius: inherit;
198+
background-color: currentColor;
199+
}
200+
201+
.clr-alpha,
202+
.clr-alpha div,
203+
.clr-field button {
204+
background-image: 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);
205+
background-position: 0 0, 4px 4px;
206+
background-size: 8px 8px;
207+
}
208+
209+
.clr-marker:focus {
210+
outline: none;
211+
}
212+
213+
.clr-keyboard-nav .clr-marker:focus,
214+
.clr-keyboard-nav .clr-hue input:focus + div,
215+
.clr-keyboard-nav .clr-alpha input:focus + div {
216+
outline: none;
217+
box-shadow: 0 0 2px 2px var(--color-white);
218+
}
219+
220+
.clr-picker[data-alpha="false"] .clr-alpha {
221+
display: none;
222+
}
223+
224+
.clr-picker .clr-preview,
225+
.clr-picker .clr-clear,
226+
.clr-picker .clr-swatches,
227+
.clr-picker #clr-color-value {
228+
display: none;
229+
}

‎web_src/css/features/projects.css

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -100,25 +100,7 @@
100100
opacity: 0;
101101
}
102102

103-
.color-field .minicolors.minicolors-theme-default {
104-
display: block;
105-
}
106-
107-
.color-field .minicolors.minicolors-theme-default .minicolors-input {
108-
height: 38px;
109-
padding-left: 2rem;
110-
}
111-
112-
.color-field .minicolors.minicolors-theme-default .minicolors-swatch {
113-
top: 10px;
114-
}
115-
116103
.edit-project-column-modal .color.picker.column,
117104
.new-project-column-modal .color.picker.column {
118105
display: flex;
119106
}
120-
121-
.edit-project-column-modal .color.picker.column .minicolors,
122-
.new-project-column-modal .color.picker.column .minicolors {
123-
flex: 1;
124-
}

‎web_src/css/repo.css

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2265,19 +2265,6 @@
22652265
display: flex;
22662266
}
22672267

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-
22812268
.tab-size-1 {
22822269
tab-size: 1 !important;
22832270
-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 = 'input.color-picker', 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: "coloris" */'@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('.color.picker');
21+
// prevent tabbing on color "button"
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)