Skip to content

Commit 9dafcc5

Browse files
wxiaoguangwxiaoguang
authored
Improve project & label color picker and image scroll (#34971)
Fix #34609 Fix #34967
1 parent e0745eb commit 9dafcc5

File tree

8 files changed

+76
-57
lines changed

8 files changed

+76
-57
lines changed

‎templates/projects/view.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
</div>
135135
<div class="field">
136136
<label class="project-column-color-label" for="project-column-color-input">color</label>
137-
<div class="js-color-picker-input column">
137+
<div class="color-picker-combo" data-global-init="initColorPicker">
138138
<input maxlength="7" placeholder="#c320f6" id="project-column-color-input" name="color">
139139
{{template "repo/issue/label_precolors"}}
140140
</div>

‎templates/repo/issue/label_precolors.tmpl

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,27 @@
11
<div class="precolors">
2-
<div class="tw-flex">
3-
<a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a>
4-
<a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a>
5-
<a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a>
6-
<a class="color" style="background-color:#009800" data-color-hex="#009800"></a>
7-
<a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a>
8-
<a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a>
9-
<a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a>
10-
<a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a>
11-
</div>
12-
<div class="tw-flex">
13-
<a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a>
14-
<a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a>
15-
<a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a>
16-
<a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a>
17-
<a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a>
18-
<a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a>
19-
<a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a>
20-
<a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a>
2+
<button type="button" class="ui button generate-random-color">
3+
{{svg "octicon-sync"}}
4+
</button>
5+
<div>
6+
<div class="tw-flex">
7+
<a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a>
8+
<a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a>
9+
<a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a>
10+
<a class="color" style="background-color:#009800" data-color-hex="#009800"></a>
11+
<a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a>
12+
<a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a>
13+
<a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a>
14+
<a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a>
15+
</div>
16+
<div class="tw-flex">
17+
<a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a>
18+
<a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a>
19+
<a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a>
20+
<a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a>
21+
<a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a>
22+
<a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a>
23+
<a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a>
24+
<a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a>
25+
</div>
2126
</div>
2227
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
</div>
5050
<div class="field">
5151
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
52-
<div class="column js-color-picker-input">
52+
<div class="color-picker-combo" data-global-init="initColorPicker">
5353
<!-- the "#" is optional because backend NormalizeColor is able to handle it, API also accepts both formats, and it is easier for users to directly copy-paste a hex value -->
5454
<input name="color" value="#70c24a" placeholder="#c320f6" required pattern="^#?([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$" maxlength="7">
5555
{{template "repo/issue/label_precolors"}}

‎web_src/css/base.css

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1031,19 +1031,6 @@ table th[data-sortt-desc] .svg {
10311031
min-height: 0;
10321032
}
10331033

1034-
.precolors {
1035-
display: flex;
1036-
flex-direction: column;
1037-
justify-content: center;
1038-
margin-left: 1em;
1039-
}
1040-
1041-
.precolors .color {
1042-
display: inline-block;
1043-
width: 15px;
1044-
height: 15px;
1045-
}
1046-
10471034
.ui.dropdown:not(.button) {
10481035
line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
10491036
}

‎web_src/css/features/colorpicker.css

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
1-
.js-color-picker-input {
1+
.color-picker-combo {
22
display: flex;
3-
position: relative;
3+
position: relative; /* to position the preview square */
44
}
55

6-
.js-color-picker-input input {
7-
padding-top: 8px !important;
8-
padding-bottom: 8px !important;
6+
.color-picker-combo input {
97
padding-left: 32px !important;
108
}
119

12-
.js-color-picker-input .preview-square {
10+
.color-picker-combo .preview-square {
1311
position: absolute;
1412
aspect-ratio: 1;
1513
height: 16px;
@@ -22,7 +20,7 @@
2220
background-size: 8px 8px;
2321
}
2422

25-
.js-color-picker-input .preview-square::after {
23+
.color-picker-combo .preview-square::after {
2624
content: "";
2725
position: absolute;
2826
width: 100%;
@@ -31,6 +29,26 @@
3129
background-color: currentcolor;
3230
}
3331

32+
.color-picker-combo .precolors {
33+
display: flex;
34+
margin-left: 1em;
35+
align-items: center;
36+
gap: 0.125em;
37+
}
38+
39+
.color-picker-combo .precolors .generate-random-color {
40+
padding: 0;
41+
width: 30px;
42+
height: 30px;
43+
min-height: 0;
44+
}
45+
46+
.color-picker-combo .precolors .color {
47+
display: inline-block;
48+
width: 15px;
49+
height: 15px;
50+
}
51+
3452
hex-color-picker {
3553
width: 180px;
3654
height: 120px;

‎web_src/css/features/projects.css

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
.card-attachment-images {
7272
display: inline-block;
7373
white-space: nowrap;
74-
overflow: scroll;
74+
overflow: auto;
7575
cursor: default;
7676
scroll-snap-type: x mandatory;
7777
text-align: center;
@@ -85,6 +85,7 @@
8585
scroll-snap-align: center;
8686
margin-right: 2px;
8787
aspect-ratio: 1;
88+
object-fit: contain;
8889
}
8990

9091
.card-attachment-images img:only-child {

‎web_src/js/features/colorpicker.ts

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
import {createTippy} from '../modules/tippy.ts';
22
import type {DOMEvent} from '../utils/dom.ts';
3+
import {registerGlobalInitFunc} from '../modules/observer.ts';
34

45
export async function initColorPickers() {
5-
const els = document.querySelectorAll<HTMLElement>('.js-color-picker-input');
6-
if (!els.length) return;
7-
8-
await Promise.all([
9-
import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'),
10-
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
11-
]);
12-
13-
for (const el of els) {
6+
let imported = false;
7+
registerGlobalInitFunc('initColorPicker', async (el) => {
8+
if (!imported) {
9+
await Promise.all([
10+
import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'),
11+
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
12+
]);
13+
imported = true;
14+
}
1415
initPicker(el);
15-
}
16+
});
1617
}
1718

1819
function updateSquare(el: HTMLElement, newValue: string): void {
@@ -55,13 +56,20 @@ function initPicker(el: HTMLElement): void {
5556
},
5657
});
5758

58-
// init precolors
59+
// init random color & precolors
60+
const setSelectedColor = (color: string) => {
61+
input.value = color;
62+
input.dispatchEvent(new Event('input', {bubbles: true}));
63+
updateSquare(square, color);
64+
};
65+
el.querySelector('.generate-random-color').addEventListener('click', () => {
66+
const newValue = `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`;
67+
setSelectedColor(newValue);
68+
});
5969
for (const colorEl of el.querySelectorAll<HTMLElement>('.precolors .color')) {
6070
colorEl.addEventListener('click', (e: DOMEvent<MouseEvent, HTMLAnchorElement>) => {
6171
const newValue = e.target.getAttribute('data-color-hex');
62-
input.value = newValue;
63-
input.dispatchEvent(new Event('input', {bubbles: true}));
64-
updateSquare(square, newValue);
72+
setSelectedColor(newValue);
6573
});
6674
}
6775
}

‎web_src/js/features/comp/LabelEdit.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function initCompLabelEdit(pageSelector: string) {
2424
const elIsArchivedField = elModal.querySelector('.label-is-archived-input-field');
2525
const elIsArchivedInput = elModal.querySelector<HTMLInputElement>('.label-is-archived-input');
2626
const elDescInput = elModal.querySelector<HTMLInputElement>('.label-desc-input');
27-
const elColorInput = elModal.querySelector<HTMLInputElement>('.js-color-picker-input input');
27+
const elColorInput = elModal.querySelector<HTMLInputElement>('.color-picker-combo input');
2828

2929
const syncModalUi = () => {
3030
const hasScope = nameHasScope(elNameInput.value);

0 commit comments

Comments
 (0)