From 5e7543fcf441afb30aba6188edac754ef32b9ac3 Mon Sep 17 00:00:00 2001 From: Hester Gong Date: Wed, 19 Apr 2023 13:42:53 +0800 Subject: [PATCH] Use same action status svg icons on actions list as on action page (#24178) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Close #24020 After: These icons are the same now: 截屏2023-04-18 13 52 11 截屏2023-04-18 13 54 48 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 --- templates/repo/actions/runs_list.tmpl | 4 +-- templates/repo/actions/status.tmpl | 36 ++++++++++++++++------- web_src/js/components/ActionRunStatus.vue | 15 ++++++---- 3 files changed, 36 insertions(+), 19 deletions(-) diff --git a/templates/repo/actions/runs_list.tmpl b/templates/repo/actions/runs_list.tmpl index a28b9d713..709bfaace 100644 --- a/templates/repo/actions/runs_list.tmpl +++ b/templates/repo/actions/runs_list.tmpl @@ -1,8 +1,8 @@
{{range .Runs}}
  • -
    - {{template "repo/actions/status" .Status}} +
    + {{template "repo/actions/status" (dict "status" .Status.String)}}
    diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl index fd8a683bd..794f7811e 100644 --- a/templates/repo/actions/status.tmpl +++ b/templates/repo/actions/status.tmpl @@ -1,12 +1,26 @@ -{{if .IsWaiting}} - -{{end}} -{{if .IsRunning}} - -{{end}} -{{if .IsSuccess}} - -{{end}} -{{if .IsFailure}} - + +{{- $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}} diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue index b72dfb1aa..8a96eb5f0 100644 --- a/web_src/js/components/ActionRunStatus.vue +++ b/web_src/js/components/ActionRunStatus.vue @@ -1,10 +1,13 @@ +