diff options
Diffstat (limited to 'src/components/side_drawer')
| -rw-r--r-- | src/components/side_drawer/side_drawer.js | 47 | ||||
| -rw-r--r-- | src/components/side_drawer/side_drawer.vue | 188 |
2 files changed, 235 insertions, 0 deletions
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js new file mode 100644 index 00000000..82d6d209 --- /dev/null +++ b/src/components/side_drawer/side_drawer.js @@ -0,0 +1,47 @@ +import UserCardContent from '../user_card_content/user_card_content.vue' +import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' + +const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]] + +const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY]) + +const SideDrawer = { + props: [ 'logout' ], + data: () => ({ + closed: true, + touchCoord: [0, 0] + }), + components: { UserCardContent }, + computed: { + currentUser () { + return this.$store.state.users.currentUser + }, + chat () { return this.$store.state.chat.channel.state === 'joined' }, + unseenNotifications () { + return unseenNotificationsFromStore(this.$store) + }, + unseenNotificationsCount () { + return this.unseenNotifications.length + } + }, + methods: { + toggleDrawer () { + this.closed = !this.closed + }, + doLogout () { + this.logout() + this.toggleDrawer() + }, + touchStart (e) { + this.touchCoord = touchEventCoord(e) + }, + touchMove (e) { + const delta = deltaCoord(this.touchCoord, touchEventCoord(e)) + if (delta[0] < -30 && Math.abs(delta[1]) < Math.abs(delta[0]) && !this.closed) { + this.toggleDrawer() + } + } + } +} + +export default SideDrawer diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue new file mode 100644 index 00000000..156c4934 --- /dev/null +++ b/src/components/side_drawer/side_drawer.vue @@ -0,0 +1,188 @@ +<template> + <div class="side-drawer-container" :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"> + <div class="side-drawer" + :class="{'side-drawer-closed': closed}" + @touchstart="touchStart" + @touchmove="touchMove" + > + <div class="side-drawer-heading" @click="toggleDrawer"> + <user-card-content :user="currentUser" :switcher="false" :hideBio="true"> + </user-card-content> + </div> + <ul> + <li v-if="currentUser" @click="toggleDrawer"> + <router-link :to="{ name: 'new-status', params: { username: currentUser.screen_name } }"> + {{ $t("post_status.new_status") }} + </router-link> + </li> + <li v-else @click="toggleDrawer"> + <router-link :to="{ name: 'login' }"> + {{ $t("login.login") }} + </router-link> + </li> + <li v-if="currentUser" @click="toggleDrawer"> + <router-link :to="{ name: 'notifications', params: { username: currentUser.screen_name } }"> + {{ $t("notifications.notifications") }} {{ unseenNotificationsCount > 0 ? `(${unseenNotificationsCount})` : '' }} + </router-link> + </li> + <li v-if="currentUser" @click="toggleDrawer"> + <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> + {{ $t("nav.dms") }} + </router-link> + </li> + <li> + <div class="divider"></div> + </li> + <li v-if="currentUser" @click="toggleDrawer"> + <router-link :to="{ name: 'friends' }"> + {{ $t("nav.timeline") }} + </router-link> + </li> + <li v-if="currentUser && currentUser.locked" @click="toggleDrawer"> + <router-link to='/friend-requests'> + {{ $t("nav.friend_requests") }} + </router-link> + </li> + <li @click="toggleDrawer"> + <router-link to='/main/public'> + {{ $t("nav.public_tl") }} + </router-link> + </li> + <li @click="toggleDrawer"> + <router-link to='/main/all'> + {{ $t("nav.twkn") }} + </router-link> + </li> + <li v-if="currentUser && chat" @click="toggleDrawer"> + <router-link :to="{ name: 'chat' }"> + {{ $t("nav.chat") }} + </router-link> + </li> + <li> + <div class="divider"></div> + </li> + <li @click="toggleDrawer"> + <router-link :to="{ name: 'user-search'}"> + {{ $t("nav.user_search") }} + </router-link> + </li> + <li @click="toggleDrawer"> + <router-link :to="{ name: 'settings'}"> + {{ $t("settings.settings") }} + </router-link> + </li> + <li v-if="currentUser" @click="toggleDrawer"> + <a @click="doLogout" href="#"> + {{ $t("login.logout") }} + </a> + </li> + </ul> + </div> + <div class="side-drawer-click-outside" @click.stop.prevent="toggleDrawer" :class="{'side-drawer-click-outside-closed': closed}"></div> + </div> +</template> + +<script src="./side_drawer.js" ></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.side-drawer-container { + position: fixed; + z-index: 1000; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: stretch; +} + +.side-drawer-container-open { + transition-delay: 0.0s; + transition-property: left; +} + +.side-drawer-container-closed { + left: -100%; + transition-delay: 0.5s; + transition-property: left; +} + +.side-drawer-click-outside { + flex: 1 1 100%; +} + +.side-drawer { + overflow-x: hidden; /* Disable horizontal scroll */ + transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ + transition-timing-function: cubic-bezier(0, 1, 0.5, 1); + margin: 0 0 0 -100px; + padding: 0 0 1em 100px; + width: 80%; + max-width: 20em; + flex: 0 0 80%; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); + box-shadow: var(--panelShadow); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); +} + +.side-drawer-click-outside-closed { + flex: 0 0 0; +} + +.side-drawer-closed { + margin: 0 0 0 calc(-100% - 100px); +} + +.side-drawer-heading { + background: transparent; + flex-direction: column; + align-items: stretch; + display: flex; + min-height: 7em; + padding: 0; + margin: 0; + + .profile-panel-background { + border-radius: 0; + .panel-heading { + background: transparent; + flex-direction: column; + align-items: stretch; + } + } +} + +.side-drawer ul { + list-style: none; + margin: 0; + padding: 0; +} + +.side-drawer li { + padding: 0; + + .divider { + border-top: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + margin: 0.2em 0; + } + + a { + display: block; + padding: 0.5em 0.85em; + + &:hover { + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + } + } +} + +.side-drawer li:last-child { + border: none; +} +</style> |