commit: f6af4c43f656d1990da00bc773c15ebbbc57e71d
parent 6d7b5b157b64df5b189dd4e64e382bdda17e8897
Author: Shpuld Shpuldson <shp@cock.li>
Date: Mon, 1 Mar 2021 16:21:35 +0200
add quick filters for notifications2
Diffstat:
6 files changed, 130 insertions(+), 14 deletions(-)
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
@@ -0,0 +1,121 @@
+<template>
+ <Popover
+ trigger="click"
+ class="NotificationFilters"
+ placement="bottom"
+ :bound-to="{ x: 'container' }"
+ >
+ <div
+ slot="content"
+ class="dropdown-menu"
+ >
+ <button
+ class="button-default dropdown-item"
+ @click="toggleNotificationFilter('likes')"
+ >
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': filters.likes }"
+ />{{ $t('settings.notification_visibility_likes') }}
+ </button>
+ <button
+ class="button-default dropdown-item"
+ @click="toggleNotificationFilter('repeats')"
+ >
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': filters.repeats }"
+ />{{ $t('settings.notification_visibility_repeats') }}
+ </button>
+ <button
+ class="button-default dropdown-item"
+ @click="toggleNotificationFilter('follows')"
+ >
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': filters.follows }"
+ />{{ $t('settings.notification_visibility_follows') }}
+ </button>
+ <button
+ class="button-default dropdown-item"
+ @click="toggleNotificationFilter('mentions')"
+ >
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': filters.mentions }"
+ />{{ $t('settings.notification_visibility_mentions') }}
+ </button>
+ <button
+ class="button-default dropdown-item"
+ @click="toggleNotificationFilter('emojiReactions')"
+ >
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
+ />{{ $t('settings.notification_visibility_emoji_reactions') }}
+ </button>
+ <button
+ class="button-default dropdown-item"
+ @click="toggleNotificationFilter('moves')"
+ >
+ <span
+ class="menu-checkbox"
+ :class="{ 'menu-checkbox-checked': filters.moves }"
+ />{{ $t('settings.notification_visibility_moves') }}
+ </button>
+ </div>
+ <div slot="trigger">
+ <FAIcon icon="filter" />
+ </div>
+ </Popover>
+</template>
+
+<script>
+import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faFilter } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faFilter
+)
+
+export default {
+ components: { Popover },
+ computed: {
+ filters () {
+ return this.$store.getters.mergedConfig.notificationVisibility
+ }
+ },
+ methods: {
+ toggleNotificationFilter (type) {
+ this.$store.dispatch('setOption', {
+ name: 'notificationVisibility',
+ value: {
+ ...this.filters,
+ [type]: !this.filters[type]
+ }
+ })
+ }
+ }
+}
+</script>
+
+<style lang="scss">
+
+.NotificationFilters {
+ align-self: stretch;
+
+ > button {
+ font-size: 1.2em;
+ padding-left: 0.7em;
+ padding-right: 0.2em;
+ line-height: 100%;
+ height: 100%;
+ }
+
+ .dropdown-item {
+ margin: 0;
+ }
+}
+
+</style>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
@@ -1,5 +1,6 @@
import { mapGetters } from 'vuex'
import Notification from '../notification/notification.vue'
+import NotificationFilters from './notification_filters.vue'
import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
import {
notificationsFromStore,
@@ -17,6 +18,10 @@ library.add(
const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
const Notifications = {
+ components: {
+ Notification,
+ NotificationFilters
+ },
props: {
// Disables display of panel header
noHeading: Boolean,
@@ -70,9 +75,6 @@ const Notifications = {
},
...mapGetters(['unreadChatCount'])
},
- components: {
- Notification
- },
watch: {
unseenCountTitle (count) {
if (count > 0) {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
@@ -22,6 +22,7 @@
>
{{ $t('notifications.read') }}
</button>
+ <NotificationFilters />
</div>
<div class="panel-body">
<div
diff --git a/src/components/timeline/timeline_quick_settings.js b/src/components/timeline/timeline_quick_settings.js
@@ -1,5 +1,4 @@
import Popover from '../popover/popover.vue'
-import BooleanSetting from '../settings_modal/helpers/boolean_setting.vue'
import { mapGetters } from 'vuex'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
@@ -12,8 +11,7 @@ library.add(
const TimelineQuickSettings = {
components: {
- Popover,
- BooleanSetting
+ Popover
},
methods: {
setReplyVisibility (visibility) {
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
@@ -6,7 +6,7 @@
>
<div
slot="content"
- class="timeline-settings-menu dropdown-menu"
+ class="dropdown-menu"
>
<div v-if="loggedIn">
<button
@@ -96,12 +96,6 @@
.dropdown-item {
margin: 0;
}
-
- .timeline-settings-menu {
- display: flex;
- min-width: 12em;
- flex-direction: column;
- }
}
</style>
diff --git a/src/modules/config.js b/src/modules/config.js
@@ -44,7 +44,7 @@ export const defaultState = {
likes: true,
repeats: true,
moves: true,
- emojiReactions: false,
+ emojiReactions: true,
followRequest: true,
chatMention: true
},
