githaven/templates/repo/actions/runs_list.tmpl
Hester Gong 5e7543fcf4
Use same action status svg icons on actions list as on action page (#24178)
Close #24020 

After:

These icons are the same now:

<img width="1287" alt="截屏2023-04-18 13 52 11"
src="https://user-images.githubusercontent.com/17645053/232684252-05ddc101-dc5b-41b5-b374-132c3d853a41.png">

<img width="1141" alt="截屏2023-04-18 13 54 48"
src="https://user-images.githubusercontent.com/17645053/232684261-6ebd864a-a9aa-4982-af32-2cea91c35be8.png">


In this PR, didn't use `ActionRunStatus.vue` because the mounting of the
component will cause flash of the icons like below:

https://user-images.githubusercontent.com/17645053/232682646-713202dc-9023-4b9c-a849-c3a1ae6dd155.mov

Instead, modified and used `status.tmpl` to make it the same as
`ActionRunStatus.vue` to avoid the ui flash (Welcomed to show how to use
`ActionRunStatus.vue` without flashing if there is a way).
Added comments to both of them for reminding synchronization of these
two files.

---------

Co-authored-by: Jason Song <i@wolfogre.com>
2023-04-19 13:42:53 +08:00

33 lines
1.2 KiB
Handlebars

<div class="issue list">
{{range .Runs}}
<li class="item gt-df gt-py-3 gt-ab">
<div class="issue-item-left gt-df gt-mr-2">
{{template "repo/actions/status" (dict "status" .Status.String)}}
</div>
<div class="issue-item-main action-item-main gt-f1 gt-fc gt-df gt-mr-3">
<div class="issue-item-top-row">
<a class="index gt-ml-0 gt-mr-2" title="{{.Title}}" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
{{- .Title -}}
</a>
</div>
<div class="desc issue-item-bottom-row gt-df gt-ac gt-fw gt-my-1">
<b>{{if not $.CurWorkflow}}{{.WorkflowID}} {{end}}#{{.Index}}</b>: {{$.locale.Tr "actions.runs.commit"}}
<a href="{{$.RepoLink}}/commit/{{.CommitSHA}}">{{ShortSha .CommitSHA}}</a>{{$.locale.Tr "actions.runs.pushed_by"}} {{.TriggerUser.GetDisplayName}}
<span class="ui label">
{{if .RefLink}}
<a href="{{.RefLink}}">{{.PrettyRef}}</a>
{{else}}
{{.PrettyRef}}
{{end}}
</span>
</div>
</div>
<div class="issue-item-right">
<div>{{TimeSinceUnix .Updated $.locale}}</div>
<div>{{.Duration}}</div>
</div>
</li>
{{end}}
</div>
{{template "base/paginate" .}}