add icon to transverse tab

DISIC · Sep 6, 2024 · 206e32c · 206e32c
1 parent b796eb3
commit 206e32c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/confiture-web-app/src/components/audit/AraTabs.vue b/confiture-web-app/src/components/audit/AraTabs.vue
@@ -8,9 +8,10 @@
 import { ref, watch } from "vue";
 
 import { useUniqueId } from "../../composables/useUniqueId";
+import LayoutIcon from "../icons/LayoutIcon.vue";
 
 const props = defineProps<{
-  tabs: { label: string; data: T; icon?: string }[];
+  tabs: { label: string; data: T; isTransverse?: boolean }[];
   stickyTop: string;
 }>();
 
@@ -74,18 +75,13 @@ watch(currentTab, (currentTab) => {
           :aria-controls="panelId(i)"
           :aria-selected="i === currentTab ? 'true' : 'false'"
           :tabindex="i === currentTab ? undefined : '-1'"
-          :class="{
-            'fr-tabs__tab--icon-left': !!tab.icon,
-            ...(!!tab.icon && {
-              [`fr-icon-${tab.icon}`]: !!tab.icon
-            })
-          }"
           @click="currentTab = i"
           @keydown.right.down.prevent="selectNextTab"
           @keydown.left.up.prevent="selectPreviousTab"
           @keydown.home.prevent="selectFirstTab"
           @keydown.end.prevent="selectLastTab"
         >
+          <LayoutIcon v-if="tab.isTransverse" class="fr-mr-2v" />
           {{ tab.label }}
         </button>
       </li>

diff --git a/confiture-web-app/src/components/icons/LayoutIcon.vue b/confiture-web-app/src/components/icons/LayoutIcon.vue
@@ -0,0 +1,21 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clip-path="url(#clip0_5693_190138)">
+      <path
+        d="M1.99967 14C1.82286 14 1.65329 13.9298 1.52827 13.8047C1.40325 13.6797 1.33301 13.5101 1.33301 13.3333V2.66667C1.33301 2.48986 1.40325 2.32029 1.52827 2.19526C1.65329 2.07024 1.82286 2 1.99967 2H13.9997C14.1765 2 14.3461 2.07024 14.4711 2.19526C14.5961 2.32029 14.6663 2.48986 14.6663 2.66667V13.3333C14.6663 13.5101 14.5961 13.6797 14.4711 13.8047C14.3461 13.9298 14.1765 14 13.9997 14H1.99967ZM4.66634 6.66667H2.66634V12.6667H4.66634V6.66667ZM13.333 6.66667H5.99967V12.6667H13.333V6.66667ZM13.333 3.33333H2.66634V5.33333H13.333V3.33333Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_5693_190138">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+</template>
diff --git a/confiture-web-app/src/pages/audit/AuditGenerationPage.vue b/confiture-web-app/src/pages/audit/AuditGenerationPage.vue
@@ -208,7 +208,7 @@ const tabsData = computed((): TabData[] => {
     auditStore.currentAudit?.pages.map((p) => ({
       label: p.name,
       data: p,
-      icon: p.id === -1 ? "arrow-right-s-line-double" : null
+      isTransverse: p.id === -1
     })) ?? [],
     (p) => p.data.order
   );