From f9f5a7df2025df3bee0cc68ebd29e7a0d641ae9c Mon Sep 17 00:00:00 2001 From: freeplay Date: Mon, 26 Jun 2023 14:36:28 -0400 Subject: [PATCH 1/4] feat: toggle-able swiping --- locales/en-US.yml | 1 + packages/client/src/pages/settings/general.vue | 7 +++++++ packages/client/src/pages/timeline.vue | 7 +------ packages/client/src/store.ts | 4 ++++ 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/locales/en-US.yml b/locales/en-US.yml index e9580b9d5..8897cc0e1 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/settings/general.vue b/packages/client/src/pages/settings/general.vue index 36a4e2a13..18afb3b9f 100644 --- a/packages/client/src/pages/settings/general.vue +++ b/packages/client/src/pages/settings/general.vue @@ -45,6 +45,9 @@ class="_formBlock" >{{ i18n.ts.useReactionPickerForContextMenu }} + {{ + i18n.ts.swipeOnMobile + }} {{ i18n.ts.swipeOnDesktop }} @@ -339,6 +342,9 @@ const showUpdates = computed(defaultStore.makeGetterSetter("showUpdates")); const swipeOnDesktop = computed( defaultStore.makeGetterSetter("swipeOnDesktop") ); +const swipeOnMobile = computed( + defaultStore.makeGetterSetter("swipeOnMobile") +); const showAdminUpdates = computed( defaultStore.makeGetterSetter("showAdminUpdates") ); @@ -379,6 +385,7 @@ watch( overridedDeviceKind, showAds, showUpdates, + swipeOnMobile, swipeOnDesktop, seperateRenoteQuote, showAdminUpdates, diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue index 88c41d283..9a496c3c4 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -45,12 +45,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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, From 7e8f18a9a9151702a34dc0a5ceeb57270feb401c Mon Sep 17 00:00:00 2001 From: freeplay Date: Mon, 26 Jun 2023 15:39:59 -0400 Subject: [PATCH 2/4] chore: apply to all swipers --- packages/client/src/pages/about.vue | 7 +------ packages/client/src/pages/admin-file.vue | 7 +------ packages/client/src/pages/channels.vue | 7 +------ packages/client/src/pages/explore.vue | 7 +------ packages/client/src/pages/gallery/index.vue | 7 +------ packages/client/src/pages/instance-info.vue | 7 +------ packages/client/src/pages/messaging/index.vue | 7 +------ packages/client/src/pages/notifications.vue | 7 +------ packages/client/src/pages/pages.vue | 7 +------ packages/client/src/pages/search.vue | 7 +------ packages/client/src/pages/tag.vue | 7 +------ 11 files changed, 11 insertions(+), 66 deletions(-) diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue index 3e951c00b..10dc4483a 100644 --- a/packages/client/src/pages/about.vue +++ b/packages/client/src/pages/about.vue @@ -15,12 +15,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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..1a0f8b455 100644 --- a/packages/client/src/pages/admin-file.vue +++ b/packages/client/src/pages/admin-file.vue @@ -15,12 +15,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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..ada861c46 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -18,12 +18,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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..790d1e400 100644 --- a/packages/client/src/pages/explore.vue +++ b/packages/client/src/pages/explore.vue @@ -16,12 +16,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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..66eb72f83 100644 --- a/packages/client/src/pages/gallery/index.vue +++ b/packages/client/src/pages/gallery/index.vue @@ -16,12 +16,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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..4d1896160 100644 --- a/packages/client/src/pages/instance-info.vue +++ b/packages/client/src/pages/instance-info.vue @@ -20,12 +20,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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..f97aa6526 100644 --- a/packages/client/src/pages/messaging/index.vue +++ b/packages/client/src/pages/messaging/index.vue @@ -16,12 +16,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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..95bd3a019 100644 --- a/packages/client/src/pages/notifications.vue +++ b/packages/client/src/pages/notifications.vue @@ -17,12 +17,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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..9574ada76 100644 --- a/packages/client/src/pages/pages.vue +++ b/packages/client/src/pages/pages.vue @@ -15,12 +15,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="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..29fe4a23c 100644 --- a/packages/client/src/pages/search.vue +++ b/packages/client/src/pages/search.vue @@ -16,12 +16,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" @swiper="setSwiperRef" @slide-change="onSlideChange" > diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue index e5d8c674b..2022fc7e2 100644 --- a/packages/client/src/pages/tag.vue +++ b/packages/client/src/pages/tag.vue @@ -16,12 +16,7 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move=" - !( - deviceKind === 'desktop' && - !defaultStore.state.swipeOnDesktop - ) - " + :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" @swiper="setSwiperRef" @slide-change="onSlideChange" > From a6b1164cb17e1638af71d4105371429c92546449 Mon Sep 17 00:00:00 2001 From: freeplay Date: Mon, 26 Jun 2023 15:47:05 -0400 Subject: [PATCH 3/4] chore: format --- .../client/src/components/MkMediaImage.vue | 5 ++- .../client/src/components/MkMediaVideo.vue | 4 +-- .../src/components/MkVisibilityPicker.vue | 2 +- packages/client/src/pages/about.vue | 6 +++- packages/client/src/pages/admin-file.vue | 6 +++- packages/client/src/pages/channels.vue | 6 +++- packages/client/src/pages/explore.vue | 6 +++- packages/client/src/pages/gallery/index.vue | 6 +++- packages/client/src/pages/instance-info.vue | 6 +++- packages/client/src/pages/messaging/index.vue | 6 +++- packages/client/src/pages/notifications.vue | 6 +++- packages/client/src/pages/pages.vue | 6 +++- packages/client/src/pages/search.vue | 6 +++- .../client/src/pages/settings/general.vue | 4 +-- .../client/src/pages/settings/reaction.vue | 2 +- packages/client/src/pages/tag.vue | 6 +++- packages/client/src/pages/timeline.vue | 34 +++++++++++++------ packages/client/src/widgets/rss.vue | 4 +-- 18 files changed, 88 insertions(+), 33 deletions(-) diff --git a/packages/client/src/components/MkMediaImage.vue b/packages/client/src/components/MkMediaImage.vue index df2c75e14..cbd5c0515 100644 --- a/packages/client/src/components/MkMediaImage.vue +++ b/packages/client/src/components/MkMediaImage.vue @@ -55,7 +55,6 @@ import { defaultStore } from "@/store"; import { i18n } from "@/i18n"; import * as os from "@/os"; - const props = defineProps<{ image: misskey.entities.DriveFile; raw?: boolean; @@ -73,8 +72,8 @@ const url = function captionPopup() { os.alert({ type: "info", - text: props.image.comment - }) + text: props.image.comment, + }); } // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする diff --git a/packages/client/src/components/MkMediaVideo.vue b/packages/client/src/components/MkMediaVideo.vue index f743b1359..53dc6a8ab 100644 --- a/packages/client/src/components/MkMediaVideo.vue +++ b/packages/client/src/components/MkMediaVideo.vue @@ -85,8 +85,8 @@ const hide = ref( function captionPopup() { os.alert({ type: "info", - text: props.video.comment - }) + text: props.video.comment, + }); } onMounted(() => { diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue index d724f94b7..ce51f851e 100644 --- a/packages/client/src/components/MkVisibilityPicker.vue +++ b/packages/client/src/components/MkVisibilityPicker.vue @@ -225,7 +225,7 @@ function choose(visibility: (typeof misskey.noteVisibilities)[number]): void { } .itemDescription { - opacity: .6; + opacity: 0.6; display: block; line-height: 1.5; } diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue index 10dc4483a..9234273a6 100644 --- a/packages/client/src/pages/about.vue +++ b/packages/client/src/pages/about.vue @@ -15,7 +15,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 1a0f8b455..de4737704 100644 --- a/packages/client/src/pages/admin-file.vue +++ b/packages/client/src/pages/admin-file.vue @@ -15,7 +15,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 ada861c46..c871655b6 100644 --- a/packages/client/src/pages/channels.vue +++ b/packages/client/src/pages/channels.vue @@ -18,7 +18,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 790d1e400..b23998c41 100644 --- a/packages/client/src/pages/explore.vue +++ b/packages/client/src/pages/explore.vue @@ -16,7 +16,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 66eb72f83..aa9141acc 100644 --- a/packages/client/src/pages/gallery/index.vue +++ b/packages/client/src/pages/gallery/index.vue @@ -16,7 +16,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 4d1896160..111717459 100644 --- a/packages/client/src/pages/instance-info.vue +++ b/packages/client/src/pages/instance-info.vue @@ -20,7 +20,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 f97aa6526..0e3ea6e42 100644 --- a/packages/client/src/pages/messaging/index.vue +++ b/packages/client/src/pages/messaging/index.vue @@ -16,7 +16,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 95bd3a019..37548c980 100644 --- a/packages/client/src/pages/notifications.vue +++ b/packages/client/src/pages/notifications.vue @@ -17,7 +17,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 9574ada76..36fd6c0d7 100644 --- a/packages/client/src/pages/pages.vue +++ b/packages/client/src/pages/pages.vue @@ -15,7 +15,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 29fe4a23c..4604c69f7 100644 --- a/packages/client/src/pages/search.vue +++ b/packages/client/src/pages/search.vue @@ -16,7 +16,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 18afb3b9f..6a9af2412 100644 --- a/packages/client/src/pages/settings/general.vue +++ b/packages/client/src/pages/settings/general.vue @@ -342,9 +342,7 @@ const showUpdates = computed(defaultStore.makeGetterSetter("showUpdates")); const swipeOnDesktop = computed( defaultStore.makeGetterSetter("swipeOnDesktop") ); -const swipeOnMobile = computed( - defaultStore.makeGetterSetter("swipeOnMobile") -); +const swipeOnMobile = computed(defaultStore.makeGetterSetter("swipeOnMobile")); const showAdminUpdates = computed( defaultStore.makeGetterSetter("showAdminUpdates") ); diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue index 65abaaa76..b8ee2d488 100644 --- a/packages/client/src/pages/settings/reaction.vue +++ b/packages/client/src/pages/settings/reaction.vue @@ -240,7 +240,7 @@ watch(enableEmojiReactions, async () => { watch(reactionPickerSkinTone, async () => { await reloadAsk(); -}) +}); const headerActions = $computed(() => []); diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue index 2022fc7e2..ce353457d 100644 --- a/packages/client/src/pages/tag.vue +++ b/packages/client/src/pages/tag.vue @@ -16,7 +16,11 @@ :modules="[Virtual]" :space-between="20" :virtual="true" - :allow-touch-move="defaultStore.state.swipeOnMobile && ( deviceKind !== 'desktop' || defaultStore.state.swipeOnDesktop )" + :allow-touch-move=" + 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 9a496c3c4..3b3a08c0a 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -17,8 +17,8 @@ />
-