From 65c66e0feb9183d783b4d756f59914b170220e14 Mon Sep 17 00:00:00 2001
From: Book Pauk <bookpauk@gmail.com>
Date: Tue, 9 Feb 2021 15:46:57 +0700
Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=D0=B4=20=D0=B4=D0=B2=D1=83=D1=85=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=87=D0=BD=D1=8B=D0=BC=20=D1=80=D0=B5=D0=B6=D0=B8?=
 =?UTF-8?q?=D0=BC=D0=BE=D0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SettingsPage/include/ViewTab/Mode.inc     |  7 +++
 .../components/Reader/TextPage/DrawHelper.js  |  4 +-
 .../components/Reader/TextPage/TextPage.css   | 54 ++++++++++++++++
 .../components/Reader/TextPage/TextPage.vue   | 62 ++-----------------
 client/store/modules/reader.js                |  7 ++-
 5 files changed, 71 insertions(+), 63 deletions(-)
 create mode 100644 client/components/Reader/TextPage/TextPage.css

diff --git a/client/components/Reader/SettingsPage/include/ViewTab/Mode.inc b/client/components/Reader/SettingsPage/include/ViewTab/Mode.inc
index cec85b8d..0f7d0d9a 100644
--- a/client/components/Reader/SettingsPage/include/ViewTab/Mode.inc
+++ b/client/components/Reader/SettingsPage/include/ViewTab/Mode.inc
@@ -90,4 +90,11 @@
         </div>
     </div>
 
+    <div class="item row">
+        <div class="label-2">Ширина тени</div>
+        <div class="col row">
+            <NumInput class="col-left" v-model="dualDivShadowWidth" :min="0" :max="100"/>
+        </div>
+    </div>    
+
 </div>
\ No newline at end of file
diff --git a/client/components/Reader/TextPage/DrawHelper.js b/client/components/Reader/TextPage/DrawHelper.js
index ac31e594..8bd57214 100644
--- a/client/components/Reader/TextPage/DrawHelper.js
+++ b/client/components/Reader/TextPage/DrawHelper.js
@@ -132,7 +132,7 @@ export default class DrawHelper {
         const boxH = this.h + (isScrolling ? this.lineHeight : 0);
         let out = `<div class="row no-wrap" style="width: ${this.boxW}px; height: ${boxH}px;` + 
             ` position: absolute; top: ${this.fontSize*this.textShift}px; color: ${this.textColor}; font: ${font}; ${justify}` +
-            ` line-height: ${this.lineHeight}px; white-space: nowrap; vertical-align: middle;">`;
+            ` line-height: ${this.lineHeight}px; white-space: nowrap;">`;
 
         let imageDrawn1 = new Set();
         let imageDrawn2 = new Set();
@@ -182,7 +182,7 @@ export default class DrawHelper {
             //разделитель
             out += `<div style="width: ${this.dualIndentLR*2}px; top: ${-this.fontSize*this.textShift}px; position: relative">` +
                 `<div class="fit row justify-center items-center">` +
-                    `<div style="height: ${Math.round(boxH*this.dualDivHeight/100)}px; width: ${this.dualDivWidth}px;` + 
+                    `<div style="height: ${Math.round(boxH*this.dualDivHeight/100)}px; width: ${this.dualDivWidth}px; box-shadow: 0 0 ${this.dualDivShadowWidth}px ${this.dualDivColor}; ` + 
                         `background-image: url(&quot;data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>` +
                             //`<rect width='100%' height='100%' style='fill: none; stroke: white; stroke-width: 4; stroke-dasharray: 5 20'/>` +
                             `<line x1='0' y1='0' x2='0' y2='100%' stroke='${this.dualDivColor}' stroke-width='100%' stroke-dasharray='${this.dualDivStrokeFill} ${this.dualDivStrokeGap}'/>` +
diff --git a/client/components/Reader/TextPage/TextPage.css b/client/components/Reader/TextPage/TextPage.css
new file mode 100644
index 00000000..c6461feb
--- /dev/null
+++ b/client/components/Reader/TextPage/TextPage.css
@@ -0,0 +1,54 @@
+.paper1 {
+    background: url("images/paper1.jpg") center;
+    background-size: cover;
+}
+
+.paper2 {
+    background: url("images/paper2.jpg") center;
+    background-size: cover;
+}
+
+.paper3 {
+    background: url("images/paper3.jpg") center;
+    background-size: cover;
+}
+
+.paper4 {
+    background: url("images/paper4.jpg") center;
+    background-size: cover;
+}
+
+.paper5 {
+    background: url("images/paper5.jpg") center;
+    background-size: cover;
+}
+
+.paper6 {
+    background: url("images/paper6.jpg") center;
+    background-size: cover;
+}
+
+.paper7 {
+    background: url("images/paper7.jpg") center;
+    background-size: cover;
+}
+
+.paper8 {
+    background: url("images/paper8.jpg") center;
+    background-size: cover;
+}
+
+.paper9 {
+    background: url("images/paper9.jpg");
+}
+
+@keyframes page1-animation-thaw {
+    0%   { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+@keyframes page2-animation-thaw {
+    0%   { opacity: 1; }
+    100% { opacity: 0; }
+}
+
diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue
index 3f682d86..60c3da24 100644
--- a/client/components/Reader/TextPage/TextPage.vue
+++ b/client/components/Reader/TextPage/TextPage.vue
@@ -27,7 +27,7 @@
         <div v-show="!clickControl && showStatusBar && statusBarClickOpen" class="layout" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
             @click.prevent.stop="onStatusBarClick">
         </div>
-        <!-- невидимым делать нельзя, вовремя не подгружаютя шрифты -->
+        <!-- невидимым делать нельзя (display: none), вовремя не подгружаютя шрифты -->
         <canvas ref="offscreenCanvas" class="layout" style="visibility: hidden"></canvas>
         <div ref="measureWidth" style="position: absolute; visibility: hidden"></div>
     </div>
@@ -40,6 +40,8 @@ import Component from 'vue-class-component';
 import {loadCSS} from 'fg-loadcss';
 import _ from 'lodash';
 
+import './TextPage.css';
+
 import * as utils from '../../../share/utils';
 import bookManager from '../share/bookManager';
 import DrawHelper from './DrawHelper';
@@ -200,6 +202,7 @@ class TextPage extends Vue {
         this.drawHelper.dualDivColor = this.hex2rgba(this.textColor || '#000000', this.dualDivColorAlpha);
         this.drawHelper.dualDivStrokeFill = this.dualDivStrokeFill;
         this.drawHelper.dualDivStrokeGap = this.dualDivStrokeGap;
+        this.drawHelper.dualDivShadowWidth = this.dualDivShadowWidth;
 
         this.drawHelper.backgroundColor = this.backgroundColor;
         this.drawHelper.statusBarColor = this.statusBarColor;
@@ -1190,60 +1193,3 @@ class TextPage extends Vue {
 }
 
 </style>
-
-<style>
-.paper1 {
-    background: url("images/paper1.jpg") center;
-    background-size: cover;
-}
-
-.paper2 {
-    background: url("images/paper2.jpg") center;
-    background-size: cover;
-}
-
-.paper3 {
-    background: url("images/paper3.jpg") center;
-    background-size: cover;
-}
-
-.paper4 {
-    background: url("images/paper4.jpg") center;
-    background-size: cover;
-}
-
-.paper5 {
-    background: url("images/paper5.jpg") center;
-    background-size: cover;
-}
-
-.paper6 {
-    background: url("images/paper6.jpg") center;
-    background-size: cover;
-}
-
-.paper7 {
-    background: url("images/paper7.jpg") center;
-    background-size: cover;
-}
-
-.paper8 {
-    background: url("images/paper8.jpg") center;
-    background-size: cover;
-}
-
-.paper9 {
-    background: url("images/paper9.jpg");
-}
-
-@keyframes page1-animation-thaw {
-    0%   { opacity: 0; }
-    100% { opacity: 1; }
-}
-
-@keyframes page2-animation-thaw {
-    0%   { opacity: 1; }
-    100% { opacity: 0; }
-}
-
-</style>
diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js
index ec81a923..983a5a2c 100644
--- a/client/store/modules/reader.js
+++ b/client/store/modules/reader.js
@@ -228,11 +228,12 @@ const settingDefaults = {
 
     dualPageMode: false,
     dualIndentLR: 10,// px, отступ слева и справа внутри страницы в двухстраничном режиме
-    dualDivWidth: 4,// px, ширина разделителя
-    dualDivHeight: 96,// процент, высота разделителя
-    dualDivColorAlpha: 1,// прозрачность разделителя
+    dualDivWidth: 2,// px, ширина разделителя
+    dualDivHeight: 100,// процент, высота разделителя
+    dualDivColorAlpha: 0.7,// прозрачность разделителя
     dualDivStrokeFill: 1,// px, заполнение пунктира
     dualDivStrokeGap: 1,// px, промежуток пунктира
+    dualDivShadowWidth: 0,// px, ширина тени
 
     showStatusBar: true,
     statusBarTop: false,// top, bottom