more work with notifications drawer

This commit is contained in:
shpuld 2019-03-03 16:33:40 +02:00
parent 1d3b1ac934
commit c7e180080a
5 changed files with 32 additions and 7 deletions

View file

@ -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)
}
}
}
}

View file

@ -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;

View file

@ -25,11 +25,13 @@
</div>
</nav>
<div v-if="" class="container" id="content">
<div v-if="isMobileLayout">
<side-drawer ref="sideDrawer" :logout="logout"></side-drawer>
<div class="mobile-notifications" :class="{ 'closed': !notificationsOpen }">
<notifications/>
</div>
<div class="sidebar-flexer mobile-hidden">
</div>
<div class="sidebar-flexer mobile-hidden" v-if="!isMobileLayout">
<div class="sidebar-bounds">
<div class="sidebar-scroller">
<div class="sidebar">

View file

@ -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) => {

View file

@ -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)
}
}
}