GitHub
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Improve project & label color picker and image scroll (#34971) 

Fix #34609
Fix #34967
pull/34983/head
wxiaoguang 5 months ago committed by GitHub
parent
e0745eb14d
commit
9dafcc5c9e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 76 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      templates/projects/view.tmpl
  2. 43
      templates/repo/issue/label_precolors.tmpl
  3. 2
      templates/repo/issue/labels/label_edit_modal.tmpl
  4. 13
      web_src/css/base.css
  5. 32
      web_src/css/features/colorpicker.css
  6. 3
      web_src/css/features/projects.css
  7. 36
      web_src/js/features/colorpicker.ts
  8. 2
      web_src/js/features/comp/LabelEdit.ts

2
templates/projects/view.tmpl
Unescape View File

@ -134,7 +134,7 @@ @@ -134,7 +134,7 @@
</div>
<div class="field">
<label class="project-column-color-label" for="project-column-color-input">color</label>
<div class="js-color-picker-input column">
<div class="color-picker-combo" data-global-init="initColorPicker">
<input maxlength="7" placeholder="#c320f6" id="project-column-color-input" name="color">
{{template "repo/issue/label_precolors"}}
</div>

43
templates/repo/issue/label_precolors.tmpl
Unescape View File

@ -1,22 +1,27 @@ @@ -1,22 +1,27 @@
<div class="precolors">
<div class="tw-flex">
<a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a>
<a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a>
<a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a>
<a class="color" style="background-color:#009800" data-color-hex="#009800"></a>
<a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a>
<a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a>
<a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a>
<a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a>
</div>
<div class="tw-flex">
<a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a>
<a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a>
<a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a>
<a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a>
<a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a>
<a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a>
<a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a>
<a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a>
<button type="button" class="ui button generate-random-color">
{{svg "octicon-sync"}}
</button>
<div>
<div class="tw-flex">
<a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a>
<a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a>
<a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a>
<a class="color" style="background-color:#009800" data-color-hex="#009800"></a>
<a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a>
<a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a>
<a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a>
<a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a>
</div>
<div class="tw-flex">
<a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a>
<a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a>
<a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a>
<a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a>
<a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a>
<a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a>
<a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a>
<a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a>
</div>
</div>
</div>

2
templates/repo/issue/labels/label_edit_modal.tmpl
Unescape View File

@ -49,7 +49,7 @@ @@ -49,7 +49,7 @@
</div>
<div class="field">
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
<div class="column js-color-picker-input">
<div class="color-picker-combo" data-global-init="initColorPicker">
<!-- 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 -->
<input name="color" value="#70c24a" placeholder="#c320f6" required pattern="^#?([\dA-Fa-f]{3}|[\dA-Fa-f]{6})$" maxlength="7">
{{template "repo/issue/label_precolors"}}

13
web_src/css/base.css
Unescape View File

@ -1031,19 +1031,6 @@ table th[data-sortt-desc] .svg { @@ -1031,19 +1031,6 @@ table th[data-sortt-desc] .svg {
min-height: 0;
}
.precolors {
display: flex;
flex-direction: column;
justify-content: center;
margin-left: 1em;
}
.precolors .color {
display: inline-block;
width: 15px;
height: 15px;
}
.ui.dropdown:not(.button) {
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 */
}

32
web_src/css/features/colorpicker.css
Unescape View File

@ -1,15 +1,13 @@ @@ -1,15 +1,13 @@
.js-color-picker-input {
.color-picker-combo {
display: flex;
position: relative;
position: relative; /* to position the preview square */
}
.js-color-picker-input input {
padding-top: 8px !important;
padding-bottom: 8px !important;
.color-picker-combo input {
padding-left: 32px !important;
}
.js-color-picker-input .preview-square {
.color-picker-combo .preview-square {
position: absolute;
aspect-ratio: 1;
height: 16px;
@ -22,7 +20,7 @@ @@ -22,7 +20,7 @@
background-size: 8px 8px;
}
.js-color-picker-input .preview-square::after {
.color-picker-combo .preview-square::after {
content: "";
position: absolute;
width: 100%;
@ -31,6 +29,26 @@ @@ -31,6 +29,26 @@
background-color: currentcolor;
}
.color-picker-combo .precolors {
display: flex;
margin-left: 1em;
align-items: center;
gap: 0.125em;
}
.color-picker-combo .precolors .generate-random-color {
padding: 0;
width: 30px;
height: 30px;
min-height: 0;
}
.color-picker-combo .precolors .color {
display: inline-block;
width: 15px;
height: 15px;
}
hex-color-picker {
width: 180px;
height: 120px;

3
web_src/css/features/projects.css
Unescape View File

@ -71,7 +71,7 @@ @@ -71,7 +71,7 @@
.card-attachment-images {
display: inline-block;
white-space: nowrap;
overflow: scroll;
overflow: auto;
cursor: default;
scroll-snap-type: x mandatory;
text-align: center;
@ -85,6 +85,7 @@ @@ -85,6 +85,7 @@
scroll-snap-align: center;
margin-right: 2px;
aspect-ratio: 1;
object-fit: contain;
}
.card-attachment-images img:only-child {

36
web_src/js/features/colorpicker.ts
Unescape View File

@ -1,18 +1,19 @@ @@ -1,18 +1,19 @@
import {createTippy} from '../modules/tippy.ts';
import type {DOMEvent} from '../utils/dom.ts';
import {registerGlobalInitFunc} from '../modules/observer.ts';
export async function initColorPickers() {
const els = document.querySelectorAll<HTMLElement>('.js-color-picker-input');
if (!els.length) return;
await Promise.all([
import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'),
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
]);
for (const el of els) {
let imported = false;
registerGlobalInitFunc('initColorPicker', async (el) => {
if (!imported) {
await Promise.all([
import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'),
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
]);
imported = true;
}
initPicker(el);
}
});
}
function updateSquare(el: HTMLElement, newValue: string): void {
@ -55,13 +56,20 @@ function initPicker(el: HTMLElement): void { @@ -55,13 +56,20 @@ function initPicker(el: HTMLElement): void {
},
});
// init precolors
// init random color & precolors
const setSelectedColor = (color: string) => {
input.value = color;
input.dispatchEvent(new Event('input', {bubbles: true}));
updateSquare(square, color);
};
el.querySelector('.generate-random-color').addEventListener('click', () => {
const newValue = `#${Math.floor(Math.random() * 0xFFFFFF).toString(16).padStart(6, '0')}`;
setSelectedColor(newValue);
});
for (const colorEl of el.querySelectorAll<HTMLElement>('.precolors .color')) {
colorEl.addEventListener('click', (e: DOMEvent<MouseEvent, HTMLAnchorElement>) => {
const newValue = e.target.getAttribute('data-color-hex');
input.value = newValue;
input.dispatchEvent(new Event('input', {bubbles: true}));
updateSquare(square, newValue);
setSelectedColor(newValue);
});
}
}

2
web_src/js/features/comp/LabelEdit.ts
Unescape View File

@ -24,7 +24,7 @@ export function initCompLabelEdit(pageSelector: string) { @@ -24,7 +24,7 @@ export function initCompLabelEdit(pageSelector: string) {
const elIsArchivedField = elModal.querySelector('.label-is-archived-input-field');
const elIsArchivedInput = elModal.querySelector<HTMLInputElement>('.label-is-archived-input');
const elDescInput = elModal.querySelector<HTMLInputElement>('.label-desc-input');
const elColorInput = elModal.querySelector<HTMLInputElement>('.js-color-picker-input input');
const elColorInput = elModal.querySelector<HTMLInputElement>('.color-picker-combo input');
const syncModalUi = () => {
const hasScope = nameHasScope(elNameInput.value);

Write Preview
Loading…
Cancel
Save