Add Hide/Show all checks button to commit status check (#26284)
				
					
				
			Step one for a GitHub like commit status check ui:    Step two:   The design now will list all commit status checks which takes too much space. This is a pre-improve for #26247 --------- Co-authored-by: delvh <dev.lh@web.de> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
		
							parent
							
								
									0ba4ecc3bd
								
							
						
					
					
						commit
						dcb648ee71
					
				
					 15 changed files with 138 additions and 86 deletions
				
			
		| 
						 | 
				
			
			@ -1,27 +1,43 @@
 | 
			
		|||
{{if $.LatestCommitStatus}}
 | 
			
		||||
	{{if not $.Issue.PullRequest.HasMerged}}
 | 
			
		||||
		<div class="ui top attached header">
 | 
			
		||||
			{{if eq .LatestCommitStatus.State "pending"}}
 | 
			
		||||
				{{ctx.Locale.Tr "repo.pulls.status_checking"}}
 | 
			
		||||
			{{else if eq .LatestCommitStatus.State "success"}}
 | 
			
		||||
				{{ctx.Locale.Tr "repo.pulls.status_checks_success"}}
 | 
			
		||||
			{{else if eq .LatestCommitStatus.State "warning"}}
 | 
			
		||||
				{{ctx.Locale.Tr "repo.pulls.status_checks_warning"}}
 | 
			
		||||
			{{else if eq .LatestCommitStatus.State "failure"}}
 | 
			
		||||
				{{ctx.Locale.Tr "repo.pulls.status_checks_failure"}}
 | 
			
		||||
			{{else if eq .LatestCommitStatus.State "error"}}
 | 
			
		||||
				{{ctx.Locale.Tr "repo.pulls.status_checks_error"}}
 | 
			
		||||
			{{else}}
 | 
			
		||||
				{{ctx.Locale.Tr "repo.pulls.status_checking"}}
 | 
			
		||||
			{{end}}
 | 
			
		||||
			</div>
 | 
			
		||||
	{{end}}
 | 
			
		||||
{{/*
 | 
			
		||||
Template Attributes:
 | 
			
		||||
* CommitStatus: summary of all commit status state
 | 
			
		||||
* CommitStatuses: all commit status elements
 | 
			
		||||
* ShowHideChecks: whether use a button to show/hide the checks
 | 
			
		||||
* is_context_required: Used in pull request commit status check table
 | 
			
		||||
*/}}
 | 
			
		||||
 | 
			
		||||
	{{range $.LatestCommitStatuses}}
 | 
			
		||||
		<div class="ui attached segment pr-status">
 | 
			
		||||
			{{template "repo/commit_status" .}}
 | 
			
		||||
			<div class="status-context">
 | 
			
		||||
				<span>{{.Context}} <span class="text grey">{{.Description}}</span></span>
 | 
			
		||||
{{if .CommitStatus}}
 | 
			
		||||
<div class="commit-status-panel">
 | 
			
		||||
	<div class="ui top attached header commit-status-header">
 | 
			
		||||
		{{if eq .CommitStatus.State "pending"}}
 | 
			
		||||
			{{ctx.Locale.Tr "repo.pulls.status_checking"}}
 | 
			
		||||
		{{else if eq .CommitStatus.State "success"}}
 | 
			
		||||
			{{ctx.Locale.Tr "repo.pulls.status_checks_success"}}
 | 
			
		||||
		{{else if eq .CommitStatus.State "warning"}}
 | 
			
		||||
			{{ctx.Locale.Tr "repo.pulls.status_checks_warning"}}
 | 
			
		||||
		{{else if eq .CommitStatus.State "failure"}}
 | 
			
		||||
			{{ctx.Locale.Tr "repo.pulls.status_checks_failure"}}
 | 
			
		||||
		{{else if eq .CommitStatus.State "error"}}
 | 
			
		||||
			{{ctx.Locale.Tr "repo.pulls.status_checks_error"}}
 | 
			
		||||
		{{else}}
 | 
			
		||||
			{{ctx.Locale.Tr "repo.pulls.status_checking"}}
 | 
			
		||||
		{{end}}
 | 
			
		||||
 | 
			
		||||
		{{if .ShowHideChecks}}
 | 
			
		||||
		<div class="ui right">
 | 
			
		||||
			<button class="commit-status-hide-checks btn interact-fg"
 | 
			
		||||
			data-show-all="{{ctx.Locale.Tr "repo.pulls.status_checks_show_all"}}"
 | 
			
		||||
			data-hide-all="{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}">
 | 
			
		||||
			{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}</button>
 | 
			
		||||
		</div>
 | 
			
		||||
		{{end}}
 | 
			
		||||
	</div>
 | 
			
		||||
 | 
			
		||||
	<div class="commit-status-list">
 | 
			
		||||
		{{range .CommitStatuses}}
 | 
			
		||||
			<div class="commit-status-item">
 | 
			
		||||
				{{template "repo/commit_status" .}}
 | 
			
		||||
				<div class="status-context gt-ellipsis">{{.Context}} <span class="text light-2">{{.Description}}</span></div>
 | 
			
		||||
				<div class="ui status-details">
 | 
			
		||||
					{{if $.is_context_required}}
 | 
			
		||||
						{{if (call $.is_context_required .Context)}}<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
 | 
			
		||||
| 
						 | 
				
			
			@ -29,6 +45,7 @@
 | 
			
		|||
					<span>{{if .TargetURL}}<a href="{{.TargetURL}}">{{ctx.Locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span>
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
		</div>
 | 
			
		||||
	{{end}}
 | 
			
		||||
		{{end}}
 | 
			
		||||
	</div>
 | 
			
		||||
</div>
 | 
			
		||||
{{end}}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue