teleport bread
This commit is contained in:
Henry Jameson
parent
4a068483ed
commit
6a319154d9
@ -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,
|
||||
|
||||
10
src/App.scss
10
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -69,12 +69,9 @@
|
||||
</div>
|
||||
<div
|
||||
class="mobile-notifications"
|
||||
id="mobile-notifications"
|
||||
@scroll="onScroll"
|
||||
>
|
||||
<Notifications
|
||||
ref="notifications"
|
||||
:no-heading="true"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<SideDrawer
|
||||
|
||||
@ -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)
|
||||
},
|
||||
|
||||
@ -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>
|
||||
</div>
|
||||
<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 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">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user