add LegendToggle component

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>