Merge branch 'release/0.10.0-1'

client/components/Reader/Reader.vue

@@ -131,6 +131,9 @@ import ContentsPage from './ContentsPage/ContentsPage.vue';
 import ReaderDialogs from './ReaderDialogs/ReaderDialogs.vue';
 
 import bookManager from './share/bookManager';
+import wallpaperStorage from './share/wallpaperStorage';
+import dynamicCss from '../../share/dynamicCss';
+
 import rstore from '../../store/modules/reader';
 import readerApi from '../../api/reader';
 import miscApi from '../../api/misc';
@@ -327,6 +330,7 @@ class Reader extends Vue {
         this.pdfAsText = settings.pdfAsText;
         this.pdfQuality = settings.pdfQuality;
         this.dualPageMode = settings.dualPageMode;
+        this.userWallpapers = settings.userWallpapers;
 
         this.readerActionByKeyCode = utils.userHotKeysObjectSwap(settings.userHotKeys);
         this.$root.readerActionByKeyEvent = (event) => {
@@ -334,6 +338,30 @@ class Reader extends Vue {
         }
 
         this.updateHeaderMinWidth();
+        
+        this.loadWallpapers();//no await
+    }
+
+    //wallpaper css
+    async loadWallpapers() {
+        const wallpaperDataLength = await wallpaperStorage.getLength();
+        if (wallpaperDataLength !== this.wallpaperDataLength) {//оптимизация
+            this.wallpaperDataLength = wallpaperDataLength;
+
+            let newCss = '';
+            for (const wp of this.userWallpapers) {
+                const data = await wallpaperStorage.getData(wp.cssClass);
+
+                if (!data) {
+                    //здесь будем восстанавливать данные с сервера
+                }
+
+                if (data) {
+                    newCss += `.${wp.cssClass} {background: url(${data}) center; background-size: 100% 100%;}`;                
+                }
+            }
+            dynamicCss.replace('wallpapers', newCss);
+        }
     }
 
     async checkNewVersionAvailable() {

client/components/Reader/SettingsPage/include/ViewTab/Color.inc

@@ -78,7 +78,7 @@
         <q-btn class="q-ml-sm" round dense color="blue" icon="la la-plus" @click.stop="loadWallpaperFileClick">
             <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить файл обоев</q-tooltip>
         </q-btn>
-        <q-btn class="q-ml-sm" round dense color="blue" icon="la la-minus" @click.stop="delWallpaper" :disable="wallpaper.indexOf('user-paper') != 0">
+        <q-btn v-show="wallpaper.indexOf('user-paper') === 0" class="q-ml-sm" round dense color="blue" icon="la la-minus" @click.stop="delWallpaper">
             <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Удалить выбранные обои</q-tooltip>
         </q-btn>
     </div>

client/components/Reader/TextPage/DrawHelper.js

@@ -2,11 +2,11 @@ import {sleep} from '../../../share/utils';
 
 export default class DrawHelper {
     fontBySize(size) {
-        return `${size}px ${this.fontName}`;
+        return `${size}px '${this.fontName}'`;
     }
 
     fontByStyle(style) {
-        return `${style.italic ? 'italic' : this.fontStyle} ${style.bold ? 'bold' : this.fontWeight} ${this.fontSize}px ${this.fontName}`;
+        return `${style.italic ? 'italic' : this.fontStyle} ${style.bold ? 'bold' : this.fontWeight} ${this.fontSize}px '${this.fontName}'`;
     }
 
     measureText(text, style) {// eslint-disable-line no-unused-vars

client/components/Reader/TextPage/TextPage.vue

@@ -43,10 +43,8 @@ import _ from 'lodash';
 import './TextPage.css';
 
 import * as utils from '../../../share/utils';
-import dynamicCss from '../../../share/dynamicCss';
 
 import bookManager from '../share/bookManager';
-import wallpaperStorage from '../share/wallpaperStorage';
 import DrawHelper from './DrawHelper';
 import rstore from '../../../store/modules/reader';
 import {clickMap} from '../share/clickMap';
@@ -162,7 +160,7 @@ class TextPage extends Vue {
         const wideLetter = 'Щ';
 
         //preloaded fonts
-        this.fontList = [`12px ${this.fontName}`];
+        this.fontList = [`12px '${this.fontName}'`];
 
         //widths
         this.realWidth = this.$refs.main.clientWidth;
@@ -252,28 +250,6 @@ class TextPage extends Vue {
         //statusBar
         this.statusBarClickable = this.drawHelper.statusBarClickable(this.statusBarTop, this.statusBarHeight);
 
-        //wallpaper css, асинхронно
-        (async() => {
-            const wallpaperDataLength = await wallpaperStorage.getLength();
-            if (wallpaperDataLength !== this.wallpaperDataLength) {//оптимизация
-                this.wallpaperDataLength = wallpaperDataLength;
-
-                let newCss = '';
-                for (const wp of this.userWallpapers) {
-                    const data = await wallpaperStorage.getData(wp.cssClass);
-
-                    if (!data) {
-                        //здесь будем восстанавливать данные с сервера
-                    }
-
-                    if (data) {
-                        newCss += `.${wp.cssClass} {background: url(${data}) center; background-size: 100% 100%;}`;                
-                    }
-                }
-                dynamicCss.replace('wallpapers', newCss);
-            }
-        })();
-
         //parsed
         if (this.parsed) {
             let wideLine = wideLetter;
@@ -524,7 +500,7 @@ class TextPage extends Vue {
     }
 
     get font() {
-        return `${this.fontStyle} ${this.fontWeight} ${this.fontSize}px ${this.fontName}`;
+        return `${this.fontStyle} ${this.fontWeight} ${this.fontSize}px '${this.fontName}'`;
     }
 
     onPage1TransitionEnd() {