diff options
| author | silverwind <me@silverwind.io> | 2022-09-09 23:03:18 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-09-09 17:03:18 -0400 |
| commit | 52cbe2bdbce6cd5a4fc0738ab4a25fafe9aa6d48 (patch) | |
| tree | 9d90488e05c3062195488f37e74b04aaf7356bcd | |
| parent | 0bd59381adb9864f25c1b7c59fbde45cfa9d807b (diff) | |
| download | gitea-52cbe2bdbce6cd5a4fc0738ab4a25fafe9aa6d48.tar.gz gitea-52cbe2bdbce6cd5a4fc0738ab4a25fafe9aa6d48.zip | |
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:
<img width="459" alt="Screen Shot 2022-09-09 at 19 00 01"
src="https://user-images.githubusercontent.com/115237/189405517-68de5a69-e312-4ea2-ab81-87629db6064b.png">
Commit List after:
<img width="475" alt="Screen Shot 2022-09-09 at 19 01 43"
src="https://user-images.githubusercontent.com/115237/189405574-13e84885-9073-4f86-9eeb-d008c1639647.png">
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
| -rw-r--r-- | templates/repo/commit_statuses.tmpl | 2 | ||||
| -rw-r--r-- | web_src/js/features/repo-commit.js | 1 | ||||
| -rw-r--r-- | web_src/js/modules/tippy.js | 2 | ||||
| -rw-r--r-- | 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 d45d8a1df6..d682709082 100644 --- a/templates/repo/commit_statuses.tmpl +++ b/templates/repo/commit_statuses.tmpl @@ -1,4 +1,4 @@ -<a class="ui link commit-statuses-trigger vm">{{template "repo/commit_status" .Status}}</a> +<a class="ui link commit-statuses-trigger vm"{{if eq (len .Statuses) 1}}{{$status := index .Statuses 0}}{{if $status.TargetURL}} href="{{$status.TargetURL}}"{{end}}{{end}}>{{template "repo/commit_status" .Status}}</a> <div class="ui commit-statuses-popup commit-statuses tippy-target"> <div class="ui relaxed list divided"> {{range .Statuses}} diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index 170284f101..3aba850911 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 7fc273d1cc..045df6f0a0 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: `<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}), diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 473d6f9dc7..219597190d 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%; |