linden123/githaven-fork
1
1
Fork 0
forked from Shiloh/githaven
Code Pull Requests Activity

Change commit status icons to SVG (#20736)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
integrations/pull_status_test.go
View File

@ -56,11 +56,11 @@ func TestPullCreate_CommitStatus(t *testing.T) {
} }
statesIcons := map[api.CommitStatusState]string{ statesIcons := map[api.CommitStatusState]string{
api.CommitStatusPending: "circle icon yellow", api.CommitStatusPending: "octicon-dot-fill",
api.CommitStatusSuccess: "check icon green", api.CommitStatusSuccess: "octicon-check",
api.CommitStatusError: "warning icon red", api.CommitStatusError: "gitea-exclamation",
api.CommitStatusFailure: "remove icon red", api.CommitStatusFailure: "octicon-x",
api.CommitStatusWarning: "warning sign icon yellow", api.CommitStatusWarning: "gitea-exclamation",
} }
testCtx := NewAPITestContext(t, "user1", "repo1") testCtx := NewAPITestContext(t, "user1", "repo1")
@ -80,9 +80,9 @@ func TestPullCreate_CommitStatus(t *testing.T) {
assert.NotEmpty(t, commitURL) assert.NotEmpty(t, commitURL)
assert.EqualValues(t, commitID, path.Base(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.True(t, ok)
assert.EqualValues(t, "commit-status "+statesIcons[status], cls) assert.Contains(t, cls, statesIcons[status])
} }
}) })
} }

12
integrations/repo_commits_test.go
View File

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

1
public/img/svg/gitea-exclamation.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 230 B

10
templates/repo/commit_status.tmpl
View File

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

8
templates/repo/commit_statuses.tmpl
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 commit-statuses-popup commit-statuses hide">
<div class="ui relaxed list divided"> <div class="ui relaxed list divided">
{{range .Statuses}} {{range .Statuses}}
<div class="ui item singular-status df"> <div class="ui item singular-status df">
<span>{{template "repo/commit_status" .}}</span> {{template "repo/commit_status" .}}
<span class="ui f1">{{.Context}} <span class="text grey">{{.Description}}</span></span> <span class="ui ml-3 f1">{{.Context}} <span class="text grey">{{.Description}}</span></span>
{{if .TargetURL}} {{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}} {{end}}
</div> </div>
{{end}} {{end}}

4
web_src/js/features/repo-commit.js
View File

@ -58,12 +58,12 @@ export function initRepoCommitLastCommitLoader() {
export function initCommitStatuses() { export function initCommitStatuses() {
$('.commit-statuses-trigger').each(function () { $('.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, { createTippy(this, {
trigger: 'click', trigger: 'click',
content: this.nextSibling, content: this.nextSibling,
placement: positionRight ? 'right' : 'left', placement: top ? 'top-start' : 'bottom-start',
interactive: true, interactive: true,
}); });
}); });

1
web_src/svg/gitea-exclamation.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 216 B