fixed puissance agir mouse hover map items

This commit is contained in:
Bachir Soussi Chiadmi 2023-07-06 21:39:25 +02:00
parent 04eb79af8b
commit 19e61bbcd7
2 changed files with 43 additions and 11 deletions

View File

@ -219,10 +219,6 @@ body{
padding-right: 0.2em; padding-right: 0.2em;
} }
label.mdi:hover:before,
label.mdi.hover:before{
color:#01ffe2;
}
svg.open-btn{ svg.open-btn{
position: absolute; position: absolute;
right:0; top:0; right:0; top:0;
@ -233,6 +229,14 @@ body{
>label{ >label{
padding:0.3em 0 0.5em 0; padding:0.3em 0 0.5em 0;
cursor: pointer; cursor: pointer;
svg{
width:0.7em; height:0.7em;
}
&.hover{
svg{
color:#01ffe2;
}
}
} }
h4.besoin-description{ h4.besoin-description{
font-weight: 400; font-weight: 400;
@ -251,6 +255,14 @@ body{
} }
>label{ >label{
padding:0 0 0.5em 0; padding:0 0 0.5em 0;
svg{
width:0.7em;height:0.7em;
}
&.hover{
svg{
color:#01ffe2;
}
}
} }
section{ section{
&:not(:last-of-type){ &:not(:last-of-type){

View File

@ -12,6 +12,8 @@ import { mdiChevronRight } from '@mdi/js';
import { mdiChevronDown } from '@mdi/js'; import { mdiChevronDown } from '@mdi/js';
import { mdiPencilPlus } from '@mdi/js'; import { mdiPencilPlus } from '@mdi/js';
import { mdiPencilPlusOutline } from '@mdi/js'; import { mdiPencilPlusOutline } from '@mdi/js';
import { mdiRhombus } from '@mdi/js';
import { mdiRhombusOutline } from '@mdi/js';
export default { export default {
@ -22,14 +24,18 @@ export default {
chevronright_path: mdiChevronRight, chevronright_path: mdiChevronRight,
chevrondown_path: mdiChevronDown, chevrondown_path: mdiChevronDown,
pencilplus_path: mdiPencilPlus, pencilplus_path: mdiPencilPlus,
pencilplusoutline_path: mdiPencilPlusOutline pencilplusoutline_path: mdiPencilPlusOutline,
rhombus_path: mdiRhombus,
rhombusoutline_path: mdiRhombusOutline
} }
}, },
computed: { computed: {
...mapState(UserStore,['isloggedin']), ...mapState(UserStore,['isloggedin']),
...mapState(ConcernementsStore,['opened_concernement']), ...mapState(ConcernementsStore,['opened_concernement',
...mapState(ConcernementsStore,['ct_concernement']), 'ct_concernement',
...mapState(ConcernementsStore,['ct_entite']), 'ct_entite'
]),
...mapState(CommonStore,['hover_elmt'])
}, },
created () { created () {
console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement); console.log(`puissance d'agir content created, id: ${this.id}, opened_concernement:`,this.opened_concernement);
@ -77,10 +83,15 @@ export default {
></svg-icon> ></svg-icon>
<header> <header>
<label <label
class="mdi mdi-rhombus" :class="{ 'hover': hover_elmt
:class="{ hover: hover_elmt && hover_elmt.type === 'besoin' && (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }" && (hover_elmt.type === 'besoin' || hover_elmt.type === 'reponse')
&& (hover_elmt.id === besoin.id || hover_elmt.bid === besoin.id) }"
@click="onClickBesoin(besoin.id)" @click="onClickBesoin(besoin.id)"
> >
<svg-icon
type="mdi"
:path="rhombus_path"
/>
Besoin de l'enqueteur Besoin de l'enqueteur
</label> </label>
<h4 class="besoin-description" v-html="besoin.description"/> <h4 class="besoin-description" v-html="besoin.description"/>
@ -92,7 +103,16 @@ export default {
class="reponse" class="reponse"
:id="reponse.id" :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"> <section v-if="reponse.qui">
<label for="reponse-qui">Qui</label> <label for="reponse-qui">Qui</label>
<p name="reponse-qui" v-html="reponse.qui" /> <p name="reponse-qui" v-html="reponse.qui" />