Переход на quasar

client/components/Reader/Reader.vue

@@ -562,22 +562,9 @@ class Reader extends Vue {
     fullScreenToggle() {
         this.fullScreenActive = !this.fullScreenActive;
         if (this.fullScreenActive) {
-            const element = document.documentElement;
+            this.$q.fullscreen.request();
-            if (element.requestFullscreen) {
-                element.requestFullscreen();
-            } else if (element.webkitrequestFullscreen) {
-                element.webkitRequestFullscreen();
-            } else if (element.mozRequestFullscreen) {
-                element.mozRequestFullScreen();
-            }
         } else {
-            if (document.cancelFullScreen) {
+            this.$q.fullscreen.exit();
-                document.cancelFullScreen();
-            } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if (document.webkitCancelFullScreen) {
-                document.webkitCancelFullScreen();
-            }
         }
     }
 

client/components/Reader/SetPositionPage/SetPositionPage.vue

@@ -4,8 +4,14 @@
             Установить позицию
         </template>
 
-        <div class="slider">
+        <div class="slider q-px-md">
-            <el-slider v-model="sliderValue" :max="sliderMax" :format-tooltip="formatTooltip"></el-slider>
+            <q-slider
+                v-model="sliderValue"
+                :max="sliderMax"
+                label
+                :label-value="(sliderMax ? (sliderValue/this.sliderMax*100).toFixed(2) + '%' : 0)"
+                color="primary"
+            />
         </div>
     </Window>
 </template>
@@ -46,13 +52,6 @@ class SetPositionPage extends Vue {
         this.initialized = true;
     }
 
-    formatTooltip(val) {
-        if (this.sliderMax)
-            return (val/this.sliderMax*100).toFixed(2) + '%';
-        else
-            return 0;
-    }
-
     close() {
         this.$emit('set-position-toggle');
     }
@@ -73,9 +72,4 @@ class SetPositionPage extends Vue {
     background-color: #efefef;
     border-radius: 15px;
 }
-
-.el-slider {
-    margin-right: 20px;
-    margin-left: 20px;
-}
 </style>

client/quasar.js

@@ -8,22 +8,29 @@ import {QCircularProgress} from 'quasar/src/components/circular-progress';
 import {QInput} from 'quasar/src/components/input';
 import {QBtn} from 'quasar/src/components/btn';
 import {QIcon} from 'quasar/src/components/icon';
+import {QSlider} from 'quasar/src/components/slider';
+
+//plugins
+import AppFullscreen from 'quasar/src/plugins/AppFullscreen';
 
 //config
 const config = {};
 
 const components = {
+    QCircularProgress,
     QInput,
     QBtn,
     QIcon,
-    QCircularProgress,
+    QSlider,
 };
 
 //directives
 const directives = {};
 
 //plugins
-const plugins = {};
+const plugins = {
+    AppFullscreen,
+};
 
 //use
 Vue.use(Quasar, { config, components, directives, plugins });