Доработки реакции кнопок

client/components/Reader/Reader.vue

@@ -2,41 +2,41 @@
     <el-container>
         <el-header height='50px'>
         <div class="header">
-            <el-tooltip content="Загрузить книгу" open-delay="1000" effect="light">
-                <el-button class="tool-button" :class="buttonActiveClass('back')" @click="doBack"><i class="el-icon-back"></i></el-button>
+            <el-tooltip content="Загрузить книгу" :open-delay="1000" effect="light">
+                <el-button class="tool-button" :class="buttonActiveClass('load')" @click="buttonClick('load')"><i class="el-icon-back"></i></el-button>
             </el-tooltip>
 
             <div>
-                <el-tooltip content="Действие назад" open-delay="1000" effect="light">
-                    <el-button class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
+                <el-tooltip content="Действие назад" :open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click="buttonClick('undoAction')" ><i class="el-icon-arrow-left"></i></el-button>
                 </el-tooltip>
-                <el-tooltip content="Действие вперед" open-delay="1000" effect="light">
-                    <el-button class="tool-button" @click="" ><i class="el-icon-arrow-right"></i></el-button>
+                <el-tooltip content="Действие вперед" :open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click="buttonClick('redoAction')" ><i class="el-icon-arrow-right"></i></el-button>
                 </el-tooltip>
                 <div class="space"></div>
-                <el-tooltip content="На весь экран" open-delay="1000" effect="light">
-                    <el-button class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
+                <el-tooltip content="На весь экран" :open-delay="1000" effect="light">
+                    <el-button class="tool-button" :class="buttonActiveClass('fullscreen')" @click="buttonClick('fullscreen')"><i class="el-icon-rank"></i></el-button>
                 </el-tooltip>
-                <el-tooltip content="Прокрутка книги" open-delay="1000" effect="light">
-                    <el-button class="tool-button" @click=""><i class="el-icon-d-arrow-right"></i></el-button>
+                <el-tooltip content="Прокрутка книги" :open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click="buttonClick('setPosition')"><i class="el-icon-d-arrow-right"></i></el-button>
                 </el-tooltip>
-                <el-tooltip content="Плавный скроллинг" open-delay="1000" effect="light">
-                    <el-button class="tool-button" @click=""><i class="el-icon-sort"></i></el-button>
+                <el-tooltip content="Плавный скроллинг" :open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click="buttonClick('scrolling')"><i class="el-icon-sort"></i></el-button>
                 </el-tooltip>
-                <el-tooltip content="Найти в тексте" open-delay="1000" effect="light">
-                    <el-button class="tool-button" @click=""><i class="el-icon-search"></i></el-button>
+                <el-tooltip content="Найти в тексте" :open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click="buttonClick('search')"><i class="el-icon-search"></i></el-button>
                 </el-tooltip>
-                <el-tooltip content="Принудительно обновить книгу в обход кеша" open-delay="1000" effect="light">
-                    <el-button class="tool-button" @click=""><i class="el-icon-refresh"></i></el-button>                
+                <el-tooltip content="Принудительно обновить книгу в обход кеша" :open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click="buttonClick('refresh')"><i class="el-icon-refresh"></i></el-button>                
                 </el-tooltip>
                 <div class="space"></div>
-                <el-tooltip content="История" open-delay="1000" effect="light">
-                    <el-button class="tool-button" @click=""><i class="el-icon-document"></i></el-button>
+                <el-tooltip content="История" :open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click="buttonClick('history')"><i class="el-icon-document"></i></el-button>
                 </el-tooltip>
             </div>
 
-            <el-tooltip content="Настроить" open-delay="1000" effect="light">
-                <el-button class="tool-button" @click=""><i class="el-icon-setting"></i></el-button>            
+            <el-tooltip content="Настроить" :open-delay="1000" effect="light">
+                <el-button class="tool-button" @click="buttonClick('settings')"><i class="el-icon-setting"></i></el-button>            
             </el-tooltip>
         </div>
         </el-header>
@@ -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 {

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()]