Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Enable followCursor for language stats bar (#27713)

Browse Source 
Fixes: https://github.com/go-gitea/gitea/issues/27600


![](https://github.com/go-gitea/gitea/assets/115237/96743d90-0712-4f13-84ec-66f84e6ed2d7)

Also tested together with https://github.com/go-gitea/gitea/pull/27704,
works well.
This commit is contained in:
silverwind 2023-10-22 15:06:04 +02:00 committed by GitHub
parent e3afe4a248
commit d8c09c25d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/sub_menu.tmpl
View File

@ -38,7 +38,7 @@
</div> </div>
<a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu"> <a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu">
{{range .LanguageStats}} {{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}} {{end}}
</a> </a>
{{end}} {{end}}

4
web_src/js/modules/tippy.js
View File

@ -1,4 +1,4 @@
import tippy from 'tippy.js'; import tippy, {followCursor} from 'tippy.js';
const visibleInstances = new Set(); 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>`, 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" role: 'menu', // HTML role attribute, only tooltips should use "tooltip"
theme: other.role || 'menu', // CSS theme, we support either "tooltip" or "menu" theme: other.role || 'menu', // CSS theme, we support either "tooltip" or "menu"
plugins: [followCursor],
...other, ...other,
}); });
@ -78,6 +79,7 @@ function attachTooltip(target, content = null) {
theme: 'tooltip', theme: 'tooltip',
hideOnClick, hideOnClick,
placement: target.getAttribute('data-tooltip-placement') || 'top-start', 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}} : {}), ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),
}; };