diff options
Diffstat (limited to 'src/components/mobile_nav')
| -rw-r--r-- | src/components/mobile_nav/mobile_nav.js | 77 | ||||
| -rw-r--r-- | src/components/mobile_nav/mobile_nav.vue | 140 |
2 files changed, 217 insertions, 0 deletions
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js new file mode 100644 index 00000000..bc63d2ba --- /dev/null +++ b/src/components/mobile_nav/mobile_nav.js @@ -0,0 +1,77 @@ +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: { + SideDrawer, + Notifications, + 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 + }, + unseenNotifications () { + return unseenNotificationsFromStore(this.$store) + }, + unseenNotificationsCount () { + return this.unseenNotifications.length + }, + sitename () { return this.$store.state.instance.name } + }, + methods: { + toggleMobileSidebar () { + this.$refs.sideDrawer.toggleDrawer() + }, + openMobileNotifications () { + this.notificationsOpen = true + }, + closeMobileNotifications () { + if (this.notificationsOpen) { + // make sure to mark notifs seen only when the notifs were open and not + // from close-calls. + this.notificationsOpen = false + 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() + } + }, + watch: { + $route () { + // handles closing notificaitons when you press any router-link on the + // notifications. + this.closeMobileNotifications() + } + } +} + +export default MobileNav diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue new file mode 100644 index 00000000..5fa41638 --- /dev/null +++ b/src/components/mobile_nav/mobile_nav.vue @@ -0,0 +1,140 @@ +<template> + <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()"> + <i class="button-icon icon-menu"></i> + </a> + <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link> + </div> + <div class='item right'> + <a class="mobile-nav-button" v-if="currentUser" href="#" @click.stop.prevent="openMobileNotifications()"> + <i class="button-icon icon-bell-alt"></i> + <div class="alert-dot" v-if="unseenNotificationsCount"></div> + </a> + </div> + </div> + <SideDrawer ref="sideDrawer" :logout="logout"/> + <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()"> + <i class="button-icon icon-cancel"/> + </a> + </div> + <div v-if="currentUser" class="mobile-notifications"> + <Notifications ref="notifications" noHeading="true"/> + </div> + </div> + <MobilePostStatusModal /> + </nav> +</template> + +<script src="./mobile_nav.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.mobile-inner-nav { + width: 100%; + display: flex; + align-items: center; +} + +.mobile-nav-button { + display: flex; + justify-content: center; + width: 50px; + position: relative; + cursor: pointer; +} + +.alert-dot { + border-radius: 100%; + height: 8px; + width: 8px; + position: absolute; + left: calc(50% - 4px); + top: calc(50% - 4px); + margin-left: 6px; + margin-top: -6px; + background-color: $fallback--cRed; + background-color: var(--badgeNotification, $fallback--cRed); +} + +.mobile-notifications-drawer { + width: 100%; + height: 100vh; + overflow-x: hidden; + position: fixed; + top: 0; + left: 0; + box-shadow: 1px 1px 4px rgba(0,0,0,.6); + box-shadow: var(--panelShadow); + transition-property: transform; + transition-duration: 0.25s; + transform: translateX(0); + + &.closed { + transform: translateX(100%); + } +} + +.mobile-notifications-header { + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1; + width: 100%; + height: 50px; + line-height: 50px; + position: absolute; + color: var(--topBarText); + background-color: $fallback--fg; + background-color: var(--topBar, $fallback--fg); + box-shadow: 0px 0px 4px rgba(0,0,0,.6); + box-shadow: var(--topBarShadow); + + .title { + font-size: 1.3em; + margin-left: 0.6em; + } +} + +.mobile-notifications { + margin-top: 50px; + width: 100vw; + height: calc(100vh - 50px); + overflow-x: hidden; + overflow-y: scroll; + + color: $fallback--text; + color: var(--text, $fallback--text); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); + + .notifications { + padding: 0; + border-radius: 0; + box-shadow: none; + .panel { + border-radius: 0; + margin: 0; + box-shadow: none; + } + .panel:after { + border-radius: 0; + } + .panel .panel-heading { + border-radius: 0; + box-shadow: none; + } + } +} + +</style> |