mirrors/woodpecker
1
0
Fork 0
mirror of https://github.com/woodpecker-ci/woodpecker.git synced 2024-11-25 11:21:02 +00:00
Code Issues Projects Releases Wiki Activity

Use squared spinner for active pipelines (#4379)

Browse source
This commit is contained in:
Robert Kaussow 2024-11-15 00:55:29 +01:00 committed by GitHub
parent 5699d22a55
commit 75017ac7ca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 35 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
web/src/components/layout/header/ActivePipelines.vue
View file

@ -1,21 +1,21 @@
<template>
<IconButton :title="$t('pipeline_feed')" class="!p-1.5 relative text-current active-pipelines-toggle" @click="toggle">
<div v-if="activePipelines.length > 0" class="spinner m-1">
<div class="spinner-ring ring1" />
<div class="spinner-ring ring2" />
<div class="spinner-ring ring3" />
<div class="spinner-ring ring4" />
</div>
<div
class="flex items-center justify-center h-full w-full font-bold bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-10 rounded-md"
<IconButton
:title="pipelineCount > 0 ? `${$t('pipeline_feed')} (${pipelineCount})` : $t('pipeline_feed')"
class="!p-1.5 relative text-current active-pipelines-toggle"
@click="toggle"
>
{{ activePipelines.length || 0 }}
<div v-if="pipelineCount > 0" class="spinner" />
<div
class="z-1 flex items-center justify-center h-full w-full font-bold bg-white bg-opacity-15 dark:bg-black dark:bg-opacity-10 rounded-md"
>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-raw-text -->
{{ pipelineCount > 9 ? '9+' : pipelineCount }}
</div>
</IconButton>
</template>
<script lang="ts" setup>
import { onMounted, toRef } from 'vue';
import { computed, onMounted, toRef } from 'vue';
import IconButton from '~/components/atomic/IconButton.vue';
import usePipelineFeed from '~/compositions/usePipelineFeed';
@ -23,6 +23,7 @@ import usePipelineFeed from '~/compositions/usePipelineFeed';
const pipelineFeed = usePipelineFeed();
const activePipelines = toRef(pipelineFeed, 'activePipelines');
const { toggle } = pipelineFeed;
const pipelineCount = computed(() => activePipelines.value.length || 0);
onMounted(async () => {
await pipelineFeed.load();
@ -30,29 +31,31 @@ onMounted(async () => {
</script>
<style scoped>
.spinner {
@apply absolute top-0 bottom-0 left-0 right-0;
}
.spinner .spinner-ring {
animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #fff transparent transparent transparent;
@apply border-3 rounded-full absolute top-1.5 bottom-1.5 left-1.5 right-1.5;
}
.spinner .ring1 {
animation-delay: -0.45s;
}
.spinner .ring2 {
animation-delay: -0.3s;
}
.spinner .ring3 {
animation-delay: -0.15s;
}
@keyframes spinner {
0% {
transform: rotate(0deg);
}
@keyframes spinner-rotate {
100% {
transform: rotate(360deg);
transform: rotate(1turn);
}
}
.spinner {
@apply absolute z-0 inset-1.5 rounded-md;
overflow: hidden;
}
.spinner::before {
@apply absolute -z-2 bg-wp-primary-200 dark:bg-wp-primary-300;
content: '';
left: -50%;
top: -50%;
width: 200%;
height: 200%;
background-repeat: no-repeat;
background-size:
50% 50%,
50% 50%;
background-image: linear-gradient(#fff, transparent);
animation: spinner-rotate 1.5s linear infinite;
}
.spinner::after {
@apply absolute inset-0.5 rounded-md bg-blend-darken bg-wp-primary-200 dark:bg-wp-primary-300;
content: '';
}
</style>