fedi/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-10 01:05:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve commit status icons (#21124)

Browse source 
- 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>
This commit is contained in:
silverwind 2022-09-09 23:03:18 +02:00 committed by GitHub
parent 0bd59381ad
commit 52cbe2bdbc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/repo/commit_statuses.tmpl
View file

@ -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 commit-statuses-popup commit-statuses tippy-target">
<div class="ui relaxed list divided"> <div class="ui relaxed list divided">
{{range .Statuses}} {{range .Statuses}}

1
web_src/js/features/repo-commit.js
View file

@ -61,7 +61,6 @@ export function initCommitStatuses() {
const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0; const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
createTippy(this, { createTippy(this, {
trigger: 'click',
content: this.nextElementSibling, content: this.nextElementSibling,
placement: top ? 'top-start' : 'bottom-start', placement: top ? 'top-start' : 'bottom-start',
interactive: true, interactive: true,

2
web_src/js/modules/tippy.js
View file

@ -6,6 +6,8 @@ export function createTippy(target, opts = {}) {
placement: target.getAttribute('data-placement') || 'top-start', placement: target.getAttribute('data-placement') || 'top-start',
animation: false, animation: false,
allowHTML: false, allowHTML: false,
interactiveBorder: 30,
ignoreAttributes: true,
maxWidth: 500, // increase over default 350px 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?.role && {theme: opts.role}),

5
web_src/less/_repository.less
View file

@ -2827,6 +2827,11 @@ tbody.commit-list {
vertical-align: middle; vertical-align: middle;
} }
// in the commit list, messages can wrap so we can use inline
.commit-list .message-wrapper {
display: inline;
}
@media @mediaSm { @media @mediaSm {
tr.commit-list { tr.commit-list {
width: 100%; width: 100%;