diff options
| author | Hester Gong <hestergong@gmail.com> | 2023-04-19 13:42:53 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-04-19 13:42:53 +0800 |
| commit | 5e7543fcf441afb30aba6188edac754ef32b9ac3 (patch) | |
| tree | cf86d64e7c2adcada59c24d2465df766d8bf9f98 /web_src/js/components/ActionRunStatus.vue | |
| parent | 5fcf328a8d825102a77cfc79b53ce7948d41bf33 (diff) | |
| download | gitea-5e7543fcf441afb30aba6188edac754ef32b9ac3.tar.gz gitea-5e7543fcf441afb30aba6188edac754ef32b9ac3.zip | |
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>
Diffstat (limited to 'web_src/js/components/ActionRunStatus.vue')
| -rw-r--r-- | web_src/js/components/ActionRunStatus.vue | 15 |
1 files changed, 9 insertions, 6 deletions
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> |