|
@@ -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>
|