Добавлена возможность двигать окна, небольшое облагораживание отображения

client/components/Reader/CopyTextPage/CopyTextPage.vue

@@ -1,6 +1,4 @@
 <template>
-    <div ref="main" class="main" @click="close">
-        <div class="mainWindow" @click.stop>
     <Window @close="close">
         <template slot="header">
             Скопировать текст
@@ -10,8 +8,6 @@
             <div v-html="text"></div>
         </div>
     </Window>
-        </div>
-    </div>
 </template>
 
 <script>
@@ -109,23 +105,6 @@ class CopyTextPage extends Vue {
 </script>
 
 <style scoped>
-.main {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 40;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.mainWindow {
-    width: 100%;
-    height: 100%;
-    display: flex;
-}
-
 .text {
     flex: 1;
     overflow-wrap: anywhere;

client/components/Reader/RecentBooksPage/RecentBooksPage.vue

@@ -1,10 +1,8 @@
 <template>
-    <div ref="main" class="main" @click="close">
+    <Window width="600px" ref="window" @close="close">
-        <div class="mainWindow" @click.stop>
-            <Window @close="close">
         <template slot="header">
             <span v-show="!loading">Последние {{tableData ? tableData.length : 0}} открытых книг</span>
-                    <span v-show="loading"><i class="el-icon-loading" style="font-size: 30px"></i> <span style="position: relative; top: -5px">Список загружается</span></span>
+            <span v-show="loading"><i class="el-icon-loading" style="font-size: 25px"></i> <span style="position: relative; top: -4px">Список загружается</span></span>
         </template>
 
         <el-table
@@ -52,7 +50,7 @@
                             <input class="el-input__inner"
                                 ref="input"
                                 placeholder="Найти"
-                                        style="margin: 0; padding: 0; vertical-align: bottom; margin-top: 20px; padding: 0 10px 0 10px"
+                                style="margin: 0; vertical-align: bottom; margin-top: 20px; padding: 0 10px 0 10px"
                                 :value="search" @input="search = $event.target.value"
                             />
                         </div>
@@ -94,8 +92,6 @@
 
         </el-table>
     </Window>
-        </div>
-    </div>
 </template>
 
 <script>
@@ -128,6 +124,8 @@ class RecentBooksPage extends Vue {
     }
 
     init() {
+        this.$refs.window.init();
+
         this.$nextTick(() => {
             //this.$refs.input.focus();
         });
@@ -315,21 +313,6 @@ class RecentBooksPage extends Vue {
 </script>
 
 <style scoped>
-.main {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 50;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.mainWindow {
-    height: 100%;
-    display: flex;
-}
-
 .desc {
     cursor: pointer;
 }

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -870,7 +870,6 @@ class SettingsPage extends Vue {
 .mainWindow {
     height: 70%;
     display: flex;
-    position: relative;
 }
 
 .text {

client/components/Reader/TextPage/TextPage.vue

@@ -131,7 +131,6 @@ class TextPage extends Vue {
         }, 10);
 
         this.$root.$on('resize', () => {this.$nextTick(this.onResize)});
-        this.mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
     }
 
     mounted() {
@@ -1007,7 +1006,7 @@ class TextPage extends Vue {
     }
 
     onTouchStart(event) {
-        if (!this.mobile)
+        if (!this.$isMobileDevice)
             return;
         this.endClickRepeat();
         if (event.touches.length == 1) {
@@ -1023,19 +1022,19 @@ class TextPage extends Vue {
     }
 
     onTouchEnd() {
-        if (!this.mobile)
+        if (!this.$isMobileDevice)
             return;
         this.endClickRepeat();
     }
 
     onTouchCancel() {
-        if (!this.mobile)
+        if (!this.$isMobileDevice)
             return;
         this.endClickRepeat();
     }
 
     onMouseDown(event) {
-        if (this.mobile)
+        if (this.$isMobileDevice)
             return;
         this.endClickRepeat();
         if (event.button == 0) {
@@ -1051,13 +1050,13 @@ class TextPage extends Vue {
     }
 
     onMouseUp() {
-        if (this.mobile)
+        if (this.$isMobileDevice)
             return;
         this.endClickRepeat();
     }
 
     onMouseWheel(event) {
-        if (this.mobile)
+        if (this.$isMobileDevice)
             return;
         if (event.deltaY > 0) {
             this.doDown();

client/components/share/Window.vue

@@ -1,11 +1,16 @@
 <template>
+    <div ref="main" class="main" @click="close" @mouseup.prevent.stop="onMouseUp" @mousemove.prevent.stop="onMouseMove">
+        <div ref="windowBox" class="windowBox" @click.stop>
             <div class="window">
-        <div class="header">
+                <div ref="header" class="header" @mousedown.prevent.stop="onMouseDown"
+                    @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchmove.stop="onTouchMove">
                     <span class="header-text"><slot name="header"></slot></span>
-            <span class="close-button" @click="close"><i class="el-icon-close"></i></span>
+                    <span class="close-button" @mousedown.stop @click="close"><i class="el-icon-close"></i></span>
                 </div>
                 <slot></slot>
             </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -14,17 +19,112 @@ import Vue from 'vue';
 import Component from 'vue-class-component';
 
 export default @Component({
+    props: {
+        height: { type: String, default: '100%' },
+        width: { type: String, default: '100%' },
+    }
 })
 class Window extends Vue {
-    close() {
+    init() {
-        this.$emit('close');
+        this.$nextTick(() => {
+            this.$refs.windowBox.style.height = this.height;
+            this.$refs.windowBox.style.width = this.width;
+
+            const left = (this.$refs.main.offsetWidth - this.$refs.windowBox.offsetWidth)/2;
+            const top = (this.$refs.main.offsetHeight - this.$refs.windowBox.offsetHeight)/2;
+            this.$refs.windowBox.style.left = (left > 0 ? left : 0) + 'px';
+            this.$refs.windowBox.style.top = (top > 0 ? top : 0) + 'px';
+        });
     }
 
+    onMouseDown(event) {
+        if (this.$isMobileDevice)
+            return;
+        if (event.button == 0) {
+            this.$refs.header.style.cursor = 'move';
+            this.startX = event.screenX;
+            this.startY = event.screenY;
+            this.moving = true;
+        }
+    }
+
+    onMouseUp(event) {
+        if (event.button == 0) {
+            this.$refs.header.style.cursor = 'default';
+            this.moving = false;
+        }
+    }
+
+    onMouseMove(event) {
+        if (this.moving) {
+            const deltaX = event.screenX - this.startX;
+            const deltaY = event.screenY - this.startY;
+            this.startX = event.screenX;
+            this.startY = event.screenY;
+
+            this.$refs.windowBox.style.left = (this.$refs.windowBox.offsetLeft + deltaX) + 'px';
+            this.$refs.windowBox.style.top = (this.$refs.windowBox.offsetTop + deltaY) + 'px';
+        }
+    }
+
+    onTouchStart(event) {
+        if (!this.$isMobileDevice)
+            return;
+        if (event.touches.length == 1) {
+            const touch = event.touches[0];
+            this.$refs.header.style.cursor = 'move';
+            this.startX = touch.screenX;
+            this.startY = touch.screenY;
+            this.moving = true;
+        }
+    }
+
+    onTouchMove(event) {
+        if (!this.$isMobileDevice)
+            return;
+        if (event.touches.length == 1 && this.moving) {
+            const touch = event.touches[0];
+            const deltaX = touch.screenX - this.startX;
+            const deltaY = touch.screenY - this.startY;
+            this.startX = touch.screenX;
+            this.startY = touch.screenY;
+
+            this.$refs.windowBox.style.left = (this.$refs.windowBox.offsetLeft + deltaX) + 'px';
+            this.$refs.windowBox.style.top = (this.$refs.windowBox.offsetTop + deltaY) + 'px';
+        }
+    }
+
+    onTouchEnd() {
+        if (!this.$isMobileDevice)
+            return;
+        this.$refs.header.style.cursor = 'default';
+        this.moving = false;
+    }
+
+
+    close() {
+        if (!this.moving)
+            this.$emit('close');
+    }
 }
 //-----------------------------------------------------------------------------
 </script>
 
 <style scoped>
+.main {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 50;
+}
+
+.windowBox {
+    position: absolute;
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+
 .window {
     flex: 1;
     display: flex;
@@ -39,9 +139,9 @@ class Window extends Vue {
 .header {
     display: flex;
     justify-content: flex-end;
-    background-color: #e5e7ea;
+    background-color: #59B04F;
     align-items: center;
-    height: 40px;
+    height: 30px;
 }
 
 .header-text {
@@ -54,8 +154,12 @@ class Window extends Vue {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 40px;
+    width: 30px;
-    height: 40px;
+    height: 30px;
     cursor: pointer;
 }
+
+.close-button:hover {
+    background-color: #69C05F;
+}
 </style>

client/main.js

@@ -6,6 +6,7 @@ import './element';
 
 import App from './components/App.vue';
 //Vue.config.productionTip = false;
+Vue.prototype.$isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
 
 new Vue({
     router,