diff --git a/locales/en-US.yml b/locales/en-US.yml index 3e4e9dcd3..c1854ba06 100644 --- a/locales/en-US.yml +++ b/locales/en-US.yml @@ -1053,6 +1053,7 @@ recommendedInstancesDescription: "Recommended servers separated by line breaks t caption: "Auto Caption" splash: "Splash Screen" updateAvailable: "There might be an update available!" +swipeOnMobile: "Allow swiping between pages" swipeOnDesktop: "Allow mobile-style swiping on desktop" logoImageUrl: "Logo image URL" showAdminUpdates: "Indicate a new Calckey version is avaliable (admin only)" diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue index 3e951c00b..9234273a6 100644 --- a/packages/client/src/pages/about.vue +++ b/packages/client/src/pages/about.vue @@ -16,10 +16,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue index 63a813286..de4737704 100644 --- a/packages/client/src/pages/admin-file.vue +++ b/packages/client/src/pages/admin-file.vue @@ -16,10 +16,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue index b79985baf..c871655b6 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -19,10 +19,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue index 9202d7887..b23998c41 100644 --- a/packages/client/src/pages/explore.vue +++ b/packages/client/src/pages/explore.vue @@ -17,10 +17,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue index 92fb22354..aa9141acc 100644 --- a/packages/client/src/pages/gallery/index.vue +++ b/packages/client/src/pages/gallery/index.vue @@ -17,10 +17,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue index 73c1051e1..111717459 100644 --- a/packages/client/src/pages/instance-info.vue +++ b/packages/client/src/pages/instance-info.vue @@ -21,10 +21,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue index ba385e395..0e3ea6e42 100644 --- a/packages/client/src/pages/messaging/index.vue +++ b/packages/client/src/pages/messaging/index.vue @@ -17,10 +17,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue index bda42a8b4..37548c980 100644 --- a/packages/client/src/pages/notifications.vue +++ b/packages/client/src/pages/notifications.vue @@ -18,10 +18,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue index 1724ab27f..36fd6c0d7 100644 --- a/packages/client/src/pages/pages.vue +++ b/packages/client/src/pages/pages.vue @@ -16,10 +16,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue index be09daebc..4604c69f7 100644 --- a/packages/client/src/pages/search.vue +++ b/packages/client/src/pages/search.vue @@ -17,10 +17,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue index 36a4e2a13..0add2b9df 100644 --- a/packages/client/src/pages/settings/general.vue +++ b/packages/client/src/pages/settings/general.vue @@ -45,7 +45,10 @@ class="_formBlock" >{{ i18n.ts.useReactionPickerForContextMenu }} - {{ + {{ + i18n.ts.swipeOnMobile + }} + {{ i18n.ts.swipeOnDesktop }} {{ @@ -253,6 +256,7 @@ import * as os from "@/os"; import { unisonReload } from "@/scripts/unison-reload"; import { i18n } from "@/i18n"; import { definePageMetadata } from "@/scripts/page-metadata"; +import { deviceKind } from "@/scripts/device-kind"; const lang = ref(localStorage.getItem("lang")); const fontSize = ref(localStorage.getItem("fontSize")); @@ -339,6 +343,7 @@ const showUpdates = computed(defaultStore.makeGetterSetter("showUpdates")); const swipeOnDesktop = computed( defaultStore.makeGetterSetter("swipeOnDesktop") ); +const swipeOnMobile = computed(defaultStore.makeGetterSetter("swipeOnMobile")); const showAdminUpdates = computed( defaultStore.makeGetterSetter("showAdminUpdates") ); @@ -346,6 +351,10 @@ const showTimelineReplies = computed( defaultStore.makeGetterSetter("showTimelineReplies") ); +watch(swipeOnDesktop, () => { + defaultStore.set("swipeOnMobile", true); +}); + watch(lang, () => { localStorage.setItem("lang", lang.value as string); localStorage.removeItem("locale"); @@ -379,6 +388,7 @@ watch( overridedDeviceKind, showAds, showUpdates, + swipeOnMobile, swipeOnDesktop, seperateRenoteQuote, showAdminUpdates, diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue index 313024d86..15fd804bf 100644 --- a/packages/client/src/pages/settings/preferences-backups.vue +++ b/packages/client/src/pages/settings/preferences-backups.vue @@ -110,6 +110,7 @@ const defaultStoreSaveKeys: (keyof (typeof defaultStore)["state"])[] = [ "squareAvatars", "numberOfPageCache", "showUpdates", + "swipeOnMobile", "swipeOnDesktop", "showAdminUpdates", "enableCustomKaTeXMacro", diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue index e5d8c674b..ce353457d 100644 --- a/packages/client/src/pages/tag.vue +++ b/packages/client/src/pages/tag.vue @@ -17,10 +17,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index 91c92c9be..3b3a08c0a 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -46,10 +46,9 @@ :space-between="20" :virtual="true" :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) + defaultStore.state.swipeOnMobile && + (deviceKind !== 'desktop' || + defaultStore.state.swipeOnDesktop) " @swiper="setSwiperRef" @slide-change="onSlideChange" diff --git a/packages/client/src/store.ts b/packages/client/src/store.ts index e7be5135c..044a98356 100644 --- a/packages/client/src/store.ts +++ b/packages/client/src/store.ts @@ -314,6 +314,10 @@ export const defaultStore = markRaw( where: "device", default: false, }, + swipeOnMobile: { + where: "device", + default: true, + }, showAdminUpdates: { where: "account", default: true,