update text depart select

src/assets/scss/abstracts/_variables.scss

@@ -121,6 +121,9 @@ $input-btn-border-width: 2px;
 
 // Dropdowns
 $dropdown-border-color: $border-color;
+$dropdown-link-hover-bg: #efebe9;
+$dropdown-link-active-color: $white;
+$dropdown-link-active-bg: $dark;
 
 // Cards
 $card-spacer-y: .75rem;

src/pages/library/LibraryOptions.vue

@@ -87,17 +87,16 @@
     <search-input v-if="mode !== 'tree'" v-model="activeSearch" />
 
     <!-- TREE ONLY -->
-    <b-form-group
-      v-else
-      label="Texte de départ :"
-      label-for="text-depart-select"
-    >
-      <b-form-select
-        id="text-depart-select"
-        v-model="activeNodeId"
-        :options="nodesDepartsOptions"
-        class="border"
-      />
+    <b-form-group v-else id="depart-group" :label="$t('variants.depart')">
+      <b-dropdown id="text-depart-select" variant="outline-dark" right>
+        <template #button-content>
+          <node-view-title :node="activeNode" />
+        </template>
+
+        <b-dropdown-item v-for="node in nodesDeparts" :key="node.id" @click="activeNodeId = node.id">
+          <node-view-title :node="node" block />
+        </b-dropdown-item>
+      </b-dropdown>
     </b-form-group>
   </div>
 </template>
@@ -106,11 +105,14 @@
 import { mapGetters } from 'vuex'
 
 import { MultipleTagsSelect, SearchInput } from '@/components/formItems'
+import { NodeViewTitle } from '@/components/nodes'
+
 
 export default {
   name: 'LibraryOptions',
 
   components: {
+    NodeViewTitle,
     MultipleTagsSelect,
     SearchInput
   },
@@ -131,6 +133,8 @@ export default {
   computed: {
     ...mapGetters([
       'nodesDepartsOptions',
+      'nodesDeparts',
+      'node',
       'orderedTextsDepart',
       'tagsOptions',
       'nodebook',
@@ -153,6 +157,10 @@ export default {
       }
     },
 
+    activeNode () {
+      return this.node(this.nodeDepartId)
+    },
+
     activeMode: {
       get () { return this.mode },
       set (value) {
@@ -317,5 +325,55 @@ export default {
       }
     }
   }
+
+  #depart-group {
+    width: 100%;
+
+    @include media-breakpoint-up($size-bp) {
+      max-width: 50%;
+    }
+  }
+
+  #text-depart-select ::v-deep {
+    width: 100%;
+
+    .dropdown-menu {
+      max-height: 300px;
+      min-width: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      margin-left: 0;
+    }
+
+    .dropdown-toggle {
+      border-radius: 0 !important;
+      width: 100%;
+      padding-right: 1rem;
+      padding-top: .15em;
+
+      .node-view-title {
+        width: 100%;
+
+        text-align: left;
+        display: inline-block;
+        margin: 0;
+        line-height: 1.25;
+
+        &-container {
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+
+      &::after {
+        margin-left: 0;
+        vertical-align: .35em;
+      }
+    }
+
+    .dropdown-item {
+      white-space: unset;
+    }
+  }
 }
 </style>

src/store/modules/library.js

@@ -221,6 +221,14 @@ export default {
     // LibraryOptions options
     tagsOptions: state => state.tagsOptions,
 
+    nodesDeparts: (state, getters, rootState) => {
+      const departIds = rootState.ids.depart
+      if (departIds === undefined) return
+      const nodes = departIds.map(id => rootState.nodes[id])
+      if (nodes.some(node => node === undefined)) return
+      return nodes
+    },
+
     nodesDepartsOptions: (state, getters, rootState) => {
       const departIds = rootState.ids.depart
       if (departIds === undefined) return