From 753745d6a3993dcb2dda7352736661227000a871 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Mon, 29 Jan 2024 17:39:54 +0100
Subject: [PATCH] add transition to loader & custom color to multiselect tags

---
 .../FeaturesListAndMapFilters.vue             | 10 +++++
 src/views/Project/FeaturesListAndMap.vue      | 40 ++++++++++++++-----
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue
index 2fc77496..de17614d 100644
--- a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue
+++ b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue
@@ -469,4 +469,14 @@ export default {
 #form-filters .multiselect__tags {
   white-space: normal !important;
 }
+#form-filters .multiselect__tag {
+  background: var(--primary-color, #008c86) !important;
+}
+#form-filters .multiselect__tag-icon:focus, #form-filters .multiselect__tag-icon:hover{
+  background: var(--primary-highlight-color, #006f6a) !important;
+}
+#form-filters .multiselect__tag-icon:not(:hover)::after {
+  color: var(--primary-highlight-color, #006f6a);
+  filter: brightness(0.6);
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Project/FeaturesListAndMap.vue b/src/views/Project/FeaturesListAndMap.vue
index c624ea7e..a6fc7e4b 100644
--- a/src/views/Project/FeaturesListAndMap.vue
+++ b/src/views/Project/FeaturesListAndMap.vue
@@ -57,11 +57,10 @@
           @update:page="handlePageChange"
           @update:sort="handleSortChange"
         />
-        <Transition name="ease">
+        <Transition name="fadeIn">
           <div
             v-if="loading"
-            :class="{ active: loading }"
-            class="ui inverted dimmer"
+            class="ui inverted dimmer active"
           >
             <div class="ui text loader">
               Récupération des signalements en cours...
@@ -540,7 +539,11 @@ export default {
 <style lang="less" scoped>
 .loader-container {
   position: relative;
+  min-height: 250px; // keep a the spinner above result and below table header
   z-index: 1;
+  .ui.inverted.dimmer.active {
+    opacity: .6;
+  }
 }
 .map-container {
   width: 80vw;
@@ -590,19 +593,36 @@ div.geolocation-container {
   }
 }
 
-.ease-enter-active {
-  animation: ease-in 0.5s;
+.fadeIn-enter-active {
+  animation: fadeIn .5s;
+}
+.fadeIn-leave-active {
+  animation: fadeIn .5s reverse;
+}
+.transition.fade.in {
+  -webkit-animation-name: fadeIn;
+  animation-name: fadeIn
 }
-.ease-leave-active {
-  animation: ease-in 0.5s reverse;
+
+@-webkit-keyframes fadeIn {
+  0% {
+    opacity: 0
+  }
+
+  100% {
+    opacity: .9
+  }
 }
-@keyframes ease-in {
+
+@keyframes fadeIn {
   0% {
-    opacity: 0;
+    opacity: 0
   }
+
   100% {
-    opacity: 1;
+    opacity: .9
   }
 }
+
 </style>
 
-- 
GitLab