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 jstokarchuk/v1.18
silverwind
2 years ago
committed by
GitHub
parent
36f9ee5813
commit
1b2cd4c4e1
@ -1,4 +1,4 @@ |
|||||||
{{Add .file.Addition .file.Deletion}} |
{{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> |
<div class="diff-stats-add-bar" style="width: {{DiffStatsWidth .file.Addition .file.Deletion}}%"></div> |
||||||
</span> |
</span> |
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,56 @@ |
|||||||
import tippy from 'tippy.js'; |
import tippy from 'tippy.js'; |
||||||
|
|
||||||
export function createTippy(target, opts) { |
export function createTippy(target, opts = {}) { |
||||||
return tippy(target, { |
const instance = tippy(target, { |
||||||
appendTo: document.body, |
appendTo: document.body, |
||||||
placement: 'top-start', |
placement: 'top-start', |
||||||
animation: false, |
animation: false, |
||||||
allowHTML: true, |
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>`, |
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, |
...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