From 19e61bbcd762c6ea1917a384a39129dd6183d954 Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Thu, 6 Jul 2023 21:39:25 +0200
Subject: [PATCH] fixed puissance agir mouse hover map items

---
 src/assets/main.scss                      | 20 ++++++++++---
 src/components/contents/PuissanceAgir.vue | 34 ++++++++++++++++++-----
 2 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/assets/main.scss b/src/assets/main.scss
index f44379a..3682eaf 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -219,10 +219,6 @@ body{
               padding-right: 0.2em;
 
             }
-            label.mdi:hover:before,
-            label.mdi.hover:before{
-              color:#01ffe2;
-            }
             svg.open-btn{
               position: absolute;
               right:0; top:0;
@@ -233,6 +229,14 @@ body{
               >label{
                 padding:0.3em 0 0.5em 0;
                 cursor: pointer;
+                svg{
+                  width:0.7em; height:0.7em;
+                }
+                &.hover{
+                  svg{
+                    color:#01ffe2;
+                  }
+                }
               }
               h4.besoin-description{
                 font-weight: 400;
@@ -251,6 +255,14 @@ body{
                 } 
                 >label{
                   padding:0 0 0.5em 0;
+                  svg{
+                    width:0.7em;height:0.7em;
+                  }
+                  &.hover{
+                    svg{
+                      color:#01ffe2;
+                    }
+                  }
                 }
                 section{
                   &:not(:last-of-type){
diff --git a/src/components/contents/PuissanceAgir.vue b/src/components/contents/PuissanceAgir.vue
index 793fa3f..31f2529 100644
--- a/src/components/contents/PuissanceAgir.vue
+++ b/src/components/contents/PuissanceAgir.vue
@@ -12,6 +12,8 @@ import { mdiChevronRight } from '@mdi/js';
 import { mdiChevronDown } from '@mdi/js';
 import { mdiPencilPlus } from '@mdi/js';
 import { mdiPencilPlusOutline } from '@mdi/js';
+import { mdiRhombus } from '@mdi/js';
+import { mdiRhombusOutline } from '@mdi/js';
 
 
 export default {
@@ -22,14 +24,18 @@ export default {
       chevronright_path: mdiChevronRight,
       chevrondown_path: mdiChevronDown,
       pencilplus_path: mdiPencilPlus,
-      pencilplusoutline_path: mdiPencilPlusOutline
+      pencilplusoutline_path: mdiPencilPlusOutline,
+      rhombus_path: mdiRhombus,
+      rhombusoutline_path: mdiRhombusOutline
     }
   },
   computed: {
     ...mapState(UserStore,['isloggedin']),
-    ...mapState(ConcernementsStore,['opened_concernement']),
-    ...mapState(ConcernementsStore,['ct_concernement']),
-    ...mapState(ConcernementsStore,['ct_entite']),
+    ...mapState(ConcernementsStore,['opened_concernement',
+                                    'ct_concernement',
+                                    'ct_entite'
+                                  ]),
+    ...mapState(CommonStore,['hover_elmt'])
   },
   created () {
     console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
@@ -77,10 +83,15 @@ export default {
             ></svg-icon>
           <header>
             <label 
-              class="mdi mdi-rhombus"
-              :class="{ hover: hover_elmt && hover_elmt.type === 'besoin' && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
+              :class="{ 'hover': hover_elmt 
+                              && (hover_elmt.type === 'besoin' || hover_elmt.type === 'reponse') 
+                              && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
               @click="onClickBesoin(besoin.id)"
               >
+              <svg-icon
+                type="mdi" 
+                :path="rhombus_path"
+                 />
                 Besoin de l'enqueteur
             </label>
             <h4 class="besoin-description" v-html="besoin.description"/>
@@ -92,7 +103,16 @@ export default {
               class="reponse"
               :id="reponse.id"
             >
-              <label class="mdi mdi-rhombus-outline">Ressource</label>
+              <label 
+              :class="{ 'hover': hover_elmt 
+                              && hover_elmt.type === 'reponse' 
+                              && hover_elmt.id === reponse.id }"
+                >
+                <svg-icon
+                type="mdi" 
+                :path="hover_elmt && hover_elmt.type === 'reponse' && hover_elmt.id === reponse.id ? rhombus_path : rhombusoutline_path"
+                 />
+                Ressource</label>
               <section v-if="reponse.qui">
                 <label for="reponse-qui">Qui</label>
                 <p name="reponse-qui" v-html="reponse.qui" />