more cartouche lisibility improvements: header lables hide on scroll #2325

src/components/contents/TerrainDeVie.vue

@@ -32,6 +32,7 @@ export default {
       infos_opened: false,
       chevronright_path: mdiChevronRight,
       chevrondown_path: mdiChevronDown,
+      mainscrolled: false,
     }
   },
   computed: {
@@ -53,6 +54,15 @@ export default {
     },
     display_concernement(){
       return this.ct_concernement && !this.entite && this.map_mode !== 'puissancedagir' && this.map_mode !== 'doleancer';
+    },
+    entity_title_label(){
+      let str;
+      if (this.concernement.entites_byid[this.eid].menacemaintien > 0) {
+        str = 'maintenu';
+      } else {
+        str = 'menacé'
+      }
+      return `Pouvez-vous nommer par qui ou par quoi cet élément est ${str} ?`;
     }
   },
   created () {
@@ -90,7 +100,14 @@ export default {
     } else {
       this.history_slider_ops = null;
     }
+
   },
+  // mounted(){
+  //   console.log('terrain de vie mounted', this);
+  //   // this.$refs.cartouche_main.addEventListener('scroll', (event) => {
+  //   //   console.log('main is scrolling', event);
+  //   // })
+  // },
   watch: {
     history_value: {
       handler (n, o) {
@@ -142,6 +159,9 @@ export default {
         .catch(error => {
           console.warn('Issue with load entite', error)
         })
+    },
+    onMainScrolled(scrolled){
+      this.mainscrolled = scrolled;
     }
   },
   components: {
@@ -155,12 +175,11 @@ export default {
 </script>
 
 <template>
-  <CartoucheLayout :cid="cid">
+  <CartoucheLayout :cid="cid" @main_scrolled="onMainScrolled">
     <template v-slot:header>
       <div class="entite">
         <!-- TODO update entite with revisions -->
-        <span v-if="entite && concernement.entites_byid[eid].menacemaintien < 0" class="menacemaintient">est menacé par</span>
-        <span v-if="entite && concernement.entites_byid[eid].menacemaintien > 0" class="menacemaintient">est maintenu par</span>
+        <label v-if="entite" class="menacemaintient" :class="{ hidden: mainscrolled}">{{ entity_title_label }}</label>
         <h3 v-if="entite" class="entite-title">{{ entite.title }}</h3>
       </div>
     </template>

src/components/layout/CartoucheLayout.vue

@@ -10,13 +10,23 @@ export default {
   props: ['cid'],
   data(){
     return {
-      headphones_path: mdiHeadphones
+      headphones_path: mdiHeadphones,
+      mainscrolled: false,
     }
   },
   created () {
     console.log('Cartouch layout created', this.cid);
     this.concernement = this.concernementsByID[this.cid];
   },
+  mounted () {
+    // console.log('cartouche layout mounted', this);
+    this.$refs.cartouche_main.addEventListener('scroll', (event) => {
+      // console.log('main is scrolling', event);
+      let $main = event.originalTarget;
+      let scrolled = this.mainscrolled = $main.scrollTop > 0;
+      this.$emit('main_scrolled', scrolled);
+    })
+  },
   computed: {
     ...mapState(ConcernementsStore,['concernementsByID', 'opened_concernement', 'ct_concernement']),
   },
@@ -41,9 +51,9 @@ export default {
 </script>
 
 <template>
-  <header>
+  <header ref="cartouche_header">
     <div class="concernement-cartouche-icons">
-      <label>{{ ct_concernement.title.description }}</label>
+      <label :class="{ hidden: mainscrolled }">{{ ct_concernement.title.description }}</label>
       <h2>{{ concernement.title }}</h2>
       <!-- <nav class="icons">
         <ul>
@@ -74,10 +84,10 @@ export default {
     </div>
     <slot name="header"></slot>
   </header>
-  <main>
+  <main ref="cartouche_main">
     <slot name="main"></slot>
   </main>
-  <footer>
+  <footer ref="cartouche_footer">
     <slot name="footer"></slot>
   </footer>
 </template>