deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-05-10 18:26:53 +02:00
Code Issues Projects Releases Wiki Activity

Refactor sidebar behaviour to no longer use methods in root Vue instance

Browse source
This commit is contained in:
Tim Miller-Williams 2019-11-07 23:47:45 +00:00 committed by Pavel Djundik
parent 1adbbdda2a
commit dd9efad23c
6 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/App.vue
View file

@ -1,7 +1,7 @@
<template>
<div id="viewport" :class="viewportClasses" role="tablist">
<Sidebar :overlay="$refs.overlay" />
<div id="sidebar-overlay" ref="overlay" @click="$root.setSidebar(false)" />
<div id="sidebar-overlay" ref="overlay" @click="$store.commit('sidebarOpen', false)" />
<article id="windows">
<router-view ref="window"></router-view>
</article>

2
client/components/SidebarToggle.vue
View file

@ -1,5 +1,5 @@
<template>
<button class="lt" aria-label="Toggle channel list" @click="$root.toggleSidebar" />
<button class="lt" aria-label="Toggle channel list" @click="$store.commit('toggleSidebar')" />
</template>
<script>

5
client/js/router.js
View file

@ -13,6 +13,7 @@ const Help = require("../components/Windows/Help.vue").default;
const Changelog = require("../components/Windows/Changelog.vue").default;
const NetworkEdit = require("../components/Windows/NetworkEdit.vue").default;
const RoutedChat = require("../components/RoutedChat.vue").default;
const constants = require("./constants");
const router = new VueRouter({
routes: [
@ -66,7 +67,9 @@ router.beforeEach((to, from, next) => {
router.afterEach((to) => {
if (store.state.appLoaded) {
router.app.closeSidebarIfNeeded();
if (window.innerWidth <= constants.mobileViewportPixels) {
store.commit("sidebarOpen", false);
}
}
if (to.name !== "RoutedChat") {

2
client/js/socket-events/init.js
View file

@ -29,7 +29,7 @@ socket.on("init", function(data) {
let isUserlistOpen = storage.get("thelounge.state.userlist");
if (viewportWidth > constants.mobileViewportPixels) {
vueApp.setSidebar(storage.get("thelounge.state.sidebar") !== "false");
store.commit("sidebarOpen", storage.get("thelounge.state.sidebar") !== "false");
}
// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored

3
client/js/store.js
View file

@ -93,6 +93,9 @@ const store = new Vuex.Store({
sidebarDragging(state, payload) {
state.sidebarDragging = payload;
},
toggleSidebar(state) {
state.sidebarOpen = !state.sidebarOpen;
},
userlistOpen(state, payload) {
state.userlistOpen = payload;
},

28
client/js/vue.js
View file

@ -36,23 +36,6 @@ const vueApp = new Vue({
}, 1);
},
methods: {
setSidebar(state) {
this.$store.commit("sidebarOpen", state);
if (window.outerWidth > constants.mobileViewportPixels) {
storage.set("thelounge.state.sidebar", state);
}
this.$emit("resize");
},
toggleSidebar() {
this.setSidebar(!this.$store.state.sidebarOpen);
},
closeSidebarIfNeeded() {
if (window.innerWidth <= constants.mobileViewportPixels) {
this.setSidebar(false);
}
},
setUserlist(state) {
storage.set("thelounge.state.userlist", state);
this.$store.commit("userlistOpen", state);
@ -142,6 +125,17 @@ const vueApp = new Vue({
store,
});
store.watch(
(state) => state.sidebarOpen,
(sidebarOpen) => {
if (window.outerWidth > constants.mobileViewportPixels) {
storage.set("thelounge.state.sidebar", sidebarOpen);
}
vueApp.$emit("resize");
}
);
Vue.config.errorHandler = function(e) {
store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
console.error(e); // eslint-disable-line