mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-11-24 18:56:11 +01:00
5e7543fcf4
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>
34 lines
1.2 KiB
Vue
34 lines
1.2 KiB
Vue
<!-- 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="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>
|
|
import {SvgIcon} from '../svg.js';
|
|
|
|
export default {
|
|
components: {SvgIcon},
|
|
props: {
|
|
status: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 16
|
|
},
|
|
className: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
};
|
|
</script>
|