Добавлена настройка "Многострочная панель" для размещения кнопок в
несколько рядов на тулбаре
This commit is contained in:
Book Pauk
@@ -1,140 +1,138 @@
|
||||
<template>
|
||||
<div class="column no-wrap">
|
||||
<div v-show="toolBarActive" ref="header" class="header">
|
||||
<div ref="buttons" class="row justify-between no-wrap">
|
||||
<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%">
|
||||
{{ rstore.readerActions['loader'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['loadFile']" ref="loadFile" v-ripple class="tool-button" :class="buttonActiveClass('loadFile')" @click="buttonClick('loadFile')">
|
||||
<q-icon name="la la-caret-square-up" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['loadFile'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['loadBuffer']" ref="loadBuffer" v-ripple class="tool-button" :class="buttonActiveClass('loadBuffer')" @click="buttonClick('loadBuffer')">
|
||||
<q-icon name="la la-comment" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['loadBuffer'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['help']" ref="help" v-ripple class="tool-button" :class="buttonActiveClass('help')" @click="buttonClick('help')">
|
||||
<q-icon name="la la-question" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['help'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
</div>
|
||||
<div ref="buttons" class="row" :class="{'no-wrap': !toolBarMultiLine}">
|
||||
<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%">
|
||||
{{ rstore.readerActions['loader'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['loadFile']" ref="loadFile" v-ripple class="tool-button" :class="buttonActiveClass('loadFile')" @click="buttonClick('loadFile')">
|
||||
<q-icon name="la la-caret-square-up" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['loadFile'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['loadBuffer']" ref="loadBuffer" v-ripple class="tool-button" :class="buttonActiveClass('loadBuffer')" @click="buttonClick('loadBuffer')">
|
||||
<q-icon name="la la-comment" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['loadBuffer'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['help']" ref="help" v-ripple class="tool-button" :class="buttonActiveClass('help')" @click="buttonClick('help')">
|
||||
<q-icon name="la la-question" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['help'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
|
||||
<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%">
|
||||
{{ rstore.readerActions['undoAction'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['redoAction']" ref="redoAction" v-ripple class="tool-button" :class="buttonActiveClass('redoAction')" @click="buttonClick('redoAction')">
|
||||
<q-icon name="la la-angle-right" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['redoAction'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<div class="space"></div>
|
||||
<button v-show="showToolButton['fullScreen']" ref="fullScreen" v-ripple class="tool-button" :class="buttonActiveClass('fullScreen')" @click="buttonClick('fullScreen')">
|
||||
<q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['fullScreen'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['scrolling']" ref="scrolling" v-ripple class="tool-button" :class="buttonActiveClass('scrolling')" @click="buttonClick('scrolling')">
|
||||
<q-icon name="la la-film" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['scrolling'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['setPosition']" ref="setPosition" v-ripple class="tool-button" :class="buttonActiveClass('setPosition')" @click="buttonClick('setPosition')">
|
||||
<q-icon name="la la-angle-double-right" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['setPosition'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['search']" ref="search" v-ripple class="tool-button" :class="buttonActiveClass('search')" @click="buttonClick('search')">
|
||||
<q-icon name="la la-search" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['search'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['copyText']" ref="copyText" v-ripple class="tool-button" :class="buttonActiveClass('copyText')" @click="buttonClick('copyText')">
|
||||
<q-icon name="la la-copy" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['copyText'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['convOptions']" ref="convOptions" v-ripple class="tool-button" :class="buttonActiveClass('convOptions')" @click="buttonClick('convOptions')">
|
||||
<q-icon name="la la-magic" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['convOptions'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['refresh']" ref="refresh" v-ripple class="tool-button" :class="buttonActiveClass('refresh')" @click="buttonClick('refresh')">
|
||||
<q-icon name="la la-sync" size="32px" :class="{clear: !showRefreshIcon}" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['refresh'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<div v-show="showToolButton['libs']" class="space"></div>
|
||||
<button v-show="showToolButton['libs']" ref="libs" v-ripple class="tool-button" :class="buttonActiveClass('libs')" @click="buttonClick('libs')">
|
||||
<q-icon name="la la-sitemap" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['libs'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<div class="space"></div>
|
||||
<button v-show="showToolButton['contents']" ref="contents" v-ripple class="tool-button" :class="buttonActiveClass('contents')" @click="buttonClick('contents')">
|
||||
<q-icon name="la la-list" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['contents'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['recentBooks']" ref="recentBooks" v-ripple class="tool-button" :class="buttonActiveClass('recentBooks')" @click="buttonClick('recentBooks')">
|
||||
<div v-show="bothBucEnabled && needBookUpdateCount > 0" style="position: absolute">
|
||||
<div class="need-book-update-count">
|
||||
{{ needBookUpdateCount }}
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
|
||||
<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%">
|
||||
{{ rstore.readerActions['undoAction'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['redoAction']" ref="redoAction" v-ripple class="tool-button" :class="buttonActiveClass('redoAction')" @click="buttonClick('redoAction')">
|
||||
<q-icon name="la la-angle-right" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['redoAction'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<div class="space"></div>
|
||||
<button v-show="showToolButton['fullScreen']" ref="fullScreen" v-ripple class="tool-button" :class="buttonActiveClass('fullScreen')" @click="buttonClick('fullScreen')">
|
||||
<q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['fullScreen'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['scrolling']" ref="scrolling" v-ripple class="tool-button" :class="buttonActiveClass('scrolling')" @click="buttonClick('scrolling')">
|
||||
<q-icon name="la la-film" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['scrolling'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['setPosition']" ref="setPosition" v-ripple class="tool-button" :class="buttonActiveClass('setPosition')" @click="buttonClick('setPosition')">
|
||||
<q-icon name="la la-angle-double-right" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['setPosition'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['search']" ref="search" v-ripple class="tool-button" :class="buttonActiveClass('search')" @click="buttonClick('search')">
|
||||
<q-icon name="la la-search" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['search'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['copyText']" ref="copyText" v-ripple class="tool-button" :class="buttonActiveClass('copyText')" @click="buttonClick('copyText')">
|
||||
<q-icon name="la la-copy" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['copyText'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['convOptions']" ref="convOptions" v-ripple class="tool-button" :class="buttonActiveClass('convOptions')" @click="buttonClick('convOptions')">
|
||||
<q-icon name="la la-magic" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['convOptions'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['refresh']" ref="refresh" v-ripple class="tool-button" :class="buttonActiveClass('refresh')" @click="buttonClick('refresh')">
|
||||
<q-icon name="la la-sync" size="32px" :class="{clear: !showRefreshIcon}" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['refresh'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<div v-show="showToolButton['libs']" class="space"></div>
|
||||
<button v-show="showToolButton['libs']" ref="libs" v-ripple class="tool-button" :class="buttonActiveClass('libs')" @click="buttonClick('libs')">
|
||||
<q-icon name="la la-sitemap" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['libs'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<div class="space"></div>
|
||||
<button v-show="showToolButton['contents']" ref="contents" v-ripple class="tool-button" :class="buttonActiveClass('contents')" @click="buttonClick('contents')">
|
||||
<q-icon name="la la-list" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['contents'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['recentBooks']" ref="recentBooks" v-ripple class="tool-button" :class="buttonActiveClass('recentBooks')" @click="buttonClick('recentBooks')">
|
||||
<div v-show="bothBucEnabled && needBookUpdateCount > 0" style="position: absolute">
|
||||
<div class="need-book-update-count">
|
||||
{{ needBookUpdateCount }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<q-icon name="la la-book-open" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['recentBooks'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<div class="space"></div>
|
||||
</div>
|
||||
<q-icon name="la la-book-open" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['recentBooks'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<div class="space"></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%">
|
||||
{{ rstore.readerActions['clickControl'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['offlineMode']" ref="offlineMode" v-ripple class="tool-button" :class="buttonActiveClass('offlineMode')" @click="buttonClick('offlineMode')">
|
||||
<q-icon name="la la-unlink" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['offlineMode'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button ref="settings" v-ripple class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')">
|
||||
<q-icon name="la la-cog" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom left" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['settings'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col"></div>
|
||||
|
||||
<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%">
|
||||
{{ rstore.readerActions['clickControl'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button v-show="showToolButton['offlineMode']" ref="offlineMode" v-ripple class="tool-button" :class="buttonActiveClass('offlineMode')" @click="buttonClick('offlineMode')">
|
||||
<q-icon name="la la-unlink" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['offlineMode'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
<button ref="settings" v-ripple class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')">
|
||||
<q-icon name="la la-cog" size="32px" />
|
||||
<q-tooltip :delay="1500" anchor="bottom left" content-style="font-size: 80%">
|
||||
{{ rstore.readerActions['settings'] }}
|
||||
</q-tooltip>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -305,6 +303,8 @@ class Reader {
|
||||
showRefreshIcon = true;
|
||||
mostRecentBookReactive = null;
|
||||
showToolButton = {};
|
||||
toolBarHideOnScroll = false;
|
||||
toolBarMultiLine = false;
|
||||
|
||||
actionList = [];
|
||||
actionCur = -1;
|
||||
@@ -467,6 +467,7 @@ class Reader {
|
||||
this.blinkCachedLoad = settings.blinkCachedLoad;
|
||||
this.showToolButton = settings.showToolButton;
|
||||
this.toolBarHideOnScroll = settings.toolBarHideOnScroll;
|
||||
this.toolBarMultiLine = settings.toolBarMultiLine;
|
||||
this.enableSitesFilter = settings.enableSitesFilter;
|
||||
this.showNeedUpdateNotify = settings.showNeedUpdateNotify;
|
||||
this.splitToPara = settings.splitToPara;
|
||||
@@ -1649,9 +1650,7 @@ export default vueComponent(Reader);
|
||||
|
||||
<style scoped>
|
||||
.header {
|
||||
height: 50px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
padding: 5px 5px 0px 5px;
|
||||
background-color: #1B695F;
|
||||
color: #000;
|
||||
overflow-x: auto;
|
||||
@@ -1680,11 +1679,12 @@ export default vueComponent(Reader);
|
||||
}
|
||||
|
||||
.tool-button {
|
||||
margin: 0px 2px 0 2px;
|
||||
margin: 0px 2px 7px 2px;
|
||||
padding: 0;
|
||||
color: #3E843E;
|
||||
background-color: #E6EDF4;
|
||||
margin-top: 5px;
|
||||
min-height: 38px;
|
||||
min-width: 38px;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
border: 0;
|
||||
|
||||
Reference in New Issue
Block a user