domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Replace coloris with vanilla-colorful (#30201)

Browse source 
Found [a better color
picker](https://github.com/web-padawan/vanilla-colorful) that [does not
rely](https://github.com/mdbassit/Coloris/issues/139) on
`querySelectorAll` or a global shared instance, and is also around a
third of the size of the previous one.

The popover is handled by tippy.js for which I introduced a new "bare"
theme and it uses a new sibling-based mechanism which should prove
useful later to create tippy popovers via HTML only.

<img width="846" alt="Screenshot 2024-03-31 at 04 03 38"
src="7639b911-a2d7-4f5c-bffd-a9d84561e747">

(cherry picked from commit 1195be41a13d2198ab644c8558549edd74485510)
This commit is contained in:
silverwind 2024-04-03 11:15:06 +02:00 • committed by Gergely Nagy
parent 2adc3a45fb
commit a53a94e1c2
No known key found for this signature in database
6 changed files with 94 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

7
web_src/js/modules/tippy.js
View file

@ -3,11 +3,12 @@ import {isDocumentFragmentOrElementNode} from '../utils/dom.js';
import {formatDatetime} from '../utils/time.js';
const visibleInstances = new Set();
const arrowSvg = `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`;
export function createTippy(target, opts = {}) {
// the callback functions should be destructured from opts,
// because we should use our own wrapper functions to handle them, do not let the user override them
const {onHide, onShow, onDestroy, role, theme, ...other} = opts;
const {onHide, onShow, onDestroy, role, theme, arrow, ...other} = opts;
const instance = tippy(target, {
appendTo: document.body,
@ -35,9 +36,9 @@ export function createTippy(target, opts = {}) {
visibleInstances.add(instance);
return onShow?.(instance);
},
arrow: `<svg width="16" height="7"><path d="m0 7 8-7 8 7Z" class="tippy-svg-arrow-outer"/><path d="m0 8 8-7 8 7Z" class="tippy-svg-arrow-inner"/></svg>`,
arrow: arrow || (theme === 'bare' ? false : arrowSvg),
role: role || 'menu', // HTML role attribute
theme: theme || role || 'menu', // CSS theme, either "tooltip", "menu" or "box-with-header"
theme: theme || role || 'menu', // CSS theme, either "tooltip", "menu", "box-with-header" or "bare"
plugins: [followCursor],
...other,
});