Переход на quasar

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>

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