From e46b560ead02ab5d9df8edbb997c56b835aa21d4 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Sun, 23 Dec 2018 19:50:19 +0200
Subject: [PATCH] move closing logic to drawer, add swipe to close
---
src/App.js | 5 +-
src/App.vue | 14 ++---
src/components/side_drawer/side_drawer.js | 32 ++++++++---
src/components/side_drawer/side_drawer.vue | 67 +++++++++++-----------
src/components/user_finder/user_finder.vue | 22 +++----
5 files changed, 78 insertions(+), 62 deletions(-)
diff --git a/src/App.js b/src/App.js
index 728c8e547..68fae50e3 100644
--- a/src/App.js
+++ b/src/App.js
@@ -30,8 +30,7 @@ export default {
window.CSS.supports('-moz-mask-size', 'contain') ||
window.CSS.supports('-ms-mask-size', 'contain') ||
window.CSS.supports('-o-mask-size', 'contain')
- ),
- showMobileSidebar: false
+ )
}),
created () {
// Load the locale from the storage
@@ -93,7 +92,7 @@ export default {
this.finderHidden = hidden
},
toggleMobileSidebar () {
- this.showMobileSidebar = !this.showMobileSidebar
+ this.$refs.sideDrawer.toggleDrawer()
}
}
}
diff --git a/src/App.vue b/src/App.vue
index 55cac52c3..59398a345 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,9 +14,9 @@
</div>
<div class='item right'>
<a href="#" @click.stop.prevent="toggleMobileSidebar()"><i class="button-icon icon-menu"></i></a>
- <user-finder class="button-icon nav-icon" @toggled="onFinderToggled"></user-finder>
- <router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
- <a href="#" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
+ <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder>
+ <router-link class="mobile-hidden" @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
+ <a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
</div>
</div>
</nav>
@@ -25,17 +25,11 @@
<div v-if="" class="container" id="content">
<side-drawer
+ ref="sideDrawer"
:activatePanel="activatePanel"
- :closed="!showMobileSidebar"
- :clickoutside="toggleMobileSidebar"
:logout="logout"
>
</side-drawer>
- <!--
- <button @click="activatePanel(mobileViews.postStatus)">post status</button>
- <button @click="activatePanel(mobileViews.notifications)">notifs</button>
- <button @click="activatePanel(mobileViews.timeline)">timeline</button>
- -->
<div class="sidebar-flexer">
<div class="sidebar-bounds">
<div class="sidebar-scroller">
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 6541077b2..2064dfa50 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -1,23 +1,41 @@
+import UserCardContent from '../user_card_content/user_card_content.vue'
+
+const deltaX = (oldX, newX) => newX - oldX
+
+const touchEventX = e => e.touches[0].screenX
+
const SideDrawer = {
- props: [ 'activatePanel', 'closed', 'clickoutside', 'logout' ],
+ props: [ 'activatePanel', 'logout' ],
+ data: () => ({
+ closed: true,
+ touchX: 0
+ }),
+ components: { UserCardContent },
computed: {
currentUser () {
return this.$store.state.users.currentUser
}
},
methods: {
+ toggleDrawer () {
+ this.closed = !this.closed
+ },
gotoPanel (panel) {
this.activatePanel(panel)
- this.clickoutside && this.clickoutside()
- },
- clickedOutside () {
- if (typeof this.clickoutside === 'function') {
- this.clickoutside()
- }
+ this.toggleDrawer()
},
doLogout () {
this.logout()
this.gotoPanel('timeline')
+ },
+ touchStart (e) {
+ this.touchX = touchEventX(e)
+ },
+ touchMove (e) {
+ const delta = deltaX(this.touchX, touchEventX(e))
+ if (delta < -30) {
+ this.toggleDrawer()
+ }
}
}
}
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1593ae65d..99ea3dd38 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,6 +1,10 @@
<template>
- <div class="side-drawer-container" :class="{'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed}">
- <div class="panel panel-default side-drawer" :class="{'side-drawer-closed': closed}">
+ <div class="side-drawer-container" :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }">
+ <div class="panel panel-default side-drawer" :class="{'side-drawer-closed': closed}" @touchstart="touchStart" @touchmove.prevent="touchMove">
+ <div class="side-drawer-heading">
+ <user-card-content :activatePanel="activatePanel" :user="currentUser" :switcher="false" :hideBio="true">
+ </user-card-content>
+ </div>
<ul>
<li v-if='currentUser'>
<a href="#" @click="gotoPanel('poststatus')">
@@ -54,7 +58,7 @@
</li>
</ul>
</div>
- <div class="side-drawer-click-outside" @click.stop.prevent="clickedOutside" :class="{'side-drawer-click-outside-closed': closed}"></div>
+ <div class="side-drawer-click-outside" @click.stop.prevent="toggleDrawer" :class="{'side-drawer-click-outside-closed': closed}"></div>
</div>
</template>
@@ -110,7 +114,28 @@
.side-drawer .panel {
overflow: hidden;
margin: 0;
+ display: flex;
+}
+
+.side-drawer-heading {
+ background: transparent;
+ flex-direction: column;
+ align-items: stretch;
+ display: flex;
+ min-height: 8em;
+ 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;
@@ -123,40 +148,18 @@
border-color: var(--border, $fallback--border);
padding: 0;
- &:first-child a {
- border-top-right-radius: $fallback--panelRadius;
- border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
- border-top-left-radius: $fallback--panelRadius;
- border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
- }
+ a {
+ display: block;
+ padding: 0.8em 0.85em;
- &:last-child a {
- border-bottom-right-radius: $fallback--panelRadius;
- border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
- border-bottom-left-radius: $fallback--panelRadius;
- border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
+ &:hover {
+ background-color: $fallback--lightBg;
+ background-color: var(--lightBg, $fallback--lightBg);
+ }
}
}
.side-drawer li:last-child {
border: none;
}
-
-.side-drawer a {
- display: block;
- padding: 0.8em 0.85em;
-
- &:hover {
- background-color: $fallback--lightBg;
- background-color: var(--lightBg, $fallback--lightBg);
- }
-
- &.router-link-active {
- font-weight: bolder;
-
- &:hover {
- text-decoration: underline;
- }
- }
-}
</style>
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index eeb76c357..37d628fa7 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -1,14 +1,16 @@
<template>
- <div class="user-finder-container">
- <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
- <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
- <template v-else>
- <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
- <button class="btn search-button" @click="findUser(username)">
- <i class="icon-search"/>
- </button>
- <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
- </template>
+ <div>
+ <div class="user-finder-container">
+ <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" />
+ <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a>
+ <template v-else>
+ <input class="user-finder-input" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/>
+ <button class="btn search-button" @click="findUser(username)">
+ <i class="icon-search"/>
+ </button>
+ <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
+ </template>
+ </div>
</div>
</template>
--
GitLab