eris/pleroma-fe
1
1
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

add gesture to close notifications drawer

Browse source
This commit is contained in:
shpuld 2019-03-28 22:54:45 +02:00
parent 31010779f6
commit c06bcf3303
2 changed files with 22 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/mobile_nav/mobile_nav.js
View file

@ -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)
}, },

9
src/components/mobile_nav/mobile_nav.vue
View file

@ -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()">