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

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

client/components/Reader/Reader.vue

@@ -1,8 +1,7 @@
 <template>
     <div class="column no-wrap">
         <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')">
                     <q-icon name="la la-arrow-left" size="32px" />
                     <q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">
@@ -27,9 +26,9 @@
                         {{ rstore.readerActions['help'] }}
                     </q-tooltip>
                 </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')">
                     <q-icon name="la la-angle-left" size="32px" />
@@ -113,9 +112,9 @@
                     </q-tooltip>
                 </button>
                 <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" />
                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
@@ -136,7 +135,6 @@
                 </button>
             </div>
         </div>
-        </div>
 
         <div class="main col row relative-position">
             <keep-alive>
@@ -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: 5px 5px 0px 5px;
-    padding-left: 5px;
-    padding-right: 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: [],