diff options
Diffstat (limited to 'src/components/side_drawer')
| -rw-r--r-- | src/components/side_drawer/side_drawer.js | 18 | ||||
| -rw-r--r-- | src/components/side_drawer/side_drawer.vue | 142 |
2 files changed, 115 insertions, 45 deletions
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index ad3738d1..567d2e5e 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -1,17 +1,16 @@ import UserCard from '../user_card/user_card.vue' import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' - -// TODO: separate touch gesture stuff into their own utils if more components want them -const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]] - -const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY]) +import GestureService from '../../services/gesture_service/gesture_service' const SideDrawer = { props: [ 'logout' ], data: () => ({ closed: true, - touchCoord: [0, 0] + closeGesture: undefined }), + created () { + this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer) + }, components: { UserCard }, computed: { currentUser () { @@ -46,13 +45,10 @@ const SideDrawer = { this.toggleDrawer() }, touchStart (e) { - this.touchCoord = touchEventCoord(e) + GestureService.beginSwipe(e, this.closeGesture) }, 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() - } + GestureService.updateSwipe(e, this.closeGesture) } } } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 95ee21b4..214b8e0c 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -1,62 +1,98 @@ <template> - <div class="side-drawer-container" + <div + class="side-drawer-container" :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }" > - <div class="side-drawer" + <div + class="side-drawer-darken" + :class="{ 'side-drawer-darken-closed': closed}" + /> + <div + class="side-drawer" :class="{'side-drawer-closed': closed}" @touchstart="touchStart" @touchmove="touchMove" > - <div class="side-drawer-heading" @click="toggleDrawer"> - <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/> - <div class="side-drawer-logo-wrapper" v-else> - <img :src="logo"/> - <span>{{sitename}}</span> + <div + class="side-drawer-heading" + @click="toggleDrawer" + > + <UserCard + v-if="currentUser" + :user="currentUser" + :hide-bio="true" + /> + <div + v-else + class="side-drawer-logo-wrapper" + > + <img :src="logo"> + <span>{{ sitename }}</span> </div> </div> <ul> - <li v-if="!currentUser" @click="toggleDrawer"> + <li + v-if="!currentUser" + @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"> + <li + v-if="currentUser" + @click="toggleDrawer" + > <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> {{ $t("nav.dms") }} </router-link> </li> + <li + v-if="currentUser" + @click="toggleDrawer" + > + <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> + {{ $t("nav.interactions") }} + </router-link> + </li> </ul> <ul> - <li v-if="currentUser" @click="toggleDrawer"> + <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'> + <li + v-if="currentUser && currentUser.locked" + @click="toggleDrawer" + > + <router-link to="/friend-requests"> {{ $t("nav.friend_requests") }} - <span v-if='followRequestCount > 0' class="badge follow-request-count"> - {{followRequestCount}} + <span + v-if="followRequestCount > 0" + class="badge follow-request-count" + > + {{ followRequestCount }} </span> - </router-link> </li> <li @click="toggleDrawer"> - <router-link to='/main/public'> + <router-link to="/main/public"> {{ $t("nav.public_tl") }} </router-link> </li> <li @click="toggleDrawer"> - <router-link to='/main/all'> + <router-link to="/main/all"> {{ $t("nav.twkn") }} </router-link> </li> - <li v-if="currentUser && chat" @click="toggleDrawer"> + <li + v-if="currentUser && chat" + @click="toggleDrawer" + > <router-link :to="{ name: 'chat' }"> {{ $t("nav.chat") }} </router-link> @@ -64,11 +100,14 @@ </ul> <ul> <li @click="toggleDrawer"> - <router-link :to="{ name: 'user-search' }"> - {{ $t("nav.user_search") }} + <router-link :to="{ name: 'search' }"> + {{ $t("nav.search") }} </router-link> </li> - <li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer"> + <li + v-if="currentUser && suggestionsEnabled" + @click="toggleDrawer" + > <router-link :to="{ name: 'who-to-follow' }"> {{ $t("nav.who_to_follow") }} </router-link> @@ -83,17 +122,35 @@ {{ $t("nav.about") }} </router-link> </li> - <li v-if="currentUser" @click="toggleDrawer"> - <a @click="doLogout" href="#"> + <li + v-if="currentUser && currentUser.role === 'admin'" + @click="toggleDrawer" + > + <a + href="/pleroma/admin/#/login-pleroma" + target="_blank" + > + {{ $t("nav.administration") }} + </a> + </li> + <li + v-if="currentUser" + @click="toggleDrawer" + > + <a + href="#" + @click="doLogout" + > {{ $t("login.logout") }} </a> </li> </ul> </div> - <div class="side-drawer-click-outside" - @click.stop.prevent="toggleDrawer" + <div + class="side-drawer-click-outside" :class="{'side-drawer-click-outside-closed': closed}" - ></div> + @click.stop.prevent="toggleDrawer" + /> </div> </template> @@ -111,16 +168,32 @@ height: 100%; display: flex; align-items: stretch; + transition-duration: 0s; + transition-property: transform; } .side-drawer-container-open { + transform: translate(0%); +} + +.side-drawer-container-closed { + transition-delay: 0.35s; + transform: translate(-100%); +} + +.side-drawer-darken { + top: 0; + left: 0; + width: 100vw; + height: 100vh; + position: fixed; + z-index: -1; transition: 0.35s; transition-property: background-color; background-color: rgba(0, 0, 0, 0.5); } -.side-drawer-container-closed { - left: -100%; +.side-drawer-darken-closed { background-color: rgba(0, 0, 0, 0); } @@ -130,8 +203,9 @@ .side-drawer { overflow-x: hidden; - transition: 0.35s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); + transition: 0.35s; + transition-property: transform; margin: 0 0 0 -100px; padding: 0 0 1em 100px; width: 80%; |