mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-06-12 18:39:33 +00:00
58838f225c
Rewrite of the UI using Typescript, Vue3, Windicss and Vite. The design should be close to the current one with some changes: - latest pipeline in a sidebar on the right - secrets and registry as part of the repo-settings (secrets and registry entries shouldn't be used as much so they can be "hidden" under settings IMO) - start page shows list of active repositories with button to enable / add new ones (currently you see all repositories and in most cases you only add new repositories once in a while)
73 lines
1.3 KiB
Vue
73 lines
1.3 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>
|