diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.js | 13 | ||||
| -rw-r--r-- | src/App.vue | 26 | ||||
| -rw-r--r-- | src/components/side_drawer/side_drawer.js | 21 | ||||
| -rw-r--r-- | src/components/side_drawer/side_drawer.vue | 150 |
4 files changed, 198 insertions, 12 deletions
@@ -6,6 +6,7 @@ import InstanceSpecificPanel from './components/instance_specific_panel/instance import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' import ChatPanel from './components/chat_panel/chat_panel.vue' +import SideDrawer from './components/side_drawer/side_drawer.vue' export default { name: 'app', @@ -17,7 +18,8 @@ export default { InstanceSpecificPanel, FeaturesPanel, WhoToFollowPanel, - ChatPanel + ChatPanel, + SideDrawer }, data: () => ({ mobileActivePanel: 'timeline', @@ -28,7 +30,8 @@ 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 @@ -67,6 +70,9 @@ export default { 'background-image': `url(${this.background})` } }, + mobileShowOnlyIn () { + return view => ({ 'mobile-hidden': this.mobileActivePanel !== view }) + }, sitename () { return this.$store.state.instance.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, @@ -85,6 +91,9 @@ export default { }, onFinderToggled (hidden) { this.finderHidden = hidden + }, + toggleMobileSidebar () { + this.showMobileSidebar = !this.showMobileSidebar } } } diff --git a/src/App.vue b/src/App.vue index 4d4680e2..2effc983 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,27 +13,33 @@ <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link> </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> </div> </div> </nav> - <div class="container" id="content"> - <div class="panel-switcher"> - <button @click="activatePanel('sidebar')">Sidebar</button> - <button @click="activatePanel('timeline')">Timeline</button> - </div> - <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}"> + + + + <div v-if="" class="container" id="content"> + <side-drawer :activatePanel="activatePanel" :closed="!showMobileSidebar" :clickoutside="toggleMobileSidebar"></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"> <div class="sidebar"> - <user-panel :activatePanel="activatePanel"></user-panel> - <nav-panel :activatePanel="activatePanel"></nav-panel> - <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel> + <user-panel :activatePanel="activatePanel" :class="mobileShowOnlyIn('poststatus')"></user-panel> + <nav-panel :activatePanel="activatePanel" class="mobile-hidden"></nav-panel> + <instance-specific-panel v-if="showInstanceSpecificPanel" class="mobile-hidden"></instance-specific-panel> <features-panel v-if="!currentUser"></features-panel> <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel> - <notifications :activatePanel="activatePanel" v-if="currentUser"></notifications> + <notifications :activatePanel="activatePanel" v-if="currentUser" :class="mobileShowOnlyIn('notifications')"></notifications> </div> </div> </div> diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js new file mode 100644 index 00000000..b1b7701c --- /dev/null +++ b/src/components/side_drawer/side_drawer.js @@ -0,0 +1,21 @@ +const SideDrawer = { + props: [ 'activatePanel', 'closed', 'clickoutside' ], + computed: { + currentUser () { + return this.$store.state.users.currentUser + } + }, + methods: { + gotoPanel (panel) { + this.activatePanel(panel) + this.clickoutside && this.clickoutside() + }, + clickedOutside () { + if (typeof this.clickoutside === 'function') { + this.clickoutside() + } + } + } +} + +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..b5f399b5 --- /dev/null +++ b/src/components/side_drawer/side_drawer.vue @@ -0,0 +1,150 @@ +<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}"> + <ul> + <li v-if='currentUser'> + <a href="#" @click="gotoPanel('poststatus')">poststatus</a> + </li> + <li v-if='currentUser'> + <a href="#" @click="gotoPanel('notifications')">notifications</a> + </li> + <li v-if='currentUser'> + <router-link @click.native="gotoPanel('timeline')" to='/main/friends'> + {{ $t("nav.timeline") }} + </router-link> + </li> + <li v-if='currentUser'> + <router-link @click.native="gotoPanel('timeline')" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> + {{ $t("nav.mentions") }} + </router-link> + </li> + <li v-if='currentUser'> + <router-link @click.native="gotoPanel('timeline')" :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> + {{ $t("nav.dms") }} + </router-link> + </li> + <li v-if='currentUser && currentUser.locked'> + <router-link @click.native="gotoPanel('timeline')" to='/friend-requests'> + {{ $t("nav.friend_requests") }} + </router-link> + </li> + <li> + <router-link @click.native="gotoPanel('timeline')" to='/main/public'> + {{ $t("nav.public_tl") }} + </router-link> + </li> + <li> + <router-link @click.native="gotoPanel('timeline')" to='/main/all'> + {{ $t("nav.twkn") }} + </router-link> + </li> + </ul> + </div> + <div class="side-drawer-click-outside" @click.stop.prevent="clickedOutside" :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 0 100px; + width: 75%; + flex: 0 0 75%; +} + +.side-drawer-click-outside-closed { + flex: 0 0 0; +} + +.side-drawer-closed { + margin: 0 0 0 calc(-100% - 100px); +} + +.side-drawer .panel { + overflow: hidden; + margin: 0; +} +.side-drawer ul { + list-style: none; + margin: 0; + padding: 0; +} + +.side-drawer li { + border-bottom: 1px solid; + border-color: $fallback--border; + 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); + } + + &: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); + } +} + +.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; + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + + &:hover { + text-decoration: underline; + } + } +} +</style> |