mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-02 21:49:25 +00:00
66be4923d2
- updated all web/ dependencies - fixed icon positioning issue - changed text color of pipeline message - add hover underline effect to breadcrumb org name
61 lines
1.2 KiB
Vue
61 lines
1.2 KiB
Vue
<template>
|
|
<div
|
|
class="flex rounded-full w-8 h-8 bg-opacity-30 hover:bg-opacity-50 bg-white items-center justify-center cursor-pointer text-white"
|
|
:class="{
|
|
spinner: activeBuilds.length !== 0,
|
|
}"
|
|
@click="toggle"
|
|
>
|
|
<div class="spinner-ring ring1" />
|
|
<div class="spinner-ring ring2" />
|
|
<div class="spinner-ring ring3" />
|
|
<div class="spinner-ring ring4" />
|
|
{{ activeBuilds.length || 0 }}
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted } from 'vue';
|
|
|
|
import useBuildFeed from '~/compositions/useBuildFeed';
|
|
|
|
export default defineComponent({
|
|
name: 'ActiveBuilds',
|
|
|
|
setup() {
|
|
const buildFeed = useBuildFeed();
|
|
|
|
onMounted(() => {
|
|
buildFeed.load();
|
|
});
|
|
|
|
return buildFeed;
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.spinner .spinner-ring {
|
|
animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
border-color: #fff transparent transparent transparent;
|
|
@apply w-8 h-8 border-2 rounded-full m-4 absolute;
|
|
}
|
|
.spinner .ring1 {
|
|
animation-delay: -0.45s;
|
|
}
|
|
.spinner .ring2 {
|
|
animation-delay: -0.3s;
|
|
}
|
|
.spinner .ring3 {
|
|
animation-delay: -0.15s;
|
|
}
|
|
@keyframes spinner {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|