forked from srxl/akkoma-fe
add gesture to close notifications drawer
This commit is contained in:
parent
31010779f6
commit
c06bcf3303
2 changed files with 22 additions and 2 deletions
|
@ -2,6 +2,7 @@ import SideDrawer from '../side_drawer/side_drawer.vue'
|
|||
import Notifications from '../notifications/notifications.vue'
|
||||
import MobilePostStatusModal from '../mobile_post_status_modal/mobile_post_status_modal.vue'
|
||||
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
|
||||
import GestureService from '../../services/gesture_service/gesture_service'
|
||||
|
||||
const MobileNav = {
|
||||
components: {
|
||||
|
@ -10,8 +11,16 @@ const MobileNav = {
|
|||
MobilePostStatusModal
|
||||
},
|
||||
data: () => ({
|
||||
notificationsCloseGesture: undefined,
|
||||
notificationsOpen: false
|
||||
}),
|
||||
created () {
|
||||
this.notificationsCloseGesture = GestureService.swipeGesture(
|
||||
GestureService.DIRECTION_RIGHT,
|
||||
this.closeMobileNotifications,
|
||||
50
|
||||
)
|
||||
},
|
||||
computed: {
|
||||
currentUser () {
|
||||
return this.$store.state.users.currentUser
|
||||
|
@ -39,6 +48,12 @@ const MobileNav = {
|
|||
this.markNotificationsAsSeen()
|
||||
}
|
||||
},
|
||||
notificationsTouchStart (e) {
|
||||
GestureService.beginSwipe(e, this.notificationsCloseGesture)
|
||||
},
|
||||
notificationsTouchMove (e) {
|
||||
GestureService.updateSwipe(e, this.notificationsCloseGesture)
|
||||
},
|
||||
scrollToTop () {
|
||||
window.scrollTo(0, 0)
|
||||
},
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<nav class='nav-bar container asd' id="nav">
|
||||
<nav class='nav-bar container' id="nav">
|
||||
<div class='mobile-inner-nav' @click="scrollToTop()">
|
||||
<div class='item'>
|
||||
<a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
|
||||
|
@ -15,7 +15,12 @@
|
|||
</div>
|
||||
</div>
|
||||
<SideDrawer ref="sideDrawer" :logout="logout"/>
|
||||
<div v-if="currentUser" class="mobile-notifications-drawer" :class="{ 'closed': !notificationsOpen }">
|
||||
<div v-if="currentUser"
|
||||
class="mobile-notifications-drawer"
|
||||
:class="{ 'closed': !notificationsOpen }"
|
||||
@touchstart="notificationsTouchStart"
|
||||
@touchmove="notificationsTouchMove"
|
||||
>
|
||||
<div class="mobile-notifications-header">
|
||||
<span class="title">{{$t('notifications.notifications')}}</span>
|
||||
<a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
|
||||
|
|
Loading…
Reference in a new issue