Добавлены подсказки к кнопкам

client/components/Reader/RecentBooksPage/RecentBooksPage.vue

@@ -11,12 +11,32 @@
 
         <div id="vs-container" ref="vsContainer" class="recent-books-scroll col">
             <div ref="header" class="scroll-header row bg-blue-2">
-                <q-btn class="bg-white" rounded style="width: 35px; height: 35px; margin: 6px 6px 0px 6px" @click="showSameBookClick">
+                <q-btn class="tool-button" round @click="showSameBookClick">
                     <q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': showSameBook}" color="green-8" size="24px" />
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        Показать/скрыть версии книг
+                    </q-tooltip>
                 </q-btn>
 
-                <q-btn class="bg-white" rounded style="width: 35px; height: 35px; margin: 6px 6px 0px 6px" @click="scrollToActiveBook">
+                <q-btn class="tool-button" round @click="scrollToBegin">
+                    <q-icon name="la la-arrow-up" color="green-8" size="24px" />
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        В начало списка
+                    </q-tooltip>
+                </q-btn>
+
+                <q-btn class="tool-button" round @click="scrollToEnd">
+                    <q-icon name="la la-arrow-down" color="green-8" size="24px" />
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        В конец списка
+                    </q-tooltip>
+                </q-btn>
+
+                <q-btn class="tool-button" round @click="scrollToActiveBook">
                     <q-icon name="la la-location-arrow" color="green-8" size="24px" />
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                        На текущую книгу
+                    </q-tooltip>
                 </q-btn>
 
                 <q-input 
@@ -546,6 +566,26 @@ class RecentBooksPage {
         }
     }
 
+    async scrollToBegin() {
+        this.lockScroll = true;
+        try {
+            this.$refs.virtualScroll.scrollTo(0, 'center');
+        } finally {
+            await utils.sleep(100);
+            this.lockScroll = false;
+        }
+    }
+
+    async scrollToEnd() {
+        this.lockScroll = true;
+        try {
+            this.$refs.virtualScroll.scrollTo(this.tableData.length, 'center');
+        } finally {
+            await utils.sleep(100);
+            this.lockScroll = false;
+        }
+    }
+
     close() {
         this.$emit('recent-books-close');
     }
@@ -575,6 +615,7 @@ export default vueComponent(RecentBooksPage);
     z-index: 1;
     top: 0;
     border-bottom: 2px solid #aaaaaa;
+    padding-left: 5px;
 }
 
 .table-row {
@@ -634,4 +675,13 @@ export default vueComponent(RecentBooksPage);
     border: 1px solid #cccccc;
     border-right: 0;
 }
+
+.tool-button {
+    min-width: 30px;
+    width: 30px;
+    min-height: 30px;
+    height: 30px;
+    margin: 10px 6px 0px 3px;
+    background-color: white;
+}
 </style>