From 5085c39440d471b00319eb4ebb2b3169f0cefcd7 Mon Sep 17 00:00:00 2001 From: CenTdemeern1 Date: Sun, 13 Oct 2024 00:57:41 +0200 Subject: Implement clickable notifications I'm not sure about the get function pattern here as it doesn't include a value to base reactivity on; I might be too used to Svelte though and maybe that's fine --- packages/frontend/src/pages/settings/general.vue | 3 +++ packages/frontend/src/store.ts | 4 ++++ packages/frontend/src/ui/_common_/common.vue | 11 +++++++++-- 3 files changed, 16 insertions(+), 2 deletions(-) (limited to 'packages/frontend/src') diff --git a/packages/frontend/src/pages/settings/general.vue b/packages/frontend/src/pages/settings/general.vue index 41046a4bd9..ebf397bf5b 100644 --- a/packages/frontend/src/pages/settings/general.vue +++ b/packages/frontend/src/pages/settings/general.vue @@ -170,6 +170,8 @@ SPDX-License-Identifier: AGPL-3.0-only + {{ i18n.ts.allowClickingNotifications }} + {{ i18n.ts._notification.checkNotificationBehavior }} @@ -411,6 +413,7 @@ const showAvatarDecorations = computed(defaultStore.makeGetterSetter('showAvatar const mediaListWithOneImageAppearance = computed(defaultStore.makeGetterSetter('mediaListWithOneImageAppearance')); const notificationPosition = computed(defaultStore.makeGetterSetter('notificationPosition')); const notificationStackAxis = computed(defaultStore.makeGetterSetter('notificationStackAxis')); +const notificationClickable = computed(defaultStore.makeGetterSetter('notificationClickable')); const keepScreenOn = computed(defaultStore.makeGetterSetter('keepScreenOn')); const disableStreamingTimeline = computed(defaultStore.makeGetterSetter('disableStreamingTimeline')); const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroupedNotifications')); diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts index 8665cdaf76..fe8fb25219 100644 --- a/packages/frontend/src/store.ts +++ b/packages/frontend/src/store.ts @@ -468,6 +468,10 @@ export const defaultStore = markRaw(new Storage('base', { where: 'device', default: 'horizontal' as 'vertical' | 'horizontal', }, + notificationClickable: { + where: 'device', + default: false, + }, enableCondensedLineForAcct: { where: 'device', default: false, diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue index 442b6479dd..2f4deddfcd 100644 --- a/packages/frontend/src/ui/_common_/common.vue +++ b/packages/frontend/src/ui/_common_/common.vue @@ -30,7 +30,11 @@ SPDX-License-Identifier: AGPL-3.0-only :enterFromClass="defaultStore.state.animation ? $style.transition_notification_enterFrom : ''" :leaveToClass="defaultStore.state.animation ? $style.transition_notification_leaveTo : ''" > -
+
@@ -101,6 +105,10 @@ if ($i) { swInject(); } } + +function getPointerEvents() { + return defaultStore.state.notificationClickable ? undefined : 'none'; +}