mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2025-10-22 07:25:08 +00:00
ed7ecb060e
Some improvements to the navbar icons. Changes Implemented: - Increase touch target size for navbar icons. - Make icon colors and hover effect consistent with navbar links - Added title for all navbar icons - New key (user.settings) in locales - Updated Dark and Light Mode values in locales - Minor tweaks in active builds indicator - New component NavbarIcon (because trying to match IconButton size and colors felt hacky at best) Co-authored-by: Divya Jain <dvjn.dev+git@gmail.com>
68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<NavbarIcon :title="$t('repo.pipeline.tasks')" class="!p-1.5 relative" @click="toggle">
|
|
<div v-if="activePipelines.length > 0" class="spinner">
|
|
<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-full"
|
|
>
|
|
{{ activePipelines.length || 0 }}
|
|
</div>
|
|
</NavbarIcon>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted } from 'vue';
|
|
|
|
import usePipelineFeed from '~/compositions/usePipelineFeed';
|
|
|
|
import NavbarIcon from './NavbarIcon.vue';
|
|
|
|
export default defineComponent({
|
|
name: 'ActivePipelines',
|
|
|
|
components: { NavbarIcon },
|
|
|
|
setup() {
|
|
const pipelineFeed = usePipelineFeed();
|
|
|
|
onMounted(() => {
|
|
pipelineFeed.load();
|
|
});
|
|
|
|
return pipelineFeed;
|
|
},
|
|
});
|
|
</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);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|