From e46b560ead02ab5d9df8edbb997c56b835aa21d4 Mon Sep 17 00:00:00 2001 From: shpuld 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 728c8e54..68fae50e 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 55cac52c..59398a34 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,9 +14,9 @@
- - - + + +
@@ -25,17 +25,11 @@
-
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index 6541077b..2064dfa5 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 1593ae65..99ea3dd3 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -1,6 +1,10 @@ @@ -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; - } - } -} diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue index eeb76c35..37d628fa 100644 --- a/src/components/user_finder/user_finder.vue +++ b/src/components/user_finder/user_finder.vue @@ -1,14 +1,16 @@