From d03aceae1a9195885a7890a121dbfad24f4ff3d6 Mon Sep 17 00:00:00 2001
From: Ben Kuskopf <kussie@gmail.com>
Date: Thu, 20 May 2021 19:25:11 +1000
Subject: [PATCH] feat(webui): add back button on book view

* Add a back to arrow to the navigation on the book page to return to the books series

* Update BrowseBook.vue

* feat: conditional back button depending on context

also uses proper tooltip instead of title

Co-authored-by: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
---
 komga-webui/src/locales/en.json        |  2 ++
 komga-webui/src/views/BrowseBook.vue   | 26 ++++++++++++++++++++++++++
 komga-webui/src/views/BrowseSeries.vue | 17 +++++++++++------
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/komga-webui/src/locales/en.json b/komga-webui/src/locales/en.json
index c284e16db..68747e879 100644
--- a/komga-webui/src/locales/en.json
+++ b/komga-webui/src/locales/en.json
@@ -163,6 +163,8 @@
     "filter_no_matches": "The active filter has no matches",
     "genre": "Genre",
     "go_to_library": "Go to library",
+    "go_to_series": "Go to series",
+    "go_to_readlist": "Go to read list",
     "locale_name": "English",
     "locale_rtl": "false",
     "n_selected": "{count} selected",
diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue
index d6f0a4ab9..43532f59c 100644
--- a/komga-webui/src/views/BrowseBook.vue
+++ b/komga-webui/src/views/BrowseBook.vue
@@ -1,6 +1,20 @@
 <template>
   <div v-if="!$_.isEmpty(book)">
     <toolbar-sticky>
+      <v-tooltip bottom :disabled="!isAdmin">
+        <template v-slot:activator="{ on }">
+          <v-btn icon
+                 v-on="on"
+                 :to="parent.route"
+          >
+            <v-icon v-if="$vuetify.rtl">mdi-arrow-right</v-icon>
+            <v-icon v-else>mdi-arrow-left</v-icon>
+          </v-btn>
+        </template>
+        <span v-if="contextReadList">{{ $t('common.go_to_readlist') }}</span>
+        <span v-else>{{ $t('common.go_to_series') }}</span>
+      </v-tooltip>
+
       <!--   Action menu   -->
       <book-actions-menu v-if="book"
                          :book="book"
@@ -405,6 +419,18 @@ export default Vue.extend({
     mediaComment(): string {
       return convertErrorCodes(this.book.media.comment)
     },
+    parent(): object {
+      if (this.contextReadList)
+        return {
+          name: this.contextName,
+          route: {name: 'browse-readlist', params: {readListId: this.context.id}},
+        }
+      else
+        return {
+          name: this.series.name,
+          route: {name: 'browse-series', params: {seriesId: this.book.seriesId}},
+        }
+    },
   },
   methods: {
     libraryDeleted(event: EventLibraryDeleted) {
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index bedf7fd4b..bf4381551 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -2,12 +2,17 @@
   <div v-if="!$_.isEmpty(series)">
     <toolbar-sticky v-if="selectedBooks.length === 0">
       <!--   Go back to parent library   -->
-      <v-btn icon
-             :title="$t('common.go_to_library')"
-             :to="{name:'browse-libraries', params: {libraryId: series.libraryId }}"
-      >
-        <rtl-icon icon="mdi-arrow-left" rtl="mdi-arrow-right"/>
-      </v-btn>
+      <v-tooltip bottom :disabled="!isAdmin">
+        <template v-slot:activator="{ on }">
+          <v-btn icon
+                 v-on="on"
+                 :to="{name:'browse-libraries', params: {libraryId: series.libraryId }}"
+          >
+            <rtl-icon icon="mdi-arrow-left" rtl="mdi-arrow-right"/>
+          </v-btn>
+        </template>
+        <span>{{ $t('common.go_to_library') }}</span>
+      </v-tooltip>
 
       <series-actions-menu v-if="series"
                            :series="series"