better mode nav, from concernement & main menu
This commit is contained in:
parent
6197db37ee
commit
524b815d37
@ -4,7 +4,7 @@
|
||||
app (VueJs)
|
||||
|
||||
|
||||
part of https://figureslibres.io/gogs/bachir/docker-enfrancais
|
||||
part of https://figureslibres.io/gogs/bachir/docker-ouatterrir
|
||||
|
||||
.....
|
||||
|
||||
|
||||
@ -76,6 +76,11 @@ body{
|
||||
@include btn();
|
||||
display: block;
|
||||
line-height: 2.1;
|
||||
&.disabled{
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -108,22 +113,59 @@ body{
|
||||
|
||||
>header{
|
||||
display: flex;
|
||||
height: 8rem;
|
||||
// height: 8rem;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
label, h3{
|
||||
// height: 70px;
|
||||
box-sizing: border-box;
|
||||
// padding: 0 0 1em 0;
|
||||
// flex-grow: auto;
|
||||
div.pre-header{
|
||||
min-height: 10em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
label, h3{
|
||||
// height: 70px;
|
||||
box-sizing: border-box;
|
||||
// padding: 0 0 1em 0;
|
||||
// flex-grow: auto;
|
||||
}
|
||||
h3{
|
||||
font-weight: 400;
|
||||
font-size: 1.323em;
|
||||
}
|
||||
span.menacemaintient{
|
||||
display: block;
|
||||
font-weight: 100;
|
||||
font-size: 0.882em;
|
||||
padding: 1em 0 1em 0;
|
||||
}
|
||||
}
|
||||
h2{
|
||||
font-weight: 400;
|
||||
font-size: 1.512em;
|
||||
}
|
||||
h3{
|
||||
font-weight: 400;
|
||||
font-size: 1.2em;
|
||||
div.concernement-cartouche{
|
||||
h2{
|
||||
font-weight: 400;
|
||||
font-size: 1.323em;
|
||||
// &.faded{
|
||||
// font-weight: 100;
|
||||
// }
|
||||
}
|
||||
nav.icons{
|
||||
ul{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
li{
|
||||
margin: 0.4em 0.6em 0 0;
|
||||
>svg{
|
||||
display: inline-block;
|
||||
$d: 35px;
|
||||
width:$d; height:$d;
|
||||
border-radius: $d * 0.5;
|
||||
background-color: #fff;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
color: #333;
|
||||
// font-size: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
...mapState(ConcernementsStore,['map_mode']),
|
||||
...mapState(ConcernementsStore,['concernements']),
|
||||
...mapState(ConcernementsStore,['concernementsByID']),
|
||||
// ...mapState(ConcernementsStore,['opened_concernement']),
|
||||
...mapState(ConcernementsStore,['opened_concernement']),
|
||||
...mapState(CommonStore,['hover_elmt']),
|
||||
...mapState(CommonStore,['paper_symbol_definitions'])
|
||||
},
|
||||
@ -919,22 +919,51 @@ export default {
|
||||
<nav id="map-nav">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span> terrain de vie</a>
|
||||
<a
|
||||
href="#terraindevie" @click="setMapMode('terraindevie')"
|
||||
>
|
||||
<span class="icon terraindevie"></span> terrain de vie
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span> proximité</a>
|
||||
<a
|
||||
href="#proximite" @click="setMapMode('proximite')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_proximite }"
|
||||
>
|
||||
<span class="icon proximite"></span> proximité
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span> superposition</a>
|
||||
<a
|
||||
href="#superposition" @click="setMapMode('superposition')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_superposition }"
|
||||
>
|
||||
<span class="icon superposition"></span> superposition
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#puissancedagir" @click="setMapMode('puissancedagir')"><span class="icon puissancedagir"></span> puissance d'agir</a>
|
||||
<a
|
||||
href="#puissancedagir" @click="setMapMode('puissancedagir')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_puissancedagir }"
|
||||
>
|
||||
<span class="icon puissancedagir"></span> puissance d'agir
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#action" @click="setMapMode('action')"><span class="icon action"></span> action</a>
|
||||
<a
|
||||
href="#action" @click="setMapMode('action')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_agissantes }"
|
||||
>
|
||||
<span class="icon action"></span> action
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span> cercle politique</a>
|
||||
<a
|
||||
href="#doleancer" @click="setMapMode('doleancer')"
|
||||
:class="{ disabled: opened_concernement && !opened_concernement.has_doleance }"
|
||||
>
|
||||
<span class="icon doleancer"></span> cercle politique
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@ -10,13 +10,17 @@ import gql from 'graphql-tag'
|
||||
import GQL from '@api/graphql-axios'
|
||||
import EntiteFields from '@api/gql/entite.fragment.gql'
|
||||
|
||||
import SvgIcon from '@jamescoyle/vue-icon';
|
||||
import { mdiHeadphones } from '@mdi/js';
|
||||
|
||||
|
||||
export default {
|
||||
props: ['id', 'eid'],
|
||||
data(){
|
||||
return {
|
||||
entite: null,
|
||||
opened_besoin_id: null
|
||||
opened_besoin_id: null,
|
||||
headphones_path: mdiHeadphones
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -32,7 +36,10 @@ export default {
|
||||
...mapState(ConcernementsStore,['p_reception_et_traitement']),
|
||||
...mapState(ConcernementsStore,['p_mise_en_oeuvre_decision']),
|
||||
...mapState(ConcernementsStore,['p_reception_application_decision']),
|
||||
...mapState(CommonStore,['hover_elmt'])
|
||||
...mapState(CommonStore,['hover_elmt']),
|
||||
display_concernement(){
|
||||
return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir'&& this.map_mode !== 'doleancer';
|
||||
}
|
||||
},
|
||||
created () {
|
||||
console.log(`Concernement view created, id: ${this.id}, eid: ${this.eid}, opened_concernement:${this.opened_concernement}`);
|
||||
@ -70,6 +77,7 @@ export default {
|
||||
methods: {
|
||||
...mapActions(ConcernementsStore,['openCloseConcernements']),
|
||||
...mapActions(ConcernementsStore,['setOpenedEntityId']),
|
||||
...mapActions(ConcernementsStore,['setMapMode']),
|
||||
openEntity(){
|
||||
this.setOpenedEntityId(parseInt(this.eid))
|
||||
this.loadEntite()
|
||||
@ -101,6 +109,7 @@ export default {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SvgIcon
|
||||
}
|
||||
}
|
||||
|
||||
@ -109,15 +118,47 @@ export default {
|
||||
<template>
|
||||
<section v-if="opened_concernement" class="concernement">
|
||||
<header v-if="concernements_loaded">
|
||||
<label
|
||||
v-if="ct_concernement && !entite && map_mode !== 'puissancedagir'&& map_mode !== 'doleancer'"
|
||||
<div class="pre-header">
|
||||
<!-- concernement -->
|
||||
<label
|
||||
v-if="display_concernement"
|
||||
>
|
||||
{{ ct_concernement.title.description }}
|
||||
</label>
|
||||
<h3 v-if="entite">{{ entite.title }}</h3>
|
||||
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0">menace</span>
|
||||
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0">maintient</span>
|
||||
<h2>{{ opened_concernement.title }}</h2>
|
||||
<!-- entite -->
|
||||
<h3 v-if="entite">{{ entite.title }}</h3>
|
||||
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">menace</span>
|
||||
<span v-if="entite && opened_concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">maintient</span>
|
||||
</div>
|
||||
<div class="concernement-cartouche">
|
||||
<h2 :class='{ faded: !display_concernement}'>{{ opened_concernement.title }}</h2>
|
||||
<nav class="icons">
|
||||
<ul>
|
||||
<li v-if="opened_concernement.has_recit" >
|
||||
<svg-icon type="mdi" :path="headphones_path"></svg-icon>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#terraindevie" @click="setMapMode('terraindevie')"><span class="icon terraindevie"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_puissancedagir" >
|
||||
<a href="#puissanceagir" @click="setMapMode('puissanceagit')"><span class="icon puissancedagir"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_proximite" >
|
||||
<a href="#proximite" @click="setMapMode('proximite')"><span class="icon proximite"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_superposition" >
|
||||
<a href="#superposition" @click="setMapMode('superposition')"><span class="icon superposition"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_agissantes" >
|
||||
<a href="#action" @click="setMapMode('action')"><span class="icon action"></span></a>
|
||||
</li>
|
||||
<li v-if="opened_concernement.has_doleance" >
|
||||
<a href="#doleancer" @click="setMapMode('doleancer')"><span class="icon doleancer"></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
<!-- concernement -->
|
||||
<section
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user