Change commit status icons to SVG (#20736)

* Fix commit status popover and switch to svg icons

* margin tweak

* fix integration, use warning sign for error to match previous

* remove fix from here, will be a new pr

* use top/bottom positioning

* vertically center

* use no-entry over alert oction

* add exclamation icon

* fix test selector

* more test fixes
This commit is contained in:
silverwind 2022-08-09 23:55:29 +02:00 committed by GitHub
parent 7009eb9a24
commit 89505ac650
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 26 additions and 24 deletions

View file

@ -56,11 +56,11 @@ func TestPullCreate_CommitStatus(t *testing.T) {
}
statesIcons := map[api.CommitStatusState]string{
api.CommitStatusPending: "circle icon yellow",
api.CommitStatusSuccess: "check icon green",
api.CommitStatusError: "warning icon red",
api.CommitStatusFailure: "remove icon red",
api.CommitStatusWarning: "warning sign icon yellow",
api.CommitStatusPending: "octicon-dot-fill",
api.CommitStatusSuccess: "octicon-check",
api.CommitStatusError: "gitea-exclamation",
api.CommitStatusFailure: "octicon-x",
api.CommitStatusWarning: "gitea-exclamation",
}
testCtx := NewAPITestContext(t, "user1", "repo1")
@ -80,9 +80,9 @@ func TestPullCreate_CommitStatus(t *testing.T) {
assert.NotEmpty(t, commitURL)
assert.EqualValues(t, commitID, path.Base(commitURL))
cls, ok := doc.doc.Find("#commits-table tbody tr td.message i.commit-status").Last().Attr("class")
cls, ok := doc.doc.Find("#commits-table tbody tr td.message .commit-status").Last().Attr("class")
assert.True(t, ok)
assert.EqualValues(t, "commit-status "+statesIcons[status], cls)
assert.Contains(t, cls, statesIcons[status])
}
})
}

View file

@ -55,7 +55,7 @@ func doTestRepoCommitWithStatus(t *testing.T, state string, classes ...string) {
doc = NewHTMLParser(t, resp.Body)
// Check if commit status is displayed in message column
sel := doc.doc.Find("#commits-table tbody tr td.message a.commit-statuses-trigger i.commit-status")
sel := doc.doc.Find("#commits-table tbody tr td.message a.commit-statuses-trigger .commit-status")
assert.Equal(t, 1, sel.Length())
for _, class := range classes {
assert.True(t, sel.HasClass(class))
@ -96,21 +96,21 @@ func testRepoCommitsWithStatus(t *testing.T, resp, respOne *httptest.ResponseRec
}
func TestRepoCommitsWithStatusPending(t *testing.T) {
doTestRepoCommitWithStatus(t, "pending", "circle", "yellow")
doTestRepoCommitWithStatus(t, "pending", "octicon-dot-fill", "yellow")
}
func TestRepoCommitsWithStatusSuccess(t *testing.T) {
doTestRepoCommitWithStatus(t, "success", "check", "green")
doTestRepoCommitWithStatus(t, "success", "octicon-check", "green")
}
func TestRepoCommitsWithStatusError(t *testing.T) {
doTestRepoCommitWithStatus(t, "error", "warning", "red")
doTestRepoCommitWithStatus(t, "error", "gitea-exclamation", "red")
}
func TestRepoCommitsWithStatusFailure(t *testing.T) {
doTestRepoCommitWithStatus(t, "failure", "remove", "red")
doTestRepoCommitWithStatus(t, "failure", "octicon-x", "red")
}
func TestRepoCommitsWithStatusWarning(t *testing.T) {
doTestRepoCommitWithStatus(t, "warning", "warning", "sign", "yellow")
doTestRepoCommitWithStatus(t, "warning", "gitea-exclamation", "yellow")
}

View file

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" class="svg gitea-exclamation" width="16" height="16" aria-hidden="true"><path d="M12 15.99a2 2 0 0 0 2-2V2.03a2 2 0 0 0-4 0v11.96a2 2 0 0 0 2 2zm0 7.98a2.5 2.5 0 1 0-2.5-2.5 2.5 2.5 0 0 0 2.5 2.5z"/></svg>

After

Width:  |  Height:  |  Size: 230 B

View file

@ -1,15 +1,15 @@
{{if eq .State "pending"}}
<i class="commit-status circle icon yellow"></i>
{{svg "octicon-dot-fill" 18 "commit-status icon text yellow"}}
{{end}}
{{if eq .State "success"}}
<i class="commit-status check icon green"></i>
{{svg "octicon-check" 18 "commit-status icon text green"}}
{{end}}
{{if eq .State "error"}}
<i class="commit-status warning icon red"></i>
{{svg "gitea-exclamation" 18 "commit-status icon text red"}}
{{end}}
{{if eq .State "failure"}}
<i class="commit-status remove icon red"></i>
{{svg "octicon-x" 18 "commit-status icon text red"}}
{{end}}
{{if eq .State "warning"}}
<i class="commit-status warning sign icon yellow"></i>
{{svg "gitea-exclamation" 18 "commit-status icon text yellow"}}
{{end}}

View file

@ -1,12 +1,12 @@
<a class="ui link commit-statuses-trigger">{{template "repo/commit_status" .Status}}</a>
<a class="ui link commit-statuses-trigger vm">{{template "repo/commit_status" .Status}}</a>
<div class="ui commit-statuses-popup commit-statuses hide">
<div class="ui relaxed list divided">
{{range .Statuses}}
<div class="ui item singular-status df">
<span>{{template "repo/commit_status" .}}</span>
<span class="ui f1">{{.Context}} <span class="text grey">{{.Description}}</span></span>
{{template "repo/commit_status" .}}
<span class="ui ml-3 f1">{{.Context}} <span class="text grey">{{.Description}}</span></span>
{{if .TargetURL}}
<div class="ui"><a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{$.root.locale.Tr "repo.pulls.status_checks_details"}}</a></div>
<a class="ml-3" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{$.root.locale.Tr "repo.pulls.status_checks_details"}}</a>
{{end}}
</div>
{{end}}

View file

@ -58,12 +58,12 @@ export function initRepoCommitLastCommitLoader() {
export function initCommitStatuses() {
$('.commit-statuses-trigger').each(function () {
const positionRight = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
createTippy(this, {
trigger: 'click',
content: this.nextSibling,
placement: positionRight ? 'right' : 'left',
placement: top ? 'top-start' : 'bottom-start',
interactive: true,
});
});

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 15.99a2 2 0 0 0 2-2V2.03a2 2 0 0 0-4 0v11.96a2 2 0 0 0 2 2zm0 7.98a2.5 2.5 0 1 0-2.5-2.5 2.5 2.5 0 0 0 2.5 2.5z"/></svg>

After

Width:  |  Height:  |  Size: 216 B