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 () { created () {
// Load the locale from the storage // Load the locale from the storage
this.$i18n.locale = this.$store.state.config.interfaceLanguage this.$i18n.locale = this.$store.state.config.interfaceLanguage
window.addEventListener('resize', this.updateMobileState)
},
destroyed () {
window.removeEventListener('resize', this.updateMobileState)
}, },
computed: { computed: {
currentUser () { return this.$store.state.users.currentUser }, currentUser () { return this.$store.state.users.currentUser },
@ -87,7 +91,8 @@ export default {
unseenNotificationsCount () { unseenNotificationsCount () {
return this.unseenNotifications.length 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: { methods: {
scrollToTop () { scrollToTop () {
@ -105,6 +110,13 @@ export default {
}, },
toggleMobileNotifications () { toggleMobileNotifications () {
this.notificationsOpen = !this.notificationsOpen 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; height: 100vh;
top: 50px; top: 50px;
left: 0; left: 0;
z-index: 1001; z-index: 9;
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
transition-property: transform; transition-property: transform;

View file

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

View file

@ -5,6 +5,9 @@ import routes from './routes'
import App from '../App.vue' import App from '../App.vue'
const afterStoreSetup = ({ store, i18n }) => { 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') window.fetch('/api/statusnet/config.json')
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {

View file

@ -11,7 +11,8 @@ const defaultState = {
window.CSS.supports('filter', 'drop-shadow(0 0)') || window.CSS.supports('filter', 'drop-shadow(0 0)') ||
window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
) )
} },
mobileLayout: false
} }
const interfaceMod = { const interfaceMod = {
@ -31,6 +32,9 @@ const interfaceMod = {
}, },
setNotificationPermission (state, permission) { setNotificationPermission (state, permission) {
state.notificationPermission = permission state.notificationPermission = permission
},
setMobileLayout (state, value) {
state.mobileLayout = value
} }
}, },
actions: { actions: {
@ -42,6 +46,10 @@ const interfaceMod = {
}, },
setNotificationPermission ({ commit }, permission) { setNotificationPermission ({ commit }, permission) {
commit('setNotificationPermission', permission) commit('setNotificationPermission', permission)
},
setMobileLayout ({ commit }, value) {
console.log('setMobileLayout called')
commit('setMobileLayout', value)
} }
} }
} }