From 7fb5244d1c930955480d319ec99f2626946ea51c Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Fri, 6 Oct 2023 11:15:21 +0200
Subject: [PATCH] highlighted icons on mapnav active item #2244

---
 src/assets/common.scss              |  5 +++--
 src/assets/main.scss                | 10 +++++++++-
 src/components/MapConcernements.vue | 23 ++++++++++++-----------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/assets/common.scss b/src/assets/common.scss
index 9e792b4..57fe787 100644
--- a/src/assets/common.scss
+++ b/src/assets/common.scss
@@ -11,12 +11,13 @@ $pad_btn: 0.5em;
 
 span.icon{
   background-repeat: no-repeat;
-  background-position: middle center;
-  background-size: contain;
+  background-position: center;
+  background-size: 85%;
   display: inline-block;
   vertical-align:bottom;
   width: 1.5em;
   height:1.5em;
+  border-radius: 0.75em;
   &.terraindevie{
     background-image: url('./icons/terraindevie.svg');
   }
diff --git a/src/assets/main.scss b/src/assets/main.scss
index 80fd726..1893e92 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -100,7 +100,14 @@ body{
         a{
           @include btn();
           display: block;
-          line-height: 2.1;
+          // line-height: 2.1;
+          line-height: 1.7;
+          &.active{
+            // color: red;
+            span.icon{
+              background-color: rgba(255, 255, 255, 0.6);
+            }
+          }
           &.disabled{
             pointer-events: none;
             opacity: 0.4;
@@ -123,6 +130,7 @@ body{
       }
     }
   }
+
   $cartouch_width : 450px;
   #content{
     display: flex;
diff --git a/src/components/MapConcernements.vue b/src/components/MapConcernements.vue
index f9569dc..f87f7d8 100644
--- a/src/components/MapConcernements.vue
+++ b/src/components/MapConcernements.vue
@@ -1308,48 +1308,49 @@ export default {
       <li>
         <a 
           title="terrain de vie" href="#terraindevie" @click="setMapMode('terraindevie')"
+          :class="{active: map_mode === 'terraindevie'}"
         >
-          <span class="icon terraindevie"></span> <span class="label"> terrain de vie</span>
+          <span class="icon terraindevie"/> <span class="label"> terrain de vie</span>
         </a>
       </li>
       <li>
         <a 
           title="proximite" href="#proximite" @click="setMapMode('proximite')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_proximite }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_proximite, active: map_mode === 'proximité'}"
         >
-          <span class="icon proximite"></span> <span class="label"> proximité</span>
+          <span class="icon proximite"/> <span class="label"> proximité</span>
         </a>
       </li>
       <li>
         <a 
           title="superposition" href="#superposition" @click="setMapMode('superposition')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_superpositions }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_superpositions, active: map_mode === 'superposition'}"
         >
-          <span class="icon superposition"></span> <span class="label"> superposition</span>
+          <span class="icon superposition"/> <span class="label"> superposition</span>
         </a>
       </li>
       <li>
         <a 
           title="puissance d'agir" href="#puissancedagir" @click="setMapMode('puissancedagir')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir, active: map_mode === 'puissancedagir'}"
         >
-          <span class="icon puissancedagir"></span> <span class="label"> puissance d'agir</span>
+          <span class="icon puissancedagir"/> <span class="label"> puissance d'agir</span>
         </a>
       </li>
       <li>
         <a 
           title="action" href="#action" @click="setMapMode('action')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_agissantes, active: map_mode === 'action'}"
         >
-          <span class="icon action"></span> <span class="label"> action</span>
+          <span class="icon action"/> <span class="label"> action</span>
         </a>
       </li>
       <li>
         <a 
           title="cercle politique" href="#doleancer" @click="setMapMode('doleancer')"
-          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance }"
+          :class="{ disabled: opened_concernement && !opened_concernement.has_doleance, active: map_mode === 'doleancer'}"
         >
-          <span class="icon doleancer"></span> <span class="label"> cercle politique</span>
+          <span class="icon doleancer"/> <span class="label"> cercle politique</span>
         </a>
       </li>
     </ul>