Improvements for action detail page (go-gitea#24718)

Close go-gitea#24625 Main changes: 1. For the left panel, show rerun icon only on hover, and add style when the job is selected, and removed icon on the "rerun all" button and modify the text on the button https://github.com/go-gitea/gitea/assets/17645053/cc437a17-d2e9-4f1b-a8cf-f56e53962767 2. Adjust fonts, and add on hover effects to the log lines. And add loading effect when the job is done and the job step log is expanded for the first time. (With reference to github) https://github.com/go-gitea/gitea/assets/17645053/2808d77d-f402-4fb0-8819-7aa0a018cf0c 3. Add `gt-ellipsis` to `step-summary-msg` and `job-brief-name` <img width="898" alt="ellipsis" src="https://github.com/go-gitea/gitea/assets/17645053/e2fb7049-3125-4252-970d-15b0751febc7"> 4. Fixed go-gitea#24625 (comment) by adding explicit conditions to `ActionRunStatus.vue` and `status.tmpl` 5. Adjust some css styles --------- Co-authored-by: silverwind <[email protected]>
silverwind · May 22, 2023 · da461b5 · da461b5
1 parent cdb088c
commit da461b5
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 54 deletions.
diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
@@ -80,6 +80,7 @@ milestones = Milestones
 ok = OK
 cancel = Cancel
 rerun = Re-run
+rerun_all = Re-run all jobs
 save = Save
 add = Add
 add_all = Add All

diff --git a/templates/repo/actions/status.tmpl b/templates/repo/actions/status.tmpl
@@ -1,5 +1,6 @@
 <!-- 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.
+	action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
 -->
 {{- $size := 16 -}}
 {{- if .size -}}
@@ -11,7 +12,7 @@
 {{- $className = .className -}}
 {{- end -}}
 
-<span data-tooltip-content="{{.locale.Tr (printf "actions.status.%s" .status)}}">
+<span class="gt-df gt-ac" data-tooltip-content="{{.locale.Tr (printf "actions.status.%s" .status)}}">
 {{if eq .status "success"}}
 	{{svg "octicon-check-circle-fill" $size (printf "text green %s" $className)}}
 {{else if eq .status "skipped"}}
@@ -22,7 +23,7 @@
 	{{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}}
+{{else if or (eq .status "failure") or (eq .status "cancelled") or (eq .status "unknown")}}
 	{{svg "octicon-x-circle-fill" $size (printf "text red %s" $className)}}
 {{end}}
 </span>
diff --git a/templates/repo/actions/view.tmpl b/templates/repo/actions/view.tmpl
@@ -9,6 +9,7 @@
 		data-locale-approve="{{.locale.Tr "repo.diff.review.approve"}}"
 		data-locale-cancel="{{.locale.Tr "cancel"}}"
 		data-locale-rerun="{{.locale.Tr "rerun"}}"
+		data-locale-rerun-all="{{.locale.Tr "rerun_all"}}"
 		data-locale-status-unknown="{{.locale.Tr "actions.status.unknown"}}"
 		data-locale-status-waiting="{{.locale.Tr "actions.status.waiting"}}"
 		data-locale-status-running="{{.locale.Tr "actions.status.running"}}"

diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -71,6 +71,7 @@
   /* console colors */
   --color-console-fg: #ffffff;
   --color-console-bg: #171717;
+  --color-console-hover-bg: #ffffff16;
   /* named colors */
   --color-red: #db2828;
   --color-orange: #f2711c;

diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue
@@ -1,14 +1,15 @@
 <!-- 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.
+    action status accepted: success, skipped, waiting, blocked, running, failure, cancelled, unknown
 -->
 <template>
-  <span :data-tooltip-content="localeStatus" v-if="status">
+  <span class="gt-df gt-ac" :data-tooltip-content="localeStatus" v-if="status">
     <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/>
+    <SvgIcon name="octicon-x-circle-fill" class="text red" :size="size" v-else-if="['failure', 'cancelled', 'unknown'].includes(status)" />
   </span>
 </template>