mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2025-10-22 01:58:19 +00:00
67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<template>
|
|
<IconButton
|
|
:title="pipelineCount > 0 ? `${$t('pipeline_feed')} (${pipelineCount})` : $t('pipeline_feed')"
|
|
class="!p-1.5 relative text-current active-pipelines-toggle"
|
|
@click="toggle"
|
|
>
|
|
<div v-if="pipelineCount > 0" class="spinner" />
|
|
<div
|
|
class="z-0 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 { computed, onMounted, toRef } from 'vue';
|
|
|
|
import IconButton from '~/components/atomic/IconButton.vue';
|
|
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();
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes rotate {
|
|
100% {
|
|
transform: rotate(1turn);
|
|
}
|
|
}
|
|
.spinner {
|
|
@apply absolute inset-1.5 rounded-md;
|
|
overflow: hidden;
|
|
}
|
|
.spinner::before {
|
|
@apply absolute 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, #fff);
|
|
animation: rotate 1.5s linear infinite;
|
|
}
|
|
.spinner::after {
|
|
@apply absolute inset-0.5 bg-wp-primary-200 dark:bg-wp-primary-300;
|
|
/*
|
|
The nested border radius needs to be calculated correctly to look right:
|
|
https://www.30secondsofcode.org/css/s/nested-border-radius/
|
|
*/
|
|
border-radius: calc(0.375rem - 0.125rem);
|
|
content: '';
|
|
}
|
|
</style>
|