Use squared spinner for active pipelines (#4379)

web/src/components/layout/header/ActivePipelines.vue

@@ -1,58 +1,61 @@
 <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>
+  <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="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"
+      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"
     >
-      {{ activePipelines.length || 0 }}
+      <!-- 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';
 
 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>
-.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;
+@keyframes spinner-rotate {
+  100% {
+    transform: rotate(1turn);
+  }
 }
-.spinner .ring2 {
-  animation-delay: -0.3s;
+.spinner {
+  @apply absolute z-0 inset-1.5 rounded-md;
+  overflow: hidden;
 }
-.spinner .ring3 {
-  animation-delay: -0.15s;
+.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;
 }
-@keyframes spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
+.spinner::after {
+  @apply absolute inset-0.5 rounded-md bg-blend-darken bg-wp-primary-200 dark:bg-wp-primary-300;
+  content: '';
 }
 </style>