Skip to content
Snippets Groups Projects
Commit c06bcf33 authored by Shpuld Shpludson's avatar Shpuld Shpludson
Browse files

add gesture to close notifications drawer

parent 31010779
No related branches found
No related tags found
2 merge requests!1028`master` refresh with `develop`,!703Mobile notifications in nav bar, separate mobile navbar to its own component
Pipeline #9613 passed
......@@ -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)
},
......
<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()">
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment