diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue index 82e64850..192a9a4c 100644 --- a/client/components/Reader/Reader.vue +++ b/client/components/Reader/Reader.vue @@ -2,41 +2,41 @@
- - + +
- - + + - - + +
- - + + - - + + - - + + - - + + - - + +
- - + +
- - + +
@@ -54,18 +54,32 @@ import Component from 'vue-class-component'; export default @Component({ }) class Reader extends Vue { - activeBack = false; created() { + this.commit = this.$store.commit; + this.dispatch = this.$store.dispatch; + this.reader = this.$store.state.reader; } - doBack() { - this.activeBack = !this.activeBack; + get loadActive() { + return this.reader.loadActive; + } + + get fullScreenActive() { + return this.reader.fullScreenActive; + } + + buttonClick(button) { + switch (button) { + case 'load': this.commit('reader/setLoadActive', !this.loadActive); break; + case 'fullscreen': this.commit('reader/setFullScreenActive', !this.fullScreenActive); break; + } } buttonActiveClass(button) { - const activeClass = { 'tool-button-active': true, 'tool-button-active:hover': true }; + const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true }; switch (button) { - case 'back': return (this.activeBack ? activeClass : {}); break; + case 'load': return (this.loadActive ? classActive : {}); + case 'fullscreen': return (this.fullScreenActive ? classActive : {}); } return {}; } @@ -125,6 +139,9 @@ class Reader extends Vue { box-shadow: 0 0 0; color: white; background-color: #8AB45F; + position: relative; + top: 1px; + left: 1px; } .tool-button-active:hover { diff --git a/client/store/index.js b/client/store/index.js index 53d78d75..3ae94c00 100644 --- a/client/store/index.js +++ b/client/store/index.js @@ -5,6 +5,7 @@ import createPersistedState from 'vuex-persistedstate'; import root from './root.js'; import uistate from './modules/uistate'; import config from './modules/config'; +import reader from './modules/reader'; Vue.use(Vuex); @@ -13,7 +14,8 @@ const debug = process.env.NODE_ENV !== 'production'; export default new Vuex.Store(Object.assign({}, root, { modules: { uistate, - config + config, + reader, }, strict: debug, plugins: [createPersistedState()]