mirror of
				https://github.com/go-gitea/gitea
				synced 2025-10-31 19:38:23 +00:00 
			
		
		
		
	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:
		| @@ -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]) | ||||||
| 		} | 		} | ||||||
| 	}) | 	}) | ||||||
| } | } | ||||||
|   | |||||||
| @@ -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
									
								
							
							
						
						
									
										1
									
								
								public/img/svg/gitea-exclamation.svg
									
									
									
									
									
										Normal 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 | 
| @@ -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}} | ||||||
|   | |||||||
| @@ -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}} | ||||||
|   | |||||||
| @@ -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
									
								
							
							
						
						
									
										1
									
								
								web_src/svg/gitea-exclamation.svg
									
									
									
									
									
										Normal 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 | 
		Reference in New Issue
	
	Block a user