mirror of https://github.com/go-gitea/gitea.git
Replace fomantic popup module with tippy.js (#20428)
- replace fomantic popup module with tippy.js - fix chaining and add comment - add 100ms delay to tooltips - stopwatch improvments, raise default maxWidth - update web_src/js/features/common-global.js - use type=submit instead of jspull/20728/head^2
silverwind
3 years ago
committed by
GitHub
parent
36f9ee5813
commit
1b2cd4c4e1
@ -1,4 +1,4 @@
|
||||
{{Add .file.Addition .file.Deletion}}
|
||||
<span class="diff-stats-bar tooltip mx-3" data-content="{{.root.locale.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}" data-variation="wide">
|
||||
<span class="diff-stats-bar tooltip mx-3" data-content="{{.root.locale.Tr "repo.diff.stats_desc_file" (Add .file.Addition .file.Deletion) .file.Addition .file.Deletion | Str2html}}">
|
||||
<div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div>
|
||||
</span>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,56 @@
|
||||
import tippy from 'tippy.js';
|
||||
|
||||
export function createTippy(target, opts) {
|
||||
return tippy(target, {
|
||||
export function createTippy(target, opts = {}) {
|
||||
const instance = tippy(target, {
|
||||
appendTo: document.body,
|
||||
placement: 'top-start',
|
||||
animation: false,
|
||||
allowHTML: true,
|
||||
maxWidth: 500, // increase over default 350px
|
||||
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>`,
|
||||
...(opts?.role && {theme: opts.role}),
|
||||
...opts,
|
||||
});
|
||||
|
||||
// for popups where content refers to a DOM element, we use the 'hide' class to initially hide
|
||||
// the content, now we can remove it as the content has been removed from the DOM by tippy
|
||||
if (opts.content instanceof Element) {
|
||||
opts.content.classList.remove('hide');
|
||||
}
|
||||
|
||||
return instance;
|
||||
}
|
||||
|
||||
export function initTooltip(el, props = {}) {
|
||||
const content = el.getAttribute('data-content') || props.content;
|
||||
if (!content) return null;
|
||||
return createTippy(el, {
|
||||
content,
|
||||
delay: 100,
|
||||
role: 'tooltip',
|
||||
...props,
|
||||
});
|
||||
}
|
||||
|
||||
export function showTemporaryTooltip(target, content) {
|
||||
let tippy, oldContent;
|
||||
if (target._tippy) {
|
||||
tippy = target._tippy;
|
||||
oldContent = tippy.props.content;
|
||||
} else {
|
||||
tippy = initTooltip(target, {content});
|
||||
}
|
||||
|
||||
tippy.setContent(content);
|
||||
tippy.show();
|
||||
tippy.setProps({
|
||||
onHidden: (tippy) => {
|
||||
if (oldContent) {
|
||||
tippy.setContent(oldContent);
|
||||
} else {
|
||||
tippy.destroy();
|
||||
}
|
||||
tippy.setProps({onHidden: undefined});
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue