From f597c603bf44dd793826c70e9186bc95e9d85671 Mon Sep 17 00:00:00 2001 From: Book Pauk Date: Tue, 9 Feb 2021 18:43:43 +0700 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?= =?UTF-8?q?=D1=86=D0=B2=D0=B5=D1=82=D0=B0=20=D0=B4=D0=BB=D1=8F=20=D1=81?= =?UTF-8?q?=D1=82=D0=B0=D1=82=D1=83=D1=81=D0=B1=D0=B0=D1=80=D0=B0=20=D0=B8?= =?UTF-8?q?=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=D0=B8=D1=82=D0=B5=D0=BB?= =?UTF-8?q?=D1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Reader/SettingsPage/SettingsPage.vue | 23 ++++++++++ .../SettingsPage/include/ViewTab/Mode.inc | 43 +++++++++++++++--- .../SettingsPage/include/ViewTab/Status.inc | 44 +++++++++++++++---- .../components/Reader/TextPage/DrawHelper.js | 8 ++-- .../components/Reader/TextPage/TextPage.vue | 14 +++--- client/store/modules/reader.js | 6 ++- 6 files changed, 112 insertions(+), 26 deletions(-) diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue index ab68f9b9..be10315b 100644 --- a/client/components/Reader/SettingsPage/SettingsPage.vue +++ b/client/components/Reader/SettingsPage/SettingsPage.vue @@ -148,6 +148,20 @@ export default @Component({ if (hex.test(newValue)) this.backgroundColor = newValue; }, + dualDivColor(newValue) { + this.dualDivColorFiltered = newValue; + }, + dualDivColorFiltered(newValue) { + if (hex.test(newValue)) + this.dualDivColor = newValue; + }, + statusBarColor(newValue) { + this.statusBarColorFiltered = newValue; + }, + statusBarColorFiltered(newValue) { + if (hex.test(newValue)) + this.statusBarColor = newValue; + }, }, }) class SettingsPage extends Vue { @@ -161,6 +175,7 @@ class SettingsPage extends Vue { tabsScrollable = false; textColorFiltered = ''; bgColorFiltered = ''; + dualDivColorFiltered = ''; webFonts = []; fonts = []; @@ -221,6 +236,8 @@ class SettingsPage extends Vue { this.vertShift = this.fontShifts[font] || 0; this.textColorFiltered = this.textColor; this.bgColorFiltered = this.backgroundColor; + this.dualDivColorFiltered = this.dualDivColor; + this.statusBarColorFiltered = this.statusBarColor; } get mode() { @@ -357,6 +374,12 @@ class SettingsPage extends Vue { case 'bg': result += `background-color: ${this.backgroundColor};` break; + case 'div': + result += `background-color: ${this.dualDivColor};` + break; + case 'statusbar': + result += `background-color: ${this.statusBarColor};` + break; } return result; } diff --git a/client/components/Reader/SettingsPage/include/ViewTab/Mode.inc b/client/components/Reader/SettingsPage/include/ViewTab/Mode.inc index 4eb2a8b6..8e864219 100644 --- a/client/components/Reader/SettingsPage/include/ViewTab/Mode.inc +++ b/client/components/Reader/SettingsPage/include/ViewTab/Mode.inc @@ -39,6 +39,42 @@
Разделитель
+ +
+
Цвет
+
+ + + +
+ +
+ +
+ +
+
Прозрачность
+
+ +
+
+
Ширина (px)
@@ -61,13 +97,6 @@
-
-
Прозрачность
-
- -
-
-
Пунктир
diff --git a/client/components/Reader/SettingsPage/include/ViewTab/Status.inc b/client/components/Reader/SettingsPage/include/ViewTab/Status.inc index 43cfd2ea..f49e6ee3 100644 --- a/client/components/Reader/SettingsPage/include/ViewTab/Status.inc +++ b/client/components/Reader/SettingsPage/include/ViewTab/Status.inc @@ -5,25 +5,53 @@
Статус
- +
-
-
Высота
-
- +
+
Цвет
+
+ + +
+ +
+
-
+
Прозрачность
- +
-
+
+
Высота
+
+ +
+
+ +
diff --git a/client/components/Reader/TextPage/DrawHelper.js b/client/components/Reader/TextPage/DrawHelper.js index 66ad0efa..f99aa4e3 100644 --- a/client/components/Reader/TextPage/DrawHelper.js +++ b/client/components/Reader/TextPage/DrawHelper.js @@ -213,8 +213,8 @@ export default class DrawHelper { if (w1 + w2 + w3 <= w && w3 > (10 + fh2)) { const barWidth = w - w1 - w2 - fh2; - out += this.strokeRect(x + w1, y + pad, barWidth, fh - 2, this.statusBarColor); - out += this.fillRect(x + w1 + 2, y + pad + 2, (barWidth - 4)*read, fh - 6, this.statusBarColor); + out += this.strokeRect(x + w1, y + pad, barWidth, fh - 2, this.statusBarRgbaColor); + out += this.fillRect(x + w1 + 2, y + pad + 2, (barWidth - 4)*read, fh - 6, this.statusBarRgbaColor); } if (w1 <= w) @@ -227,12 +227,12 @@ export default class DrawHelper { let out = `
`; + `color: ${this.statusBarRgbaColor}">`; const fontSize = statusBarHeight*0.75; const font = 'bold ' + this.fontBySize(fontSize); - out += this.fillRect(0, (statusBarTop ? statusBarHeight : 0), this.realWidth, 1, this.statusBarColor); + out += this.fillRect(0, (statusBarTop ? statusBarHeight : 0), this.realWidth, 1, this.statusBarRgbaColor); const date = new Date(); const time = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`; diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue index 757a6118..c1c0d0c7 100644 --- a/client/components/Reader/TextPage/TextPage.vue +++ b/client/components/Reader/TextPage/TextPage.vue @@ -189,8 +189,10 @@ class TextPage extends Vue { this.$refs.statusBar.style.left = '0px'; this.$refs.statusBar.style.top = (this.statusBarTop ? 1 : this.realHeight - this.statusBarHeight) + 'px'; - this.statusBarColor = this.hex2rgba(this.textColor || '#000000', this.statusBarColorAlpha); - this.dualDivColor = this.hex2rgba(this.textColor || '#000000', this.dualDivColorAlpha); + const sbColor = (this.statusBarColorAsText ? this.textColor : this.statusBarColor); + this.statusBarRgbaColor = this.hex2rgba(sbColor || '#000000', this.statusBarColorAlpha); + const ddColor = (this.dualDivColorAsText ? this.textColor : this.dualDivColor); + this.dualDivRgbaColor = this.hex2rgba(ddColor || '#000000', this.dualDivColorAlpha); //drawHelper this.drawHelper.realWidth = this.realWidth; @@ -205,13 +207,13 @@ class TextPage extends Vue { this.drawHelper.dualIndentLR = this.dualIndentLR; /*this.drawHelper.dualDivWidth = this.dualDivWidth; this.drawHelper.dualDivHeight = this.dualDivHeight; - this.drawHelper.dualDivColor = this.dualDivColor; + this.drawHelper.dualDivRgbaColor = this.dualDivRgbaColor; 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; + this.drawHelper.statusBarRgbaColor = this.statusBarRgbaColor; this.drawHelper.fontStyle = this.fontStyle; this.drawHelper.fontWeight = this.fontWeight; this.drawHelper.fontSize = this.fontSize; @@ -792,9 +794,9 @@ class TextPage extends Vue { `top: ${(this.showStatusBar && this.statusBarTop ? this.statusBarHeight + 1 : 0)}px; position: relative;">` + `
` + `
` + `
` + diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js index 983a5a2c..85484f94 100644 --- a/client/store/modules/reader.js +++ b/client/store/modules/reader.js @@ -208,7 +208,7 @@ const webFonts = [ //---------------------------------------------------------------------------------------------------------- const settingDefaults = { textColor: '#000000', - backgroundColor: '#EBE2C9', + backgroundColor: '#ebe2c9', wallpaper: '', fontStyle: '',// 'italic' fontWeight: '',// 'bold' @@ -230,6 +230,8 @@ const settingDefaults = { dualIndentLR: 10,// px, отступ слева и справа внутри страницы в двухстраничном режиме dualDivWidth: 2,// px, ширина разделителя dualDivHeight: 100,// процент, высота разделителя + dualDivColorAsText: true,//цвет как у текста + dualDivColor: '#000000', dualDivColorAlpha: 0.7,// прозрачность разделителя dualDivStrokeFill: 1,// px, заполнение пунктира dualDivStrokeGap: 1,// px, промежуток пунктира @@ -238,6 +240,8 @@ const settingDefaults = { showStatusBar: true, statusBarTop: false,// top, bottom statusBarHeight: 19,// px + statusBarColorAsText: true,//цвет как у текста + statusBarColor: '#000000', statusBarColorAlpha: 0.4, statusBarClickOpen: true,