aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/extra_notifications/extra_notifications.js48
-rw-r--r--src/components/extra_notifications/extra_notifications.vue113
-rw-r--r--src/components/interactions/interactions.vue1
-rw-r--r--src/components/mobile_nav/mobile_nav.js7
-rw-r--r--src/components/notifications/notifications.js23
-rw-r--r--src/components/notifications/notifications.vue11
-rw-r--r--src/components/settings_modal/tabs/notifications_tab.vue41
7 files changed, 237 insertions, 7 deletions
diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
new file mode 100644
index 00000000..1bb0f837
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -0,0 +1,48 @@
+import { mapGetters } from 'vuex'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+ faUserPlus,
+ faComments,
+ faBullhorn
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+ faUserPlus,
+ faComments,
+ faBullhorn
+)
+
+const ExtraNotifications = {
+ computed: {
+ shouldShowChats () {
+ return this.mergedConfig.showExtraNotifications && this.mergedConfig.showChatsInExtraNotifications && this.unreadChatCount
+ },
+ shouldShowAnnouncements () {
+ return this.mergedConfig.showExtraNotifications && this.mergedConfig.showAnnouncementsInExtraNotifications && this.unreadAnnouncementCount
+ },
+ shouldShowFollowRequests () {
+ return this.mergedConfig.showExtraNotifications && this.mergedConfig.showFollowRequestsInExtraNotifications && this.followRequestCount
+ },
+ hasAnythingToShow () {
+ return this.shouldShowChats || this.shouldShowAnnouncements || this.shouldShowFollowRequests
+ },
+ shouldShowCustomizationTip () {
+ return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
+ },
+ currentUser () {
+ return this.$store.state.users.currentUser
+ },
+ ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
+ },
+ methods: {
+ openNotificationSettings () {
+ return this.$store.dispatch('openSettingsModalTab', 'notifications')
+ },
+ dismissConfigurationTip () {
+ return this.$store.dispatch('setOption', { name: 'showExtraNotificationsTip', value: false })
+ }
+ }
+}
+
+export default ExtraNotifications
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
new file mode 100644
index 00000000..6e0456a5
--- /dev/null
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -0,0 +1,113 @@
+<template>
+ <div class="ExtraNotifications">
+ <div
+ v-if="shouldShowChats"
+ class="notification unseen"
+ >
+ <div class="notification-overlay" />
+ <router-link
+ class="button-unstyled -link extra-notification"
+ :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 icon"
+ icon="comments"
+ />
+ {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
+ </router-link>
+ </div>
+ <div
+ v-if="shouldShowAnnouncements"
+ class="notification unseen"
+ >
+ <div class="notification-overlay" />
+ <router-link
+ class="button-unstyled -link extra-notification"
+ :to="{ name: 'announcements' }"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 icon"
+ icon="bullhorn"
+ />
+ {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
+ </router-link>
+ </div>
+ <div
+ v-if="shouldShowFollowRequests"
+ class="notification unseen"
+ >
+ <div class="notification-overlay" />
+ <router-link
+ class="button-unstyled -link extra-notification"
+ :to="{ name: 'friend-requests' }"
+ >
+ <FAIcon
+ fixed-width
+ class="fa-scale-110 icon"
+ icon="user-plus"
+ />
+ {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
+ </router-link>
+ </div>
+ <i18n-t
+ v-if="shouldShowCustomizationTip"
+ tag="span"
+ class="notification tip extra-notification"
+ keypath="notifications.configuration_tip"
+ >
+ <template #theSettings>
+ <button
+ class="button-unstyled -link"
+ @click="openNotificationSettings"
+ >
+ {{ $t('notifications.configuration_tip_settings') }}
+ </button>
+ </template>
+ <template #dismiss>
+ <button
+ class="button-unstyled -link"
+ @click="dismissConfigurationTip"
+ >
+ {{ $t('notifications.configuration_tip_dismiss') }}
+ </button>
+ </template>
+ </i18n-t>
+ </div>
+</template>
+
+<script src="./extra_notifications.js" />
+
+<style lang="scss">
+@import "../../variables";
+
+.ExtraNotifications {
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+
+ .notification {
+ width: 100%;
+ border-bottom: 1px solid;
+ border-color: $fallback--border;
+ border-color: var(--border, $fallback--border);
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ }
+
+ .extra-notification {
+ padding: 1em;
+ }
+
+ .icon {
+ margin-right: 0.5em;
+ }
+
+ .tip {
+ display: inline;
+ }
+}
+</style>
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index b7291c02..35d03562 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -39,6 +39,7 @@
<Notifications
ref="notifications"
:no-heading="true"
+ :no-extra="true"
:minimal-mode="true"
:filter-mode="filterMode"
/>
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index dad1f6aa..b5325116 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -1,7 +1,10 @@
import SideDrawer from '../side_drawer/side_drawer.vue'
import Notifications from '../notifications/notifications.vue'
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
+import {
+ unseenNotificationsFromStore,
+ countExtraNotifications
+} from '../../services/notification_utils/notification_utils'
import GestureService from '../../services/gesture_service/gesture_service'
import NavigationPins from 'src/components/navigation/navigation_pins.vue'
import { mapGetters } from 'vuex'
@@ -50,7 +53,7 @@ const MobileNav = {
return unseenNotificationsFromStore(this.$store)
},
unseenNotificationsCount () {
- return this.unseenNotifications.length
+ return this.unseenNotifications.length + countExtraNotifications(this.$store)
},
hideSitename () { return this.$store.state.instance.hideSitename },
sitename () { return this.$store.state.instance.name },
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index d499d3d6..571df0f1 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,12 +1,14 @@
import { computed } from 'vue'
import { mapGetters } from 'vuex'
import Notification from '../notification/notification.vue'
+import ExtraNotifications from '../extra_notifications/extra_notifications.vue'
import NotificationFilters from './notification_filters.vue'
import notificationsFetcher from '../../services/notifications_fetcher/notifications_fetcher.service.js'
import {
notificationsFromStore,
filteredNotificationsFromStore,
- unseenNotificationsFromStore
+ unseenNotificationsFromStore,
+ countExtraNotifications
} from '../../services/notification_utils/notification_utils.js'
import FaviconService from '../../services/favicon_service/favicon_service.js'
import { library } from '@fortawesome/fontawesome-svg-core'
@@ -23,7 +25,8 @@ const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
const Notifications = {
components: {
Notification,
- NotificationFilters
+ NotificationFilters,
+ ExtraNotifications
},
props: {
// Disables panel styles, unread mark, potentially other notification-related actions
@@ -31,6 +34,11 @@ const Notifications = {
minimalMode: Boolean,
// Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
filterMode: Array,
+ // Do not show extra notifications
+ noExtra: {
+ type: Boolean,
+ default: false
+ },
// Disable teleporting (i.e. for /users/user/notifications)
disableTeleport: Boolean
},
@@ -65,11 +73,17 @@ const Notifications = {
filteredNotifications () {
return filteredNotificationsFromStore(this.$store, this.filterMode)
},
+ unseenCountBadgeText () {
+ return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
+ },
unseenCount () {
return this.unseenNotifications.length
},
+ extraNotificationsCount () {
+ return countExtraNotifications(this.$store)
+ },
unseenCountTitle () {
- return this.unseenCount + (this.unreadChatCount) + this.unreadAnnouncementCount
+ return this.unseenNotifications.length + (this.unreadChatCount) + this.unreadAnnouncementCount
},
loading () {
return this.$store.state.statuses.notifications.loading
@@ -94,6 +108,9 @@ const Notifications = {
return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
},
noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
+ showExtraNotifications () {
+ return !this.noExtra
+ },
...mapGetters(['unreadChatCount', 'unreadAnnouncementCount'])
},
mounted () {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 633efca6..999f8e9c 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -17,9 +17,9 @@
<div class="title">
{{ $t('notifications.notifications') }}
<span
- v-if="unseenCount"
+ v-if="unseenCountBadgeText"
class="badge badge-notification unseen-count"
- >{{ unseenCount }}</span>
+ >{{ unseenCountBadgeText }}</span>
</div>
<div
v-if="showScrollTop"
@@ -55,6 +55,13 @@
role="feed"
>
<div
+ v-if="showExtraNotifications"
+ role="listitem"
+ class="notification"
+ >
+ <extra-notifications />
+ </div>
+ <div
v-for="notification in notificationsToDisplay"
:key="notification.id"
role="listitem"
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index fcb92135..4dfba444 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -51,6 +51,47 @@
</li>
</ul>
</li>
+ <li>
+ <BooleanSetting path="showExtraNotifications">
+ {{ $t('settings.notification_show_extra') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <ul class="setting-list suboptions">
+ <li>
+ <BooleanSetting
+ path="showChatsInExtraNotifications"
+ :disabled="!mergedConfig.showExtraNotifications"
+ >
+ {{ $t('settings.notification_extra_chats') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting
+ path="showAnnouncementsInExtraNotifications"
+ :disabled="!mergedConfig.showExtraNotifications"
+ >
+ {{ $t('settings.notification_extra_announcements') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting
+ path="showFollowRequestsInExtraNotifications"
+ :disabled="!mergedConfig.showExtraNotifications"
+ >
+ {{ $t('settings.notification_extra_follow_requests') }}
+ </BooleanSetting>
+ </li>
+ <li>
+ <BooleanSetting
+ path="showExtraNotificationsTip"
+ :disabled="!mergedConfig.showExtraNotifications"
+ >
+ {{ $t('settings.notification_extra_tip') }}
+ </BooleanSetting>
+ </li>
+ </ul>
+ </li>
</ul>
</div>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 14:38:36 +0000