mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-05-19 08:48:08 +00:00
57ed64e1ea
- Improved padding - Grouped links together on the left and icons on the right - Updated navbar link hover effect - Moved account icon to the rightmost place (as in almost every other application) - Rounded account icon to make it consistent with rest of the icon buttons Co-authored-by: Divya Jain <dvjn.dev+git@gmail.com>
62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
<template>
|
|
<button
|
|
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 select-none"
|
|
:class="{
|
|
spinner: activeBuilds.length !== 0,
|
|
}"
|
|
type="button"
|
|
@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 }}
|
|
</button>
|
|
</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>
|