diff --git a/src/assets/scss/abstracts/_variables.scss b/src/assets/scss/abstracts/_variables.scss index e4e135b..283e7e7 100644 --- a/src/assets/scss/abstracts/_variables.scss +++ b/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; diff --git a/src/pages/library/LibraryOptions.vue b/src/pages/library/LibraryOptions.vue index f46f778..7b21ef1 100644 --- a/src/pages/library/LibraryOptions.vue +++ b/src/pages/library/LibraryOptions.vue @@ -87,17 +87,16 @@ - - + + + + + + + + @@ -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; + } + } } diff --git a/src/store/modules/library.js b/src/store/modules/library.js index 8aa4a2d..8155030 100644 --- a/src/store/modules/library.js +++ b/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