From d8727f1ec79e4f5c99db763c504baf5eff17551b Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Wed, 1 Mar 2023 08:25:50 +0000
Subject: [PATCH 1/3] add run status

---
 routers/web/repo/actions/view.go         |  2 ++
 web_src/js/components/RepoActionView.vue | 21 +++++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/routers/web/repo/actions/view.go b/routers/web/repo/actions/view.go
index dd2750f905883..5569709368ce8 100644
--- a/routers/web/repo/actions/view.go
+++ b/routers/web/repo/actions/view.go
@@ -51,6 +51,7 @@ type ViewResponse struct {
 		Run struct {
 			Link       string     `json:"link"`
 			Title      string     `json:"title"`
+			Status     string     `json:"status"`
 			CanCancel  bool       `json:"canCancel"`
 			CanApprove bool       `json:"canApprove"` // the run needs an approval and the doer has permission to approve
 			Done       bool       `json:"done"`
@@ -111,6 +112,7 @@ func ViewPost(ctx *context_module.Context) {
 	resp.State.Run.CanApprove = run.NeedApproval && ctx.Repo.CanWrite(unit.TypeActions)
 	resp.State.Run.Done = run.Status.IsDone()
 	resp.State.Run.Jobs = make([]*ViewJob, 0, len(jobs)) // marshal to '[]' instead fo 'null' in json
+	resp.State.Run.Status = run.Status.String()
 	for _, v := range jobs {
 		resp.State.Run.Jobs = append(resp.State.Run.Jobs, &ViewJob{
 			ID:       v.ID,
diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 762067f52388b..583fb864a0a98 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -2,7 +2,15 @@
   <div class="action-view-container">
     <div class="action-view-header">
       <div class="action-info-summary">
-        {{ run.title }}
+        <div class="action-status">
+          <SvgIcon name="octicon-check-circle-fill" class="green" v-if="run.status === 'success'"/>
+          <SvgIcon name="octicon-clock" class="ui text yellow" v-else-if="run.status === 'waiting'"/>
+          <SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="run.status === 'running'"/>
+          <SvgIcon name="octicon-x-circle-fill" class="red" v-else/>
+        </div>
+        <div class="action-title">
+          {{ run.title }}
+        </div>
         <button class="run_approve" @click="approveRun()" v-if="run.canApprove">
           <i class="play circle outline icon"/>
         </button>
@@ -99,6 +107,7 @@ const sfc = {
       run: {
         link: '',
         title: '',
+        status: '',
         canCancel: false,
         canApprove: false,
         done: false,
@@ -327,7 +336,15 @@ export function initRepositoryActionView() {
 .action-info-summary {
   font-size: 150%;
   height: 20px;
-  padding: 0 10px;
+  display: flex;
+
+  .action-status {
+    margin-left: 5px;
+  }
+
+  .action-title {
+    padding: 0 5px;
+  }
 }
 
 // ================

From 70c85bbc28cba12ce6e0b3d44a32dc3cbce87a27 Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Thu, 2 Mar 2023 06:58:56 +0000
Subject: [PATCH 2/3] add vertical-align

---
 web_src/js/components/RepoActionView.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 583fb864a0a98..e9c681fdc02f9 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -340,6 +340,10 @@ export function initRepositoryActionView() {
 
   .action-status {
     margin-left: 5px;
+  
+    span {
+      vertical-align: middle;
+    }
   }
 
   .action-title {

From 0aff1d35c3c5ba1f0785c9484b7412673de69934 Mon Sep 17 00:00:00 2001
From: yp05327 <576951401@qq.com>
Date: Thu, 2 Mar 2023 07:09:52 +0000
Subject: [PATCH 3/3] change action status size

---
 web_src/js/components/RepoActionView.vue | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index e9c681fdc02f9..a5c12c754ece8 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -2,12 +2,10 @@
   <div class="action-view-container">
     <div class="action-view-header">
       <div class="action-info-summary">
-        <div class="action-status">
-          <SvgIcon name="octicon-check-circle-fill" class="green" v-if="run.status === 'success'"/>
-          <SvgIcon name="octicon-clock" class="ui text yellow" v-else-if="run.status === 'waiting'"/>
-          <SvgIcon name="octicon-meter" class="ui text yellow" class-name="job-status-rotate" v-else-if="run.status === 'running'"/>
-          <SvgIcon name="octicon-x-circle-fill" class="red" v-else/>
-        </div>
+        <SvgIcon name="octicon-check-circle-fill" size="20" class="green" v-if="run.status === 'success'"/>
+        <SvgIcon name="octicon-clock" size="20" class="ui text yellow" v-else-if="run.status === 'waiting'"/>
+        <SvgIcon name="octicon-meter" size="20" class="ui text yellow" class-name="job-status-rotate" v-else-if="run.status === 'running'"/>
+        <SvgIcon name="octicon-x-circle-fill" size="20" class="red" v-else/>
         <div class="action-title">
           {{ run.title }}
         </div>
@@ -338,14 +336,6 @@ export function initRepositoryActionView() {
   height: 20px;
   display: flex;
 
-  .action-status {
-    margin-left: 5px;
-  
-    span {
-      vertical-align: middle;
-    }
-  }
-
   .action-title {
     padding: 0 5px;
   }