move closing logic to drawer, add swipe to close
This commit is contained in:
shpuld
parent
f72b1d048e
commit
e46b560ead
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
14
src/App.vue
14
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">
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue