Добавлена настройка "Многострочная панель" для размещения кнопок в

несколько рядов на тулбаре

client/components/Reader/Reader.vue

@@ -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 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 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="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>
-
-                        <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>
-
-                <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>
+
+                    <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="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;

client/components/Reader/SettingsPage/ToolBarTab/ToolBarTab.vue

@@ -4,6 +4,15 @@
             Отображение
         </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="sets-label label"></div>
             <q-checkbox v-model="form.toolBarHideOnScroll" size="xs" label="Скрывать/показывать панель при прокрутке">

client/store/modules/reader.js

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