deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Добавил цвета для статусбара и разделителя

Browse Source
This commit is contained in:
Book Pauk
2021-02-09 18:43:43 +07:00
parent b93dd0a59e
commit f597c603bf
6 changed files with 112 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/components/Reader/TextPage/DrawHelper.js
View File

@@ -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 = `<div class="layout" style="` +
`width: ${this.realWidth}px; height: ${statusBarHeight}px; ` +
`color: ${this.statusBarColor}">`;
`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')}`;

14
client/components/Reader/TextPage/TextPage.vue
View File

@@ -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;">` +
`<div class="fit row justify-center items-center no-wrap">` +
`<div style="height: ${Math.round(this.scrollHeight*this.dualDivHeight/100)}px; width: ${this.dualDivWidth}px; ` +
`box-shadow: 0 0 ${this.dualDivShadowWidth}px ${this.dualDivColor}; ` +
`box-shadow: 0 0 ${this.dualDivShadowWidth}px ${this.dualDivRgbaColor}; ` +
`background-image: url(&quot;data:image/svg+xml;utf8,<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'>` +
`<line x1='${this.dualDivWidth/2}' y1='0' x2='${this.dualDivWidth/2}' y2='100%' stroke='${this.dualDivColor}' ` +
`<line x1='${this.dualDivWidth/2}' y1='0' x2='${this.dualDivWidth/2}' y2='100%' stroke='${this.dualDivRgbaColor}' ` +
`stroke-width='${this.dualDivWidth}' stroke-dasharray='${this.dualDivStrokeFill} ${this.dualDivStrokeGap}'/>` +
`</svg>&quot;);">` +
`</div>` +