From d8c09c25d1a51861f2e160d213449c7bde327a77 Mon Sep 17 00:00:00 2001 From: silverwind <me@silverwind.io> Date: Sun, 22 Oct 2023 15:06:04 +0200 Subject: [PATCH] Enable followCursor for language stats bar (#27713) Fixes: https://github.com/go-gitea/gitea/issues/27600  Also tested together with https://github.com/go-gitea/gitea/pull/27704, works well. --- templates/repo/sub_menu.tmpl | 2 +- web_src/js/modules/tippy.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl index 56c94f1b65..8edb0c1516 100644 --- a/templates/repo/sub_menu.tmpl +++ b/templates/repo/sub_menu.tmpl @@ -38,7 +38,7 @@ </div> <a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu"> {{range .LanguageStats}} - <div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}}></div> + <div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div> {{end}} </a> {{end}} diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 4eed0aa4bb..ec7ee2141f 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -1,4 +1,4 @@ -import tippy from 'tippy.js'; +import tippy, {followCursor} from 'tippy.js'; const visibleInstances = new Set(); @@ -35,6 +35,7 @@ export function createTippy(target, opts = {}) { 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>`, role: 'menu', // HTML role attribute, only tooltips should use "tooltip" theme: other.role || 'menu', // CSS theme, we support either "tooltip" or "menu" + plugins: [followCursor], ...other, }); @@ -78,6 +79,7 @@ function attachTooltip(target, content = null) { theme: 'tooltip', hideOnClick, placement: target.getAttribute('data-tooltip-placement') || 'top-start', + followCursor: target.getAttribute('data-tooltip-follow-cursor') || false, ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), };