From c490e799ba20e66c66f88d4381ad830eca3eaf77 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 16 Jan 2020 16:53:15 +0800
Subject: [PATCH] feat(browse book): add button to read book when hovering on
 thumbnail

related to #67
---
 komga-webui/src/components/BrowseBook.vue | 30 +++++++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/komga-webui/src/components/BrowseBook.vue b/komga-webui/src/components/BrowseBook.vue
index dfe2b82a1..7d4a6554e 100644
--- a/komga-webui/src/components/BrowseBook.vue
+++ b/komga-webui/src/components/BrowseBook.vue
@@ -33,11 +33,31 @@
     <v-container fluid class="pa-6">
       <v-row>
         <v-col cols="4" sm="4" md="auto" lg="auto" xl="auto">
-          <v-img :src="thumbnailUrl"
-                 lazy-src="../assets/cover.svg"
-                 max-height="300"
-                 max-width="212"
-          />
+          <v-hover>
+            <template v-slot:default="{ hover }">
+              <v-img :src="thumbnailUrl"
+                     lazy-src="../assets/cover.svg"
+                     max-height="300"
+                     max-width="212"
+              >
+                <v-fade-transition>
+                  <v-overlay
+                    v-if="hover && book.media.status === 'READY'"
+                    absolute
+                    color="grey darken-4"
+                  >
+                    <v-btn fab
+                           x-large
+                           color="accent"
+                           :to="{name: 'read-book', params: { bookId: bookId}}"
+                    >
+                      <v-icon>mdi-book-open-page-variant</v-icon>
+                    </v-btn>
+                  </v-overlay>
+                </v-fade-transition>
+              </v-img>
+            </template>
+          </v-hover>
 
         </v-col>
         <v-col cols="8" sm="8" md="auto" lg="auto" xl="auto">