From d060a8a3438931d97b9513ec01da591905d9d8c9 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 8 Feb 2019 22:58:27 +0700
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20Mo?=
 =?UTF-8?q?useHelpPage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Reader/ClickMapPage/ClickMapPage.vue      | 20 ++++---
 .../components/Reader/HelpPage/HelpPage.vue   |  3 ++
 .../HelpPage/MouseHelpPage/MouseHelpPage.vue  | 54 +++++++++++++++++++
 3 files changed, 69 insertions(+), 8 deletions(-)
 create mode 100644 client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue

diff --git a/client/components/Reader/ClickMapPage/ClickMapPage.vue b/client/components/Reader/ClickMapPage/ClickMapPage.vue
index 48a74183..191c0ea0 100644
--- a/client/components/Reader/ClickMapPage/ClickMapPage.vue
+++ b/client/components/Reader/ClickMapPage/ClickMapPage.vue
@@ -1,6 +1,6 @@
 <template>
-    <div ref="page" class="page">
-        <div v-html="mapHtml"></div>
+    <div ref="page" class="map-page">
+        <div class="content" v-html="mapHtml"></div>
     </div>
 </template>
 
@@ -21,7 +21,7 @@ class ClickMapPage extends Vue {
     }
 
     get mapHtml() {
-        let result = '<div style="display: flex; width: 100%; height: 100%; position: absolute;">';
+        let result = '<div style="flex: 1; display: flex;">';
 
         let px = 0;
         for (const x in clickMap) {
@@ -34,7 +34,7 @@ class ClickMapPage extends Vue {
                 for (const t of text)
                     divText += `<span>${t}</span>`;
                 div += `<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; ` +
-                    `height: ${y - py}%; border: 1px solid white; font-size: ${this.fontSize}">${divText}</div>`;
+                    `height: ${y - py}%; border: 1px solid white; font-size: ${this.fontSize}; line-height: 100%;">${divText}</div>`;
                 py = y;
             }
 
@@ -57,20 +57,24 @@ class ClickMapPage extends Vue {
 </script>
 
 <style scoped>
-.page {
+.map-page {
     position: absolute;
     width: 100%;
     height: 100%;
-    z-index: 45;
+    z-index: 19;
     background-color: rgba(0, 0, 0, 0.9);
     color: white;
     display: flex;
 }
 
+.content {
+    flex: 1;
+    display: flex;
+}
 </style>
 <style>
 @keyframes click-map-disappear {
-  0%   { opacity: 0.9; }
-  100% { opacity: 0; }
+    0%   { opacity: 0.9; }
+    100% { opacity: 0; }
 }
 </style>
diff --git a/client/components/Reader/HelpPage/HelpPage.vue b/client/components/Reader/HelpPage/HelpPage.vue
index 221aa56d..24eb3cd6 100644
--- a/client/components/Reader/HelpPage/HelpPage.vue
+++ b/client/components/Reader/HelpPage/HelpPage.vue
@@ -14,6 +14,7 @@
                         <HotkeysHelpPage></HotkeysHelpPage>
                     </el-tab-pane>
                     <el-tab-pane label="Мышь/тачпад">
+                        <MouseHelpPage></MouseHelpPage>
                     </el-tab-pane>
                     <el-tab-pane label="Помочь проекту">
                     </el-tab-pane>
@@ -32,12 +33,14 @@ import Component from 'vue-class-component';
 import Window from '../../share/Window.vue';
 import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
 import HotkeysHelpPage from './HotkeysHelpPage/HotkeysHelpPage.vue';
+import MouseHelpPage from './MouseHelpPage/MouseHelpPage.vue';
 
 export default @Component({
     components: {
         Window,
         CommonHelpPage,
         HotkeysHelpPage,
+        MouseHelpPage,
     },
 })
 class HelpPage extends Vue {
diff --git a/client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue b/client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue
new file mode 100644
index 00000000..ef2c5ad5
--- /dev/null
+++ b/client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="page">
+        <h4>Управление с помощью мыши/тачпада:</h4>
+        <ul>
+            <li><b>ЛКМ/ТАЧ</b> - активация действия:</li>
+                <div class="click-map-page"><ClickMapPage ref="clickMapPage"></ClickMapPage></div>
+            <li><b>ПКМ</b> - показать/скрыть панель управления</li>
+            <li><b>СКМ</b> - вкл./выкл. плавный скроллинг текста</li>
+        </ul>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import ClickMapPage from '../../ClickMapPage/ClickMapPage.vue';
+
+export default @Component({
+    components: {
+        ClickMapPage,
+    },
+})
+class MouseHelpPage extends Vue {
+    created() {
+    }
+
+    mounted() {
+        this.$refs.clickMapPage.fontSize = '100%';
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.page {
+    flex: 1;
+    padding: 15px;
+    overflow-y: auto;
+    font-size: 150%;
+    line-height: 130%;
+}
+
+h4 {
+    margin: 0;
+}
+
+.click-map-page {
+    position: relative;
+    width: 400px;
+    height: 400px;
+}
+</style>