From c7e180080afd0e255e439030df800f79d33ff5de Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Sun, 3 Mar 2019 16:33:40 +0200
Subject: [PATCH] more work with notifications drawer
---
src/App.js | 14 +++++++++++++-
src/App.scss | 2 +-
src/App.vue | 10 ++++++----
src/boot/after_store.js | 3 +++
src/modules/interface.js | 10 +++++++++-
5 files changed, 32 insertions(+), 7 deletions(-)
diff --git a/src/App.js b/src/App.js
index 5e5b6eea8..b6234a08b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -39,6 +39,10 @@ export default {
created () {
// Load the locale from the storage
this.$i18n.locale = this.$store.state.config.interfaceLanguage
+ window.addEventListener('resize', this.updateMobileState)
+ },
+ destroyed () {
+ window.removeEventListener('resize', this.updateMobileState)
},
computed: {
currentUser () { return this.$store.state.users.currentUser },
@@ -87,7 +91,8 @@ export default {
unseenNotificationsCount () {
return this.unseenNotifications.length
},
- showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }
+ showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+ isMobileLayout () { return this.$store.state.interface.mobileLayout }
},
methods: {
scrollToTop () {
@@ -105,6 +110,13 @@ export default {
},
toggleMobileNotifications () {
this.notificationsOpen = !this.notificationsOpen
+ },
+ updateMobileState () {
+ const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+ const changed = width <= 800 !== this.isMobileLayout
+ if (changed) {
+ this.$store.dispatch('setMobileLayout', width <= 800)
+ }
}
}
}
diff --git a/src/App.scss b/src/App.scss
index 3edc41a0c..775bc1c87 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -667,7 +667,7 @@ nav {
height: 100vh;
top: 50px;
left: 0;
- z-index: 1001;
+ z-index: 9;
overflow-x: hidden;
overflow-y: scroll;
transition-property: transform;
diff --git a/src/App.vue b/src/App.vue
index aad848046..d83d5dbea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -25,11 +25,13 @@
</div>
</nav>
<div v-if="" class="container" id="content">
- <side-drawer ref="sideDrawer" :logout="logout"></side-drawer>
- <div class="mobile-notifications" :class="{ 'closed': !notificationsOpen }">
- <notifications/>
+ <div v-if="isMobileLayout">
+ <side-drawer ref="sideDrawer" :logout="logout"></side-drawer>
+ <div class="mobile-notifications" :class="{ 'closed': !notificationsOpen }">
+ <notifications/>
+ </div>
</div>
- <div class="sidebar-flexer mobile-hidden">
+ <div class="sidebar-flexer mobile-hidden" v-if="!isMobileLayout">
<div class="sidebar-bounds">
<div class="sidebar-scroller">
<div class="sidebar">
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 53ecc0831..ad72ce044 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -5,6 +5,9 @@ import routes from './routes'
import App from '../App.vue'
const afterStoreSetup = ({ store, i18n }) => {
+ const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+ store.dispatch('setMobileLayout', width <= 800)
+
window.fetch('/api/statusnet/config.json')
.then((res) => res.json())
.then((data) => {
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 956c9cb37..71554787f 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -11,7 +11,8 @@ const defaultState = {
window.CSS.supports('filter', 'drop-shadow(0 0)') ||
window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
)
- }
+ },
+ mobileLayout: false
}
const interfaceMod = {
@@ -31,6 +32,9 @@ const interfaceMod = {
},
setNotificationPermission (state, permission) {
state.notificationPermission = permission
+ },
+ setMobileLayout (state, value) {
+ state.mobileLayout = value
}
},
actions: {
@@ -42,6 +46,10 @@ const interfaceMod = {
},
setNotificationPermission ({ commit }, permission) {
commit('setNotificationPermission', permission)
+ },
+ setMobileLayout ({ commit }, value) {
+ console.log('setMobileLayout called')
+ commit('setMobileLayout', value)
}
}
}
--
GitLab