add LegendToggle component

src/components/globals/ButtonZoom.vue

@@ -36,8 +36,13 @@ export default {
 <style lang="scss" scoped>
 .btn-zoom {
   position: absolute;
-  top: 24px;
-  right: 24px;
+  top: 9px;
+  right: 9px;
+
+  @include media-breakpoint-up($size-bp) {
+    top: 24px;
+    right: 24px;
+  }
 }
 
 .btn-zoom-item {

src/components/globals/LegendToggle.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="legend-toggle">
+    <b-button
+      variant="dark"
+      class="btn-legend-toggle"
+      :class="visible ? null : 'collapsed'"
+      :aria-expanded="visible ? 'true' : 'false'"
+      aria-controls="collapse-legend-toggle"
+      @click="onBtnClick"
+    >
+      <span>?</span>
+    </b-button>
+
+    <b-collapse id="collapse-legend-toggle" v-model="visible">
+      <div class="collapse-body" ref="body">
+        <slot name="default" />
+      </div>
+    </b-collapse>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LegendToggle',
+
+  data () {
+    return {
+      visible: false
+    }
+  },
+
+  methods: {
+    onBtnClick () {
+      this.visible = !this.visible
+      if (this.visible) {
+        document.addEventListener('mousedown', this.onDocumentClick, { capture: true })
+      }
+    },
+
+    onDocumentClick (e) {
+      if (this.$refs.body.contains(e.target)) return
+      document.removeEventListener('mousedown', this.onDocumentClick, { capture: true })
+      if (!e.target.classList.contains('btn')) {
+        this.visible = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.legend-toggle {
+  position: absolute;
+  z-index: 1;
+  top: 15px;
+  left: 15px;
+
+  @include media-breakpoint-up($size-bp) {
+    top: 30px;
+    left: 30px;
+  }
+}
+
+.btn-legend-toggle {
+  display: block;
+  width: $btn-size;
+  height: $btn-size;
+  padding: 0;
+  border: 0;
+  font-weight: $font-weight-bold;
+  // font-size: 1.7rem;
+  line-height: 1;
+
+  margin-bottom: 10px;
+
+  span {
+    pointer-events: none;
+  }
+}
+
+.collapse {
+  transition: none;
+}
+
+.collapse-body {
+  max-width: 500px;
+  margin-right: 15px;
+  border: $line;
+  background-color: $white;
+  padding: $node-card-spacer-y $node-card-spacer-x;
+
+  @include media-breakpoint-up($size-bp) {
+    margin-right: 30px;
+  }
+}
+</style>

src/components/nodes/NodeView.vue

@@ -68,7 +68,8 @@ export default {
 
   data () {
     return {
-      scrollValue: 0
+      scrollValue: 0,
+      h: 0
     }
   },
 

src/pages/library/LibraryList.vue

@@ -1,6 +1,12 @@
 <template>
   <b-overlay :show="filteredNodes === undefined" class="h-100" z-index="0">
     <div class="library-list">
+      <legend-toggle>
+        <h6>Mode Alphabétique</h6>
+        <p>Ce mode vous permet de retrouver l'ensemble des textes de départ.</p>
+        <p>Pour naviguer plus rapidement vous pouvez <i>Aller à la lettre</i> dans le menu d'options.</p>
+      </legend-toggle>
+
       <div class="library-list-container" @click="onContainerClick">
         <div v-for="([char, nodes]) in filteredNodes" :key="char">
           <h3 :id="char">

src/pages/library/LibraryMap.vue

@@ -1,5 +1,11 @@
 <template>
   <b-overlay :show="nodes === undefined" class="h-100" z-index="0">
+    <legend-toggle>
+      <h6>Mode Aléatoire</h6>
+      <p>Ce mode vous propose 3 textes de départ tirés aléatoirement ainsi que leurs textes produits et leurs textes rebonds.</p>
+      <p>Pour tirer aléatoirement 3 nouveaux textes, cliquez sur <i>Mélanger</i> dans le menu d'options.</p>
+    </legend-toggle>
+
     <map-zoom
       id="library-map" ref="map"
       :min-zoom="0.2" :max-zoom="2" :initial-zoom="0.5"

src/pages/library/LibraryTree.vue

@@ -51,6 +51,17 @@
       </g>
     </map-zoom>
 
+    <legend-toggle>
+      <h6>Mode Arborescent</h6>
+      <p>Ce mode vous permet d'observer l'arbre des relations d'un texte de départ.</p>
+
+      Types de relation :
+      <ul>
+        <li><span class="children" /> Textes produits</li>
+        <li><span class="siblings" /> Textes rebonds</li>
+      </ul>
+    </legend-toggle>
+
     <node-preview-zone v-model="previewNode" :nodes="dataNodes" @open-node="onPreviewNodeClick" />
   </b-overlay>
 </template>
@@ -210,4 +221,30 @@ foreignObject {
     margin: 0;
   }
 }
+
+.legend-toggle {
+  ul {
+    list-style: none;
+    padding: 0;
+    margin-top: .5rem;
+
+    li {
+      font-style: italic;
+      margin-left: 1rem;
+    }
+  }
+
+  span {
+    display: inline-block;
+    height: 0px;
+    width: 15px;
+    margin-right: .5rem;
+  }
+  .children {
+    border-top: 3px dashed grey;
+  }
+  .siblings {
+    border-top: 3px solid grey;
+  }
+}
 </style>