From 5e7543fcf441afb30aba6188edac754ef32b9ac3 Mon Sep 17 00:00:00 2001
From: Hester Gong <hestergong@gmail.com>
Date: Wed, 19 Apr 2023 13:42:53 +0800
Subject: 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:

<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>
---
 web_src/js/components/ActionRunStatus.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

(limited to 'web_src')

diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
index b72dfb1aa6..8a96eb5f01 100644
--- a/web_src/js/components/ActionRunStatus.vue
+++ b/web_src/js/components/ActionRunStatus.vue
@@ -1,10 +1,13 @@
+<!-- This vue should be kept the same as templates/repo/actions/status.tmpl
+    Please also update the template file above if this vue is modified.
+-->
 <template>
-  <SvgIcon name="octicon-check-circle-fill" class="ui text green" :size="size" :class-name="className" v-if="status === 'success'"/>
-  <SvgIcon name="octicon-skip" class="ui text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
-  <SvgIcon name="octicon-clock" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
-  <SvgIcon name="octicon-blocked" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
-  <SvgIcon name="octicon-meter" class="ui text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
-  <SvgIcon name="octicon-x-circle-fill" class="ui text red" :size="size" v-else/>
+  <SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>
+  <SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
+  <SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
+  <SvgIcon name="octicon-blocked" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
+  <SvgIcon name="octicon-meter" class="text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
+  <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else/>
 </template>
 
 <script>
-- 
cgit v1.2.3