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
2022-12-16 21:02:07 +07:00
parent a7289cda74
commit f5cd6ebdbc
3 changed files with 145 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
client/components/Reader/Reader.vue
View File

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

9
client/components/Reader/SettingsPage/ToolBarTab/ToolBarTab.vue
View File

@@ -4,6 +4,15 @@
Отображение Отображение
</div> </div>
<div class="item row no-wrap">
<div class="sets-label label"></div>
<q-checkbox v-model="form.toolBarMultiLine" size="xs" label="Многострочная панель">
<q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
Размещать кнопки на панели в несколько строк, если они не помещаются в одну строку
</q-tooltip>
</q-checkbox>
</div>
<div class="item row no-wrap"> <div class="item row no-wrap">
<div class="sets-label label"></div> <div class="sets-label label"></div>
<q-checkbox v-model="form.toolBarHideOnScroll" size="xs" label="Скрывать/показывать панель при прокрутке"> <q-checkbox v-model="form.toolBarHideOnScroll" size="xs" label="Скрывать/показывать панель при прокрутке">

1
client/store/modules/reader.js
View File

@@ -186,6 +186,7 @@ const settingDefaults = {
fontShifts: {}, fontShifts: {},
showToolButton: {}, showToolButton: {},
toolBarHideOnScroll: false, toolBarHideOnScroll: false,
toolBarMultiLine: true,
userHotKeys: {}, userHotKeys: {},
userWallpapers: [], userWallpapers: [],