From bb4573b735e4fd6f65daebf094f2700a449ba978 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Wed, 9 Jan 2019 21:33:56 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A1=D1=82=D0=B8=D0=BB=D0=B8=D0=B7=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D1=8F=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D1=87=D0=B5?=
 =?UTF-8?q?=D0=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/components/Reader/Reader.vue | 68 ++++++++++++++++++++++++-----
 client/element.js                   |  5 ++-
 2 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/client/components/Reader/Reader.vue b/client/components/Reader/Reader.vue
index 43465b52..82e64850 100644
--- a/client/components/Reader/Reader.vue
+++ b/client/components/Reader/Reader.vue
@@ -2,22 +2,42 @@
     <el-container>
         <el-header height='50px'>
         <div class="header">
-            <el-button plain class="tool-button" @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('back')" @click="doBack"><i class="el-icon-back"></i></el-button>
+            </el-tooltip>
 
             <div>
-                <el-button plain class="tool-button" @click="" ><i class="el-icon-arrow-left"></i></el-button>
-                <el-button plain 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="" ><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>
                 <div class="space"></div>
-                <el-button plain class="tool-button" @click=""><i class="el-icon-rank"></i></el-button>
-                <el-button plain class="tool-button" @click=""><i class="el-icon-d-arrow-right"></i></el-button>
-                <el-button plain class="tool-button" @click=""><i class="el-icon-sort"></i></el-button>
-                <el-button plain class="tool-button" @click=""><i class="el-icon-search"></i></el-button>
-                <el-button plain 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=""><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>
+                <el-tooltip content="Плавный скроллинг" open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click=""><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>
+                <el-tooltip content="Принудительно обновить книгу в обход кеша" open-delay="1000" effect="light">
+                    <el-button class="tool-button" @click=""><i class="el-icon-refresh"></i></el-button>                
+                </el-tooltip>
                 <div class="space"></div>
-                <el-button plain 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=""><i class="el-icon-document"></i></el-button>
+                </el-tooltip>
             </div>
 
-            <el-button plain 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=""><i class="el-icon-setting"></i></el-button>            
+            </el-tooltip>
         </div>
         </el-header>
 
@@ -34,10 +54,20 @@ import Component from 'vue-class-component';
 export default @Component({
 })
 class Reader extends Vue {
+    activeBack = false;
     created() {
     }
 
     doBack() {
+        this.activeBack = !this.activeBack;
+    }
+
+    buttonActiveClass(button) {
+        const activeClass = { 'tool-button-active': true, 'tool-button-active:hover': true };
+        switch (button) {
+            case 'back': return (this.activeBack ? activeClass : {}); break;
+        }
+        return {};
     }
 }
 //-----------------------------------------------------------------------------
@@ -78,16 +108,32 @@ class Reader extends Vue {
     margin-left: 2px;
     margin-right: 2px;
     padding: 0;
+    color: #3E843E;
     background-color: #E6EDF4;
     margin-top: 5px;
     height: 38px;
     width: 38px;
     border: 0;
+    box-shadow: 3px 3px 5px black;
+}
+
+.tool-button:hover {
+    background-color: white;
+}
+
+.tool-button-active {
+    box-shadow: 0 0 0;
+    color: white;
+    background-color: #8AB45F;
+}
+
+.tool-button-active:hover {
+    color: white;
+    background-color: #81C581;
 }
 
 i {
     font-size: 200%;
-    color: #806142;
 }
 
 .space {
diff --git a/client/element.js b/client/element.js
index 3e0283b9..6ba0faea 100644
--- a/client/element.js
+++ b/client/element.js
@@ -32,6 +32,9 @@ import './theme/tabs.css';
 import ElTabPane from 'element-ui/lib/tab-pane';
 import './theme/tab-pane.css';
 
+import ElTooltip from 'element-ui/lib/tooltip';
+import './theme/tooltip.css';
+
 import ElContainer from 'element-ui/lib/container';
 import './theme/container.css';
 
@@ -48,7 +51,7 @@ const ElNotification = () => import('element-ui/lib/notification');
 import './theme/notification.css';
 
 const components = {
-    ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane,
+    ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElContainer, ElAside, ElMain, ElHeader,
     ElNotification
 };