From ba2679d3d7a96e611420c48c384f01c976a15b82 Mon Sep 17 00:00:00 2001
From: Thierry Goettelmann <thierry@byscripts.info>
Date: Tue, 6 Sep 2022 10:04:22 +0200
Subject: [PATCH] feat(lite/component): Change style of active items in tree
 view (#6397)

---
 .../lite/src/components/infra/InfraHostItem.vue     |  2 +-
 .../lite/src/components/infra/InfraItemLabel.vue    | 13 ++++++++-----
 .../lite/src/components/infra/InfraPoolList.vue     |  2 +-
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
index e7011c226..bb3c35db2 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraHostItem.vue
@@ -1,7 +1,7 @@
 <template>
   <li v-if="host" class="infra-host-item">
     <InfraItemLabel
-      :current="isCurrentHost"
+      :active="isCurrentHost"
       :icon="faServer"
       :route="{ name: 'host.dashboard', params: { uuid: host.uuid } }"
     >
diff --git a/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue b/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue
index 514b6948a..495dcf89f 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue
@@ -1,7 +1,9 @@
 <template>
-  <RouterLink v-slot="{ isActive, href, navigate }" :to="route" custom>
+  <RouterLink v-slot="{ isExactActive, href, navigate }" :to="route" custom>
     <div
-      :class="{ current: isActive || $props.current }"
+      :class="
+        isExactActive ? 'exact-active' : $props.active ? 'active' : undefined
+      "
       class="infra-item-label"
       v-bind="$attrs"
     >
@@ -25,7 +27,7 @@ import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 defineProps<{
   icon: IconDefinition;
   route: RouteLocationRaw;
-  current?: boolean;
+  active?: boolean;
 }>();
 </script>
 
@@ -42,12 +44,13 @@ defineProps<{
     background-color: var(--background-color-secondary);
   }
 
-  &:active {
+  &:active,
+  &.active {
     color: var(--color-extra-blue-base);
     background-color: var(--background-color-primary);
   }
 
-  &.current {
+  &.exact-active {
     color: var(--color-blue-scale-100);
     background-color: var(--background-color-extra-blue);
 
diff --git a/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue b/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue
index 02ec985a9..f862bbba4 100644
--- a/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue
+++ b/@xen-orchestra/lite/src/components/infra/InfraPoolList.vue
@@ -5,7 +5,7 @@
       <InfraItemLabel
         :icon="faBuildings"
         :route="{ name: 'pool.dashboard', params: { uuid: pool.uuid } }"
-        current
+        active
       >
         {{ pool.name_label || '(Pool)' }}
       </InfraItemLabel>