887fac5add
* origin/develop: (59 commits) a11y Use dedicated indicator for non-ascii domain names add a favorites "timeline" shortcut refactor navigation-entry and use them in other nav items Update dependency sinon-chai to v3 Update dependency semver to v7 Update dependency vue-router to v4.1.5 Update dependency eslint to v8.23.0 Update dependency vue-template-compiler to v2.7.10 Update dependency @vue/babel-helper-vue-jsx-merge-props to v1.4.0 Update dependency eslint-plugin-promise to v6.0.1 fix lists edit page change ugly checkbox to a list element that doesn't look too much out of place a11y squeeze/stretch pinned items as long as there's enough space for it, hide items that won't fitc Remove isparta lint fix being unable to edit timeline pins on mobile aria fix mobile side drawer causing issues ...
107 lines
3 KiB
JavaScript
107 lines
3 KiB
JavaScript
import SideDrawer from '../side_drawer/side_drawer.vue'
|
|
import Notifications from '../notifications/notifications.vue'
|
|
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
|
|
import GestureService from '../../services/gesture_service/gesture_service'
|
|
import NavigationPins from 'src/components/navigation/navigation_pins.vue'
|
|
import { mapGetters } from 'vuex'
|
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
|
import {
|
|
faTimes,
|
|
faBell,
|
|
faBars
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
|
|
library.add(
|
|
faTimes,
|
|
faBell,
|
|
faBars
|
|
)
|
|
|
|
const MobileNav = {
|
|
components: {
|
|
SideDrawer,
|
|
Notifications,
|
|
NavigationPins
|
|
},
|
|
data: () => ({
|
|
notificationsCloseGesture: undefined,
|
|
notificationsOpen: false
|
|
}),
|
|
created () {
|
|
this.notificationsCloseGesture = GestureService.swipeGesture(
|
|
GestureService.DIRECTION_RIGHT,
|
|
() => this.closeMobileNotifications(true),
|
|
50
|
|
)
|
|
},
|
|
computed: {
|
|
currentUser () {
|
|
return this.$store.state.users.currentUser
|
|
},
|
|
unseenNotifications () {
|
|
return unseenNotificationsFromStore(this.$store)
|
|
},
|
|
unseenNotificationsCount () {
|
|
return this.unseenNotifications.length
|
|
},
|
|
hideSitename () { return this.$store.state.instance.hideSitename },
|
|
sitename () { return this.$store.state.instance.name },
|
|
isChat () {
|
|
return this.$route.name === 'chat'
|
|
},
|
|
...mapGetters(['unreadChatCount']),
|
|
chatsPinned () {
|
|
return new Set(this.$store.state.serverSideStorage.prefsStorage.collections.pinnedNavItems).has('chats')
|
|
}
|
|
},
|
|
methods: {
|
|
toggleMobileSidebar () {
|
|
this.$refs.sideDrawer.toggleDrawer()
|
|
},
|
|
openMobileNotifications () {
|
|
this.notificationsOpen = true
|
|
},
|
|
closeMobileNotifications (markRead) {
|
|
if (this.notificationsOpen) {
|
|
// make sure to mark notifs seen only when the notifs were open and not
|
|
// from close-calls.
|
|
this.notificationsOpen = false
|
|
if (markRead) {
|
|
this.markNotificationsAsSeen()
|
|
}
|
|
}
|
|
},
|
|
notificationsTouchStart (e) {
|
|
GestureService.beginSwipe(e, this.notificationsCloseGesture)
|
|
},
|
|
notificationsTouchMove (e) {
|
|
GestureService.updateSwipe(e, this.notificationsCloseGesture)
|
|
},
|
|
scrollToTop () {
|
|
window.scrollTo(0, 0)
|
|
},
|
|
logout () {
|
|
this.$router.replace('/main/public')
|
|
this.$store.dispatch('logout')
|
|
},
|
|
markNotificationsAsSeen () {
|
|
// this.$refs.notifications.markAsSeen()
|
|
this.$store.dispatch('markNotificationsAsSeen')
|
|
},
|
|
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
|
|
if (scrollTop + clientHeight >= scrollHeight) {
|
|
this.$refs.notifications.fetchOlderNotifications()
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
$route () {
|
|
// handles closing notificaitons when you press any router-link on the
|
|
// notifications.
|
|
this.closeMobileNotifications()
|
|
}
|
|
}
|
|
}
|
|
|
|
export default MobileNav
|