From 406aa317c110c2d1651f0bc94b283a2248beea32 Mon Sep 17 00:00:00 2001 From: Book Pauk Date: Thu, 10 Jan 2019 23:35:53 +0700 Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3,=20store-=D0=BC=D0=BE=D0=B4=D1=83?= =?UTF-8?q?=D0=BB=D1=8C=20reader,=20=D0=BD=D0=B0=D1=87=D0=B0=D0=BB=D0=BE?= =?UTF-8?q?=20=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=BA=D0=B8=20LoaderPage?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Reader/LoaderPage/LoaderPage.vue | 51 ++++++++++ client/components/Reader/Reader.vue | 96 +++++++++++-------- client/store/modules/reader.js | 29 ++++++ 3 files changed, 137 insertions(+), 39 deletions(-) create mode 100644 client/components/Reader/LoaderPage/LoaderPage.vue create mode 100644 client/store/modules/reader.js diff --git a/client/components/Reader/LoaderPage/LoaderPage.vue b/client/components/Reader/LoaderPage/LoaderPage.vue new file mode 100644 index 00000000..3ad229fe --- /dev/null +++ b/client/components/Reader/LoaderPage/LoaderPage.vue @@ -0,0 +1,51 @@ + + + + \ No newline at end of file diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue index 192a9a4c..2178099b 100644 --- a/client/components/Reader/Reader.vue +++ b/client/components/Reader/Reader.vue @@ -1,47 +1,50 @@ @@ -50,8 +53,12 @@ //----------------------------------------------------------------------------- import Vue from 'vue'; import Component from 'vue-class-component'; +import LoaderPage from './LoaderPage/LoaderPage.vue'; export default @Component({ + components: { + LoaderPage + }, }) class Reader extends Vue { created() { @@ -60,8 +67,8 @@ class Reader extends Vue { this.reader = this.$store.state.reader; } - get loadActive() { - return this.reader.loadActive; + get loaderActive() { + return this.reader.loaderActive; } get fullScreenActive() { @@ -70,7 +77,7 @@ class Reader extends Vue { buttonClick(button) { switch (button) { - case 'load': this.commit('reader/setLoadActive', !this.loadActive); break; + case 'loader': this.commit('reader/setLoaderActive', !this.loaderActive); break; case 'fullscreen': this.commit('reader/setFullScreenActive', !this.fullScreenActive); break; } } @@ -78,11 +85,21 @@ class Reader extends Vue { buttonActiveClass(button) { const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true }; switch (button) { - case 'load': return (this.loadActive ? classActive : {}); + case 'loader': return (this.loaderActive ? classActive : {}); case 'fullscreen': return (this.fullScreenActive ? classActive : {}); } return {}; } + + get componentActive() { + let result = ''; + + if (!result) { + this.commit('reader/setLoaderActive', true); + result = 'LoaderPage'; + } + return result; + } } //----------------------------------------------------------------------------- //, .tool-button:focus, .tool-button:active, .tool-button:hover @@ -111,6 +128,7 @@ class Reader extends Vue { } .el-main { + display: flex; padding: 0; margin: 0; background-color: #EBE2C9; diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js new file mode 100644 index 00000000..3292f65e --- /dev/null +++ b/client/store/modules/reader.js @@ -0,0 +1,29 @@ +// initial state +const state = { + loaderActive: false, + fullScreenActive: false, +}; + +// getters +const getters = {}; + +// actions +const actions = {}; + +// mutations +const mutations = { + setLoaderActive(state, value) { + state.loaderActive = value; + }, + setFullScreenActive(state, value) { + state.fullScreenActive = value; + }, +}; + +export default { + namespaced: true, + state, + getters, + actions, + mutations +};