Mizah/Sharkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

merge: Feat: Implement clickable notifications (!685)

Browse source 
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/685

Approved-by: Hazelnoot <acomputerdog@gmail.com>
Approved-by: dakkar <dakkar@thenautilus.net>
This commit is contained in:
dakkar 2024-10-17 15:56:05 +00:00
commit 786677b079
6 changed files with 22 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
packages/frontend/src/pages/settings/general.vue
View file

@ -170,6 +170,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<option value="horizontal"><i class="ti ti-carousel-horizontal"></i> {{ i18n.ts.horizontal }}</option>
</MkRadios>
<MkSwitch v-model="notificationClickable">{{ i18n.ts.allowClickingNotifications }}</MkSwitch>
<MkButton @click="testNotification">{{ i18n.ts._notification.checkNotificationBehavior }}</MkButton>
</div>
</FormSection>
@ -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'));

4
packages/frontend/src/store.ts
View file

@ -479,6 +479,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,

11
packages/frontend/src/ui/_common_/common.vue
View file

@ -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 : ''"
>
<div v-for="notification in notifications" :key="notification.id" :class="$style.notification">
<div
v-for="notification in notifications" :key="notification.id" :class="$style.notification" :style="{
pointerEvents: getPointerEvents()
}"
>
<XNotification :notification="notification"/>
</div>
</TransitionGroup>
@ -101,6 +105,10 @@ if ($i) {
swInject();
}
}
function getPointerEvents() {
return defaultStore.state.notificationClickable ? undefined : 'none';
}
</script>
<style lang="scss" module>
@ -122,7 +130,6 @@ if ($i) {
position: fixed;
z-index: 3900000;
padding: 0 var(--margin);
pointer-events: none;
display: flex;
&.notificationsPosition_leftTop {