From 77bfd72458ec8069d60f05b0ae66657cd2b69d1d Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Fri, 31 Jan 2020 21:14:22 +0700
Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D1=85=D0=BE=D0=B4=20?=
 =?UTF-8?q?=D0=BD=D0=B0=20quasar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Reader/HelpPage/HelpPage.vue   | 55 ++++++++++---------
 client/quasar.js                              | 11 ++++
 2 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/client/components/Reader/HelpPage/HelpPage.vue b/client/components/Reader/HelpPage/HelpPage.vue
index d19001ab..4f2cac62 100644
--- a/client/components/Reader/HelpPage/HelpPage.vue
+++ b/client/components/Reader/HelpPage/HelpPage.vue
@@ -4,23 +4,40 @@
             Справка
         </template>
 
-        <el-tabs type="border-card" v-model="selectedTab">
-            <el-tab-pane class="tab" label="Общее">
+        <q-btn-toggle
+            v-model="selectedTab"
+            toggle-color="primary"
+            no-caps
+            :options="[
+                {label: 'Общее', value: 'common'},
+                {label: 'Клавиатура', value: 'hotkeys'},
+                {label: 'Мышь/тачскрин', value: 'mouse'},
+                {label: 'История версий', value: 'releases'},
+                {label: 'Помочь проекту', value: 'donate'}
+            ]"
+        />
+        <q-separator />
+        <q-tab-panels class="fit" v-model="selectedTab">
+            <q-tab-panel name="common">
                 <CommonHelpPage></CommonHelpPage>
-            </el-tab-pane>
-            <el-tab-pane label="Клавиатура">
+            </q-tab-panel>
+
+            <q-tab-panel name="hotkeys">
                 <HotkeysHelpPage></HotkeysHelpPage>
-            </el-tab-pane>
-            <el-tab-pane label="Мышь/тачскрин">
+            </q-tab-panel>
+
+            <q-tab-panel name="mouse">
                 <MouseHelpPage></MouseHelpPage>
-            </el-tab-pane>
-            <el-tab-pane label="История версий" name="releases">
+            </q-tab-panel>
+
+            <q-tab-panel name="releases">
                 <VersionHistoryPage></VersionHistoryPage>
-            </el-tab-pane>
-            <el-tab-pane label="Помочь проекту" name="donate">
+            </q-tab-panel>
+
+            <q-tab-panel name="donate">
                 <DonateHelpPage></DonateHelpPage>
-            </el-tab-pane>
-        </el-tabs>
+            </q-tab-panel>
+        </q-tab-panels>        
     </Window>
 </template>
 
@@ -47,7 +64,7 @@ export default @Component({
     },
 })
 class HelpPage extends Vue {
-    selectedTab = null;
+    selectedTab = 'common';
 
     close() {
         this.$emit('help-toggle');
@@ -72,16 +89,4 @@ class HelpPage extends Vue {
 </script>
 
 <style scoped>
-.el-tabs {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-}
-
-.el-tab-pane {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-}
 </style>
diff --git a/client/quasar.js b/client/quasar.js
index de6a08ef..0ba4a46d 100644
--- a/client/quasar.js
+++ b/client/quasar.js
@@ -7,8 +7,13 @@ import Quasar from 'quasar/src/vue-plugin.js'
 import {QCircularProgress} from 'quasar/src/components/circular-progress';
 import {QInput} from 'quasar/src/components/input';
 import {QBtn} from 'quasar/src/components/btn';
+import {QBtnToggle} from 'quasar/src/components/btn-toggle';
 import {QIcon} from 'quasar/src/components/icon';
 import {QSlider} from 'quasar/src/components/slider';
+//import {QTabs} from 'quasar/src/components/tabs';
+//import {QTab} from 'quasar/src/components/tab';
+import {QTabPanels, QTabPanel} from 'quasar/src/components/tab-panels';
+import {QSeparator} from 'quasar/src/components/separator';
 
 //plugins
 import AppFullscreen from 'quasar/src/plugins/AppFullscreen';
@@ -20,8 +25,14 @@ const components = {
     QCircularProgress,
     QInput,
     QBtn,
+    QBtnToggle,
     QIcon,
     QSlider,
+    //QTabs,
+    //QTab
+    QTabPanels,
+    QTabPanel,
+    QSeparator,
 };
 
 //directives