commit: 4f108057a2e6372d75f2d0a530340517ce5c15b7
parent 74b167f8dbdc480229d933f7b5ca598f845d5ff2
Author: Henry Jameson <me@hjkos.com>
Date: Sun, 19 Jan 2025 17:22:42 +0200
move quick filter into quick view on mobile to save space
Diffstat:
8 files changed, 63 insertions(+), 11 deletions(-)
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
@@ -350,6 +350,7 @@ const conversation = {
},
...mapGetters(['mergedConfig']),
...mapState({
+ mobileLayout: state => state.interface.layoutType === 'mobile',
mastoUserSocketStatus: state => state.api.mastoUserSocketStatus
})
},
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
@@ -20,7 +20,7 @@
{{ $t('timeline.collapse') }}
</button>
<QuickFilterSettings
- v-if="!collapsable"
+ v-if="!collapsable && mobileLayout"
:conversation="true"
class="rightside-button"
/>
diff --git a/src/components/quick_filter_settings/quick_filter_settings.js b/src/components/quick_filter_settings/quick_filter_settings.js
@@ -1,5 +1,5 @@
import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
@@ -11,7 +11,8 @@ library.add(
const QuickFilterSettings = {
props: {
- conversation: Boolean
+ conversation: Boolean,
+ nested: Boolean
},
components: {
Popover
@@ -27,6 +28,25 @@ const QuickFilterSettings = {
},
computed: {
...mapGetters(['mergedConfig']),
+ ...mapState({
+ mobileLayout: state => state.interface.layoutType === 'mobile'
+ }),
+ triggerAttrs () {
+ if (this.mobileLayout) {
+ return {}
+ } else {
+ return {
+ title: this.$t('timeline.quick_filter_settings')
+ }
+ }
+ },
+ mainClass () {
+ if (this.mobileLayout) {
+ return 'main-button'
+ } else {
+ return 'dropdown-item'
+ }
+ },
loggedIn () {
return !!this.$store.state.users.currentUser
},
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -1,9 +1,10 @@
<template>
<Popover
- trigger="click"
+ :trigger="nested ? 'hover' : 'click'"
class="QuickFilterSettings"
:bound-to="{ x: 'container' }"
- :trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
+ :position="nested ? 'right' : 'top'"
+ :trigger-attrs="triggerAttrs"
>
<template #content>
<div
@@ -137,7 +138,19 @@
</div>
</template>
<template #trigger>
- <FAIcon icon="filter" />
+ <div :class="mobileLayout ? 'main-button' : ''">
+ <FAIcon icon="filter" :fixed-width="nested"/>
+ <template v-if="nested">
+ {{$t('timeline.filter_settings')}}
+ </template>
+ <FAIcon
+ v-if="nested"
+ class="chevron-icon"
+ size="lg"
+ icon="chevron-right"
+ fixed-width
+ />
+ </div>
</template>
</Popover>
</template>
diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
@@ -1,5 +1,6 @@
-import Popover from '../popover/popover.vue'
-import { mapGetters } from 'vuex'
+import Popover from 'src/components/popover/popover.vue'
+import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
+import { mapGetters, mapState } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faList, faFolderTree, faBars, faWrench } from '@fortawesome/free-solid-svg-icons'
@@ -15,7 +16,8 @@ const QuickViewSettings = {
conversation: Boolean
},
components: {
- Popover
+ Popover,
+ QuickFilterSettings
},
methods: {
setConversationDisplay (visibility) {
@@ -27,6 +29,9 @@ const QuickViewSettings = {
},
computed: {
...mapGetters(['mergedConfig']),
+ ...mapState({
+ mobileLayout: state => state.interface.layoutType === 'mobile'
+ }),
loggedIn () {
return !!this.$store.state.users.currentUser
},
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
@@ -3,13 +3,24 @@
trigger="click"
class="QuickViewSettings"
:bound-to="{ x: 'container' }"
- :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
+ :trigger-attrs="triggerAttrs"
>
<template #content>
<div
class="dropdown-menu"
role="menu"
>
+ <div
+ v-if="mobileLayout"
+ class="menu-item dropdown-item -icon"
+ >
+ <QuickFilterSettings :nested="true" />
+ </div>
+ <div
+ v-if="mobileLayout"
+ role="separator"
+ class="dropdown-divider"
+ />
<div role="group">
<div class="menu-item dropdown-item -icon-double">
<button
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
@@ -77,6 +77,7 @@
</template>
<QuickFilterSettings
class="rightside-button"
+ v-if="!mobileLayout"
/>
<QuickViewSettings
class="rightside-button"
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -1214,7 +1214,8 @@
"socket_reconnected": "Realtime connection established",
"socket_broke": "Realtime connection lost: CloseEvent code {0}",
"quick_view_settings": "Quick view settings",
- "quick_filter_settings": "Quick filter settings"
+ "quick_filter_settings": "Quick filter settings",
+ "filter_settings": "Filter"
},
"status": {
"favorites": "Favorites",
