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 Notifications from '../notifications/notifications.vue'
|
||||||
import MobilePostStatusModal from '../mobile_post_status_modal/mobile_post_status_modal.vue'
|
import MobilePostStatusModal from '../mobile_post_status_modal/mobile_post_status_modal.vue'
|
||||||
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
|
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
|
||||||
|
import GestureService from '../../services/gesture_service/gesture_service'
|
||||||
|
|
||||||
const MobileNav = {
|
const MobileNav = {
|
||||||
components: {
|
components: {
|
||||||
|
@ -10,8 +11,16 @@ const MobileNav = {
|
||||||
MobilePostStatusModal
|
MobilePostStatusModal
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
|
notificationsCloseGesture: undefined,
|
||||||
notificationsOpen: false
|
notificationsOpen: false
|
||||||
}),
|
}),
|
||||||
|
created () {
|
||||||
|
this.notificationsCloseGesture = GestureService.swipeGesture(
|
||||||
|
GestureService.DIRECTION_RIGHT,
|
||||||
|
this.closeMobileNotifications,
|
||||||
|
50
|
||||||
|
)
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
currentUser () {
|
currentUser () {
|
||||||
return this.$store.state.users.currentUser
|
return this.$store.state.users.currentUser
|
||||||
|
@ -39,6 +48,12 @@ const MobileNav = {
|
||||||
this.markNotificationsAsSeen()
|
this.markNotificationsAsSeen()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
notificationsTouchStart (e) {
|
||||||
|
GestureService.beginSwipe(e, this.notificationsCloseGesture)
|
||||||
|
},
|
||||||
|
notificationsTouchMove (e) {
|
||||||
|
GestureService.updateSwipe(e, this.notificationsCloseGesture)
|
||||||
|
},
|
||||||
scrollToTop () {
|
scrollToTop () {
|
||||||
window.scrollTo(0, 0)
|
window.scrollTo(0, 0)
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<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='mobile-inner-nav' @click="scrollToTop()">
|
||||||
<div class='item'>
|
<div class='item'>
|
||||||
<a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
|
<a href="#" class="mobile-nav-button" @click.stop.prevent="toggleMobileSidebar()">
|
||||||
|
@ -15,7 +15,12 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<SideDrawer ref="sideDrawer" :logout="logout"/>
|
<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">
|
<div class="mobile-notifications-header">
|
||||||
<span class="title">{{$t('notifications.notifications')}}</span>
|
<span class="title">{{$t('notifications.notifications')}}</span>
|
||||||
<a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
|
<a class="mobile-nav-button" @click.stop.prevent="closeMobileNotifications()">
|
||||||
|
|
Loading…
Reference in a new issue