diff --git a/src/App.js b/src/App.js
index b2ec95d488978e4fd50443c7d1ee461d5976df63..827692a6bb9595e05df93c0531a9890d4de5c95b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.vue'
-import Notifications from './components/notifications/notifications.vue'
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
import FeaturesPanel from './components/features_panel/features_panel.vue'
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
@@ -16,13 +15,14 @@ import PostStatusModal from './components/post_status_modal/post_status_modal.vu
import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
import { windowWidth, windowHeight } from './services/window_utils/window_utils'
import { mapGetters } from 'vuex'
+import { defineAsyncComponent } from 'vue'
export default {
name: 'app',
components: {
UserPanel,
NavPanel,
- Notifications,
+ Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
InstanceSpecificPanel,
FeaturesPanel,
WhoToFollowPanel,
diff --git a/src/App.scss b/src/App.scss
index e32a2d36abf30a280b76fb7aa1634a9c0ac4048c..1867a54de8c1f0c37b03ea1467235463f499a19c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -64,10 +64,10 @@ nav {
#sidebar {
grid-area: sidebar;
+}
- @media all and (max-width: 800px) {
- display: none;
- }
+#notifs-column {
+ grid-area: notifs;
}
#main-scroller {
@@ -177,6 +177,10 @@ nav {
.underlay {
display: none;
}
+
+ #sidebar {
+ display: none;
+ }
}
}
diff --git a/src/App.vue b/src/App.vue
index f87d895b30208bf382a18f727f0f8ee027f5ecea..70084538adee5eb0cc8bf9b765632f03e3102e6a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,23 +9,21 @@
/>
<MobileNav v-if="layoutType === 'mobile'" />
<DesktopNav v-else />
+ <notifications v-if="currentUser" />
<div
id="content"
class="app-layout container"
:class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
>
<div class="underlay"/>
- <div
- id="sidebar"
- class="column -scrollable -mini mobile-hidden"
- >
+ <div id="sidebar" class="column -scrollable">
<user-panel />
<template v-if="layoutType !== 'mobile'">
<nav-panel />
<instance-specific-panel v-if="showInstanceSpecificPanel" />
<features-panel v-if="!currentUser && showFeaturesPanel" />
<who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
- <notifications v-if="currentUser" />
+ <div id="notifs-sidebar" />
</template>
</div>
<div id="main-scroller" class="column main">
@@ -42,6 +40,7 @@
</div>
<router-view />
</div>
+ <div id="notifs-column" class="column -scrollable"/>
<media-modal />
</div>
<shout-panel
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 9e736cfb7b17bf01a48a210cbfd1f78e5ba7e1a8..877d52a937e262b8d6d77b4982bac4b5237f4818 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -78,7 +78,8 @@ const MobileNav = {
this.$store.dispatch('logout')
},
markNotificationsAsSeen () {
- this.$refs.notifications.markAsSeen()
+ // this.$refs.notifications.markAsSeen()
+ this.$store.dispatch('markNotificationsAsSeen')
},
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
if (scrollTop + clientHeight >= scrollHeight) {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 096809104006cb9beb0b49c6c61187895c709f52..6c810bba20a7cb490b3ab980cb8995c49827d5c3 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -69,12 +69,9 @@
</div>
<div
class="mobile-notifications"
+ id="mobile-notifications"
@scroll="onScroll"
>
- <Notifications
- ref="notifications"
- :no-heading="true"
- />
</div>
</div>
<SideDrawer
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c8f1ebcbe2957192eac1c18a98f68e7aade11fed..2bb8a1d16cdbac1328577b44af6230f33bfe6f28 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -23,8 +23,6 @@ const Notifications = {
NotificationFilters
},
props: {
- // Disables display of panel header
- noHeading: Boolean,
// Disables panel styles, unread mark, potentially other notification-related actions
// meant for "Interactions" timeline
minimalMode: Boolean,
@@ -65,6 +63,19 @@ const Notifications = {
loading () {
return this.$store.state.statuses.notifications.loading
},
+ noHeading () {
+ const { layoutType } = this.$store.state.interface
+ console.log(layoutType)
+ return layoutType === 'mobile'
+ },
+ teleportTarget () {
+ const { layoutType } = this.$store.state.interface
+ const map = {
+ wide: '#notifs-column',
+ mobile: '#mobile-notifications'
+ }
+ return map[layoutType] || '#notifs-sidebar'
+ },
notificationsToDisplay () {
return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
},
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 9d8fa059f9c796915d19d9ea072582575e41d0fb..f50d3d38458eb023a93473d7004f28feeeb820d6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,69 +1,71 @@
<template>
- <div
- :class="{ minimal: minimalMode }"
- class="Notifications"
- >
- <div :class="mainClass">
- <div
- v-if="!noHeading"
- class="notifications-heading panel-heading -sticky"
- >
- <div class="title">
- {{ $t('notifications.notifications') }}
- <span
- v-if="unseenCount"
- class="badge badge-notification unseen-count"
- >{{ unseenCount }}</span>
- </div>
- <button
- v-if="unseenCount"
- class="button-default read-button"
- @click.prevent="markAsSeen"
- >
- {{ $t('notifications.read') }}
- </button>
- <NotificationFilters />
- </div>
- <div class="panel-body">
+ <teleport :to="teleportTarget">
+ <div
+ :class="{ minimal: minimalMode }"
+ class="Notifications"
+ >
+ <div :class="mainClass">
<div
- v-for="notification in notificationsToDisplay"
- :key="notification.id"
- class="notification"
- :class="{"unseen": !minimalMode && !notification.seen}"
+ v-if="!noHeading"
+ class="notifications-heading panel-heading -sticky"
>
- <div class="notification-overlay" />
- <notification :notification="notification" />
+ <div class="title">
+ {{ $t('notifications.notifications') }}
+ <span
+ v-if="unseenCount"
+ class="badge badge-notification unseen-count"
+ >{{ unseenCount }}</span>
+ </div>
+ <button
+ v-if="unseenCount"
+ class="button-default read-button"
+ @click.prevent="markAsSeen"
+ >
+ {{ $t('notifications.read') }}
+ </button>
+ <NotificationFilters />
</div>
- </div>
- <div class="panel-footer notifications-footer">
- <div
- v-if="bottomedOut"
- class="new-status-notification text-center faint"
- >
- {{ $t('notifications.no_more_notifications') }}
+ <div class="panel-body">
+ <div
+ v-for="notification in notificationsToDisplay"
+ :key="notification.id"
+ class="notification"
+ :class="{"unseen": !minimalMode && !notification.seen}"
+ >
+ <div class="notification-overlay" />
+ <notification :notification="notification" />
+ </div>
</div>
- <button
- v-else-if="!loading"
- class="button-unstyled -link -fullwidth"
- @click.prevent="fetchOlderNotifications()"
- >
- <div class="new-status-notification text-center">
- {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
+ <div class="panel-footer notifications-footer">
+ <div
+ v-if="bottomedOut"
+ class="new-status-notification text-center faint"
+ >
+ {{ $t('notifications.no_more_notifications') }}
+ </div>
+ <button
+ v-else-if="!loading"
+ class="button-unstyled -link -fullwidth"
+ @click.prevent="fetchOlderNotifications()"
+ >
+ <div class="new-status-notification text-center">
+ {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
+ </div>
+ </button>
+ <div
+ v-else
+ class="new-status-notification text-center"
+ >
+ <FAIcon
+ icon="circle-notch"
+ spin
+ size="lg"
+ />
</div>
- </button>
- <div
- v-else
- class="new-status-notification text-center"
- >
- <FAIcon
- icon="circle-notch"
- spin
- size="lg"
- />
</div>
</div>
</div>
- </div>
+ </teleport>
</template>
<script src="./notifications.js"></script>