make notifications close on navigation

This commit is contained in:
shpuld 2019-03-23 22:03:38 +02:00
parent f389128e53
commit 85584021fb
2 changed files with 17 additions and 5 deletions

View File

@ -28,9 +28,14 @@ const MobileNav = {
toggleMobileSidebar () {
this.$refs.sideDrawer.toggleDrawer()
},
toggleMobileNotifications () {
this.notificationsOpen = !this.notificationsOpen
if (!this.notificationsOpen) {
openMobileNotifications () {
this.notificationsOpen = true
},
closeMobileNotifications () {
if (this.notificationsOpen) {
// make sure to mark notifs seen only when the notifs were open and not
// from close-calls.
this.notificationsOpen = false
this.markNotificationsAsSeen()
}
},
@ -44,6 +49,13 @@ const MobileNav = {
markNotificationsAsSeen () {
this.$refs.notifications.markAsSeen()
}
},
watch: {
$route () {
// handles closing notificaitons when you press any router-link on the
// notifications.
this.closeMobileNotifications()
}
}
}

View File

@ -8,7 +8,7 @@
<router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
</div>
<div class='item right'>
<a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="toggleMobileNotifications()">
<a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()">
<i class="button-icon icon-bell-alt"></i>
<div class="alert-dot" v-if="unseenNotificationsCount"></div>
</a>
@ -18,7 +18,7 @@
<div v-if="currentUser" class="mobile-notifications-drawer" :class="{ 'closed': !notificationsOpen }">
<div class="mobile-notifications-header">
<span class="title">{{$t('notifications.notifications')}}</span>
<a class="mobile-nav-button" @click.stop.prevent="toggleMobileNotifications()">
<a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
<i class="button-icon icon-cancel"/>
</a>
</div>