From c79c98f53d47910b16b4532105537972deb14921 Mon Sep 17 00:00:00 2001 From: Book Pauk Date: Thu, 10 Jan 2019 19:12:45 +0700 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D1=80=D0=B0=D0=B1=D0=BE=D1=82?= =?UTF-8?q?=D0=BA=D0=B8=20=D1=80=D0=B5=D0=B0=D0=BA=D1=86=D0=B8=D0=B8=20?= =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/components/Reader/Reader.vue | 67 ++++++++++++++++++----------- client/store/index.js | 4 +- 2 files changed, 45 insertions(+), 26 deletions(-) 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()]