aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/layout/top
diff options
context:
space:
mode:
authorZéro~Informatique2022-09-03 04:41:03 +0200
committerZéro~Informatique2022-09-03 04:41:03 +0200
commite704198437fb589ec8c954d12700d2a1f911522c (patch)
tree2413a96880367c55e7f736e902bf2944d90ef0ec /viewer/src/views/layout/top
parenta8452594c6571e8003baa2aca14747eeeee08152 (diff)
downloadldgallery-e704198437fb589ec8c954d12700d2a1f911522c.tar.gz
viewer: refactoring for tag and sort dropdowns
Diffstat (limited to 'viewer/src/views/layout/top')
-rw-r--r--viewer/src/views/layout/top/LayoutCommandSort.vue60
1 files changed, 14 insertions, 46 deletions
diff --git a/viewer/src/views/layout/top/LayoutCommandSort.vue b/viewer/src/views/layout/top/LayoutCommandSort.vue
index bb9744e..8336621 100644
--- a/viewer/src/views/layout/top/LayoutCommandSort.vue
+++ b/viewer/src/views/layout/top/LayoutCommandSort.vue
@@ -22,41 +22,35 @@
22 <LdLink 22 <LdLink
23 :title="t('command.sort.title')" 23 :title="t('command.sort.title')"
24 :tabindex="props.tabindex" 24 :tabindex="props.tabindex"
25 @click="openDropdown" 25 @click="showDropdown=!showDropdown"
26 > 26 >
27 <fa-icon 27 <fa-icon
28 :icon="faSortAmountDown" 28 :icon="faSortAmountDown"
29 size="lg" 29 size="lg"
30 /> 30 />
31 <teleport to="body"> 31 <teleport to="body">
32 <Transition name="fade"> 32 <LdDropdown
33 <div 33 v-model="showDropdown"
34 v-if="showDropdown" 34 :list="itemComparator.ITEM_SORTS"
35 ref="dropdown" 35 :tabindex-root="props.tabindex + 1"
36 :class="$style.dropdown" 36 :class="$style.dropdown"
37 > 37 @select="(sort: ItemSort) => selectedSort=sort"
38 <div 38 >
39 v-for="(sort,idx) in itemComparator.ITEM_SORTS" 39 <template #option="{option}:{option:ItemSort}">
40 :key="sort.name" 40 <fa-icon :icon="option.name == selectedSort.name ? faDotCircle : faCircle" />
41 :tabindex="props.tabindex + idx + 1" 41 <span v-text="option.text" />
42 @click="selectedSort=sort" 42 </template>
43 @keypress.enter.space="selectedSort=sort" 43 </LdDropdown>
44 >
45 <fa-icon :icon="sort.name == selectedSort.name ? faDotCircle : faCircle" />
46 <span v-text="sort.text" />
47 </div>
48 </div>
49 </Transition>
50 </teleport> 44 </teleport>
51 </LdLink> 45 </LdLink>
52</template> 46</template>
53 47
54<script setup lang="ts"> 48<script setup lang="ts">
49import LdDropdown from '@/components/LdDropdown.vue';
55import LdLink from '@/components/LdLink.vue'; 50import LdLink from '@/components/LdLink.vue';
56import { ItemSort, useItemComparator } from '@/services/itemComparator'; 51import { ItemSort, useItemComparator } from '@/services/itemComparator';
57import { useUiStore } from '@/store/uiStore'; 52import { useUiStore } from '@/store/uiStore';
58import { faCircle, faDotCircle, faSortAmountDown } from '@fortawesome/free-solid-svg-icons'; 53import { faCircle, faDotCircle, faSortAmountDown } from '@fortawesome/free-solid-svg-icons';
59import { onClickOutside, onKeyStroke } from '@vueuse/core';
60import { computed, ref } from 'vue'; 54import { computed, ref } from 'vue';
61import { useI18n } from 'vue-i18n'; 55import { useI18n } from 'vue-i18n';
62 56
@@ -74,44 +68,18 @@ const selectedSort = computed({
74}); 68});
75 69
76const showDropdown = ref(false); 70const showDropdown = ref(false);
77
78const dropdown = ref();
79onClickOutside(dropdown, closeDropdown);
80onKeyStroke('Escape', closeDropdown);
81
82function openDropdown() {
83 showDropdown.value = true;
84}
85function closeDropdown() {
86 setTimeout(() => (showDropdown.value = false));
87}
88</script> 71</script>
89 72
90<style lang="scss" module> 73<style lang="scss" module>
91@import "~@/assets/scss/theme"; 74@import "~@/assets/scss/theme";
92 75
93.dropdown { 76.dropdown {
94 position: absolute;
95 top: $layout-top; 77 top: $layout-top;
96 left: 0;
97 z-index: 10;
98 width: $layout-left;
99 color: $input-color;
100 background-color: $dropdown-item-color;
101 padding: 8px 0px;
102 cursor: pointer;
103 > div { 78 > div {
104 padding: 8px 14px; 79 padding: 8px 14px;
105 margin: 2px; // For the focus border
106 > span { 80 > span {
107 padding-left: 12px; 81 padding-left: 12px;
108 } 82 }
109 &:hover {
110 background-color: $dropdown-item-hover-color;
111 }
112 &:focus {
113 outline: solid 1px $button-active-color;
114 }
115 } 83 }
116} 84}
117</style> 85</style>