mirror of
https://github.com/go-gitea/gitea
synced 2024-08-20 17:24:51 +02:00
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>
This commit is contained in:
parent
5fcf328a8d
commit
5e7543fcf4
|
@ -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">
|
||||
|
|
|
@ -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}}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue