From 03f0a7144b5db607411f84133786404aa7367266 Mon Sep 17 00:00:00 2001 From: freeplay Date: Mon, 26 Jun 2023 14:36:28 -0400 Subject: [PATCH 1/9] 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 e9580b9d51..8897cc0e12 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 36a4e2a13c..18afb3b9f5 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 88c41d2831..9a496c3c45 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 e7be5135c5..044a983563 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 4d6d04a7865b9868ebb236774dc2a62579d88ee6 Mon Sep 17 00:00:00 2001 From: freeplay Date: Mon, 26 Jun 2023 15:39:59 -0400 Subject: [PATCH 2/9] 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 3e951c00b1..10dc4483ad 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 63a8132861..1a0f8b4555 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 b79985bafb..ada861c463 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 9202d78878..790d1e400c 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 92fb22354b..66eb72f83e 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 73c1051e1f..4d18961603 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 ba385e3958..f97aa6526a 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 bda42a8b4a..95bd3a0197 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 1724ab27f0..9574ada76f 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 be09daebcf..29fe4a23c8 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 e5d8c674b1..2022fc7e20 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 e17497e6687b95c26ecbcb40428e5bf86d04b194 Mon Sep 17 00:00:00 2001 From: freeplay Date: Mon, 26 Jun 2023 15:47:05 -0400 Subject: [PATCH 3/9] 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 df2c75e14c..cbd5c0515e 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 f743b1359b..53dc6a8ab8 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 d724f94b70..ce51f851e4 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 10dc4483ad..9234273a65 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 1a0f8b4555..de47377043 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 ada861c463..c871655b67 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 790d1e400c..b23998c417 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 66eb72f83e..aa9141acc7 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 4d18961603..111717459d 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 f97aa6526a..0e3ea6e42a 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 95bd3a0197..37548c9802 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 9574ada76f..36fd6c0d76 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 29fe4a23c8..4604c69f76 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 18afb3b9f5..6a9af2412b 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 65abaaa765..b8ee2d4889 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 2022fc7e20..ce353457d0 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 9a496c3c45..3b3a08c0ab 100644 --- a/packages/client/src/pages/timeline.vue +++ b/packages/client/src/pages/timeline.vue @@ -17,8 +17,8 @@ />
-