From 52cbe2bdbce6cd5a4fc0738ab4a25fafe9aa6d48 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 9 Sep 2022 23:03:18 +0200 Subject: [PATCH] Improve commit status icons (#21124) - Show popover on hover/focus (tippy default) instead of click - If there is only one status, add href to trigger element - Increase tippy [interactiveBorder](https://atomiks.github.io/tippyjs/v6/all-props/#interactiveborder), making it easier to keep interactive tooltips open with sloppy mouse movement - Fix a overflow issue in the commit list Commit list before: Screen Shot 2022-09-09 at 19 00 01 Commit List after: Screen Shot 2022-09-09 at 19 01 43 Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: techknowlogick --- templates/repo/commit_statuses.tmpl | 2 +- web_src/js/features/repo-commit.js | 1 - web_src/js/modules/tippy.js | 2 ++ web_src/less/_repository.less | 5 +++++ 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl index d45d8a1df..d68270908 100644 --- a/templates/repo/commit_statuses.tmpl +++ b/templates/repo/commit_statuses.tmpl @@ -1,4 +1,4 @@ -{{template "repo/commit_status" .Status}} +{{template "repo/commit_status" .Status}}
{{range .Statuses}} diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 170284f10..3aba85091 100644 --- a/web_src/js/features/repo-commit.js +++ b/web_src/js/features/repo-commit.js @@ -61,7 +61,6 @@ export function initCommitStatuses() { const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0; createTippy(this, { - trigger: 'click', content: this.nextElementSibling, placement: top ? 'top-start' : 'bottom-start', interactive: true, diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 7fc273d1c..045df6f0a 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -6,6 +6,8 @@ export function createTippy(target, opts = {}) { placement: target.getAttribute('data-placement') || 'top-start', animation: false, allowHTML: false, + interactiveBorder: 30, + ignoreAttributes: true, maxWidth: 500, // increase over default 350px arrow: ``, ...(opts?.role && {theme: opts.role}), diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 473d6f9dc..219597190 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2827,6 +2827,11 @@ tbody.commit-list { vertical-align: middle; } +// in the commit list, messages can wrap so we can use inline +.commit-list .message-wrapper { + display: inline; +} + @media @mediaSm { tr.commit-list { width: 100%;