|
@@ -2,7 +2,7 @@
|
|
|
<div class="column no-wrap">
|
|
|
<div v-show="toolBarActive" ref="header" class="header">
|
|
|
<div ref="buttons" class="row justify-between no-wrap">
|
|
|
- <div>
|
|
|
+ <div class="row no-wrap">
|
|
|
<button ref="loader" v-ripple class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')">
|
|
|
<q-icon name="la la-arrow-left" size="32px" />
|
|
|
<q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">
|
|
@@ -29,7 +29,8 @@
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
- <div>
|
|
|
+ <div class="row no-wrap">
|
|
|
+ <div class="space"></div>
|
|
|
<button v-show="showToolButton['undoAction']" ref="undoAction" v-ripple class="tool-button" :class="buttonActiveClass('undoAction')" @click="buttonClick('undoAction')">
|
|
|
<q-icon name="la la-angle-left" size="32px" />
|
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
|
@@ -104,9 +105,10 @@
|
|
|
{{ rstore.readerActions['recentBooks'] }}
|
|
|
</q-tooltip>
|
|
|
</button>
|
|
|
+ <div class="space"></div>
|
|
|
</div>
|
|
|
|
|
|
- <div>
|
|
|
+ <div class="row no-wrap">
|
|
|
<button v-show="showToolButton['clickControl']" ref="clickControl" v-ripple class="tool-button" :class="buttonActiveClass('clickControl')" @click="buttonClick('clickControl')">
|
|
|
<q-icon name="la la-mouse" size="32px" />
|
|
|
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
|
@@ -351,8 +353,6 @@ class Reader {
|
|
|
}
|
|
|
|
|
|
mounted() {
|
|
|
- this.updateHeaderMinWidth();
|
|
|
-
|
|
|
(async() => {
|
|
|
await wallpaperStorage.init();
|
|
|
await bookManager.init(this.settings);
|
|
@@ -416,8 +416,6 @@ class Reader {
|
|
|
return this.readerActionByKeyCode[utils.keyEventToCode(event)];
|
|
|
}
|
|
|
|
|
|
- this.updateHeaderMinWidth();
|
|
|
-
|
|
|
this.loadWallpapers();//no await
|
|
|
}
|
|
|
|
|
@@ -484,17 +482,6 @@ class Reader {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- updateHeaderMinWidth() {
|
|
|
- const showButtonCount = Object.values(this.showToolButton).reduce((a, b) => a + (b ? 1 : 0), 0);
|
|
|
- if (this.$refs.buttons)
|
|
|
- this.$refs.buttons.style.minWidth = 65*showButtonCount + 'px';
|
|
|
- (async() => {
|
|
|
- await utils.sleep(1000);
|
|
|
- if (this.$refs.header)
|
|
|
- this.$refs.header.style.overflowX = 'auto';
|
|
|
- })();
|
|
|
- }
|
|
|
-
|
|
|
checkSetStorageAccessKey() {
|
|
|
const q = this.$route.query;
|
|
|
|
|
@@ -1435,12 +1422,33 @@ export default vueComponent(Reader);
|
|
|
|
|
|
<style scoped>
|
|
|
.header {
|
|
|
+ height: 50px;
|
|
|
padding-left: 5px;
|
|
|
padding-right: 5px;
|
|
|
background-color: #1B695F;
|
|
|
color: #000;
|
|
|
- overflow: hidden;
|
|
|
- height: 50px;
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+ scrollbar-color: #c49a60 #e4e4e4;
|
|
|
+}
|
|
|
+
|
|
|
+.header::-webkit-scrollbar {
|
|
|
+ height: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.header::-webkit-scrollbar-track {
|
|
|
+ background-color: #e4e4e4;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.header::-webkit-scrollbar-thumb {
|
|
|
+ background-color: #c49a60;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 2px solid #e4e4e4;
|
|
|
+}
|
|
|
+
|
|
|
+.header::-webkit-scrollbar-thumb:hover {
|
|
|
+ background-color: #b48a50;
|
|
|
}
|
|
|
|
|
|
.main {
|