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

integrations/pull_status_test.go

@@ -56,11 +56,11 @@ func TestPullCreate_CommitStatus(t *testing.T) {
 		}
 
 		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")
@@ -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])
 		}
 	})
 }

integrations/repo_commits_test.go

@@ -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")
 }

public/img/svg/gitea-exclamation.svg

@@ -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>

templates/repo/commit_status.tmpl

@@ -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}}

templates/repo/commit_statuses.tmpl

@@ -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>
+				{{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}}
-					<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}}

web_src/js/features/repo-commit.js

@@ -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,
     });
   });

web_src/svg/gitea-exclamation.svg

@@ -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>