From 89505ac650c8bce17554bc001a00673741e21528 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 9 Aug 2022 23:55:29 +0200 Subject: [PATCH] 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 | 14 +++++++------- integrations/repo_commits_test.go | 12 ++++++------ public/img/svg/gitea-exclamation.svg | 1 + templates/repo/commit_status.tmpl | 10 +++++----- templates/repo/commit_statuses.tmpl | 8 ++++---- web_src/js/features/repo-commit.js | 4 ++-- web_src/svg/gitea-exclamation.svg | 1 + 7 files changed, 26 insertions(+), 24 deletions(-) create mode 100644 public/img/svg/gitea-exclamation.svg create mode 100644 web_src/svg/gitea-exclamation.svg diff --git a/integrations/pull_status_test.go b/integrations/pull_status_test.go index 33a27cd812..d38d90169b 100644 --- a/integrations/pull_status_test.go +++ b/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.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]) } }) } diff --git a/integrations/repo_commits_test.go b/integrations/repo_commits_test.go index 7107f43b0f..b18b35da1e 100644 --- a/integrations/repo_commits_test.go +++ b/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") } diff --git a/public/img/svg/gitea-exclamation.svg b/public/img/svg/gitea-exclamation.svg new file mode 100644 index 0000000000..22176010dc --- /dev/null +++ b/public/img/svg/gitea-exclamation.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/templates/repo/commit_status.tmpl b/templates/repo/commit_status.tmpl index 75ab6b4e1c..fbf064527d 100644 --- a/templates/repo/commit_status.tmpl +++ b/templates/repo/commit_status.tmpl @@ -1,15 +1,15 @@ {{if eq .State "pending"}} - + {{svg "octicon-dot-fill" 18 "commit-status icon text yellow"}} {{end}} {{if eq .State "success"}} - + {{svg "octicon-check" 18 "commit-status icon text green"}} {{end}} {{if eq .State "error"}} - + {{svg "gitea-exclamation" 18 "commit-status icon text red"}} {{end}} {{if eq .State "failure"}} - + {{svg "octicon-x" 18 "commit-status icon text red"}} {{end}} {{if eq .State "warning"}} - + {{svg "gitea-exclamation" 18 "commit-status icon text yellow"}} {{end}} diff --git a/templates/repo/commit_statuses.tmpl b/templates/repo/commit_statuses.tmpl index 893887736c..fe3598d755 100644 --- a/templates/repo/commit_statuses.tmpl +++ b/templates/repo/commit_statuses.tmpl @@ -1,12 +1,12 @@ -{{template "repo/commit_status" .Status}} +{{template "repo/commit_status" .Status}}
{{range .Statuses}}
- {{template "repo/commit_status" .}} - {{.Context}} {{.Description}} + {{template "repo/commit_status" .}} + {{.Context}} {{.Description}} {{if .TargetURL}} -
{{$.root.locale.Tr "repo.pulls.status_checks_details"}}
+ {{$.root.locale.Tr "repo.pulls.status_checks_details"}} {{end}}
{{end}} diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js index aac734de26..308554a305 100644 --- a/web_src/js/features/repo-commit.js +++ b/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, }); }); diff --git a/web_src/svg/gitea-exclamation.svg b/web_src/svg/gitea-exclamation.svg new file mode 100644 index 0000000000..c83cb4158e --- /dev/null +++ b/web_src/svg/gitea-exclamation.svg @@ -0,0 +1 @@ + \ No newline at end of file