diff options
| author | Hester Gong <hestergong@gmail.com> | 2023-04-19 13:42:53 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-04-19 13:42:53 +0800 |
| commit | 5e7543fcf441afb30aba6188edac754ef32b9ac3 (patch) | |
| tree | cf86d64e7c2adcada59c24d2465df766d8bf9f98 /templates | |
| parent | 5fcf328a8d825102a77cfc79b53ce7948d41bf33 (diff) | |
| download | gitea-5e7543fcf441afb30aba6188edac754ef32b9ac3.tar.gz gitea-5e7543fcf441afb30aba6188edac754ef32b9ac3.zip | |
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>
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/repo/actions/runs_list.tmpl | 4 | ||||
| -rw-r--r-- | templates/repo/actions/status.tmpl | 36 |
2 files changed, 27 insertions, 13 deletions
diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl index a28b9d7137..709bfaaced 100644 --- a/templates/repo/actions/runs_list.tmpl +++ b/templates/repo/actions/runs_list.tmpl @@ -1,8 +1,8 @@ <div class="issue list"> {{range .Runs}} <li class="item gt-df gt-py-3 gt-ab"> - <div class="issue-item-left gt-df"> - {{template "repo/actions/status" .Status}} + <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"> diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl index fd8a683bda..794f7811ee 100644 --- a/templates/repo/actions/status.tmpl +++ b/templates/repo/actions/status.tmpl @@ -1,12 +1,26 @@ -{{if .IsWaiting}} - <i class="commit-status circle icon gray"></i> -{{end}} -{{if .IsRunning}} - <i class="commit-status circle icon yellow"></i> -{{end}} -{{if .IsSuccess}} - <i class="commit-status check icon green"></i> -{{end}} -{{if .IsFailure}} - <i class="commit-status warning icon red"></i> +<!-- This template should be kept the same as web_src/js/components/ActionRunStatus.vue + Please also update the vue file above if this template is modified. +--> +{{- $size := 16 -}} +{{- if .size -}} +{{- $size = .size -}} +{{- end -}} + +{{- $className := "" -}} +{{- if .className -}} +{{- $className = .className -}} +{{- end -}} + +{{if eq .status "success"}} + {{svg "octicon-check-circle-fill" $size (printf "text green %s" $className)}} +{{else if eq .status "skipped"}} + {{svg "octicon-skip" $size (printf "text grey %s" $className)}} +{{else if eq .status "waiting"}} + {{svg "octicon-clock" $size (printf "text yellow %s" $className)}} +{{else if eq .status "blocked"}} + {{svg "octicon-blocked" $size (printf "text yellow %s" $className)}} +{{else if eq .status "running"}} + {{svg "octicon-meter" $size (printf "text yellow job-status-rotate %s" $className)}} +{{else}} + {{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}} {{end}} |