From 237536e7be4f3236ca8e2efd6344530fd6436884 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Mon, 19 Apr 2021 17:25:46 +0800
Subject: [PATCH] refactor: use RtlIcon

---
 komga-webui/src/components/HorizontalScroller.vue | 10 +++++-----
 komga-webui/src/views/BrowseBook.vue              | 13 +++++++------
 komga-webui/src/views/BrowseSeries.vue            |  5 +++--
 3 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/komga-webui/src/components/HorizontalScroller.vue b/komga-webui/src/components/HorizontalScroller.vue
index 3c7ea455d..2069e0fb2 100644
--- a/komga-webui/src/components/HorizontalScroller.vue
+++ b/komga-webui/src/components/HorizontalScroller.vue
@@ -7,14 +7,12 @@
       <v-btn icon
              :disabled="!canScrollBackward"
              @click="doScroll('backward')">
-        <v-icon v-if="$vuetify.rtl">mdi-chevron-right</v-icon>
-        <v-icon v-else>mdi-chevron-left</v-icon>
+        <rtl-icon icon="mdi-chevron-left" rtl="mdi-chevron-right"/>
       </v-btn>
       <v-btn icon
              :disabled="!canScrollForward"
              @click="doScroll('forward')">
-        <v-icon v-if="$vuetify.rtl">mdi-chevron-left</v-icon>
-        <v-icon v-else>mdi-chevron-right</v-icon>
+        <rtl-icon icon="mdi-chevron-right" rtl="mdi-chevron-left"/>
       </v-btn>
     </div>
 
@@ -31,9 +29,11 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import RtlIcon from "@/components/RtlIcon.vue";
 
 export default Vue.extend({
   name: 'HorizontalScroller',
+  components: {RtlIcon},
   data: function () {
     const uniqueId = this.$_.uniqueId()
     return {
@@ -65,7 +65,7 @@ export default Vue.extend({
         let increment = (this.container.clientWidth - this.adjustment)
         let scrollLeft = Math.round(this.container.scrollLeft)
         let target
-        if (this.$vuetify.rtl){
+        if (this.$vuetify.rtl) {
           if (direction === 'backward')
             target = scrollLeft + increment
           else
diff --git a/komga-webui/src/views/BrowseBook.vue b/komga-webui/src/views/BrowseBook.vue
index 869c85749..75b68bf1d 100644
--- a/komga-webui/src/views/BrowseBook.vue
+++ b/komga-webui/src/views/BrowseBook.vue
@@ -29,8 +29,7 @@
         :disabled="$_.isEmpty(siblingPrevious)"
         :to="{ name: 'browse-book', params: { bookId: previousId }, query: { context: context.origin, contextId: context.id}  }"
       >
-        <v-icon v-if="$vuetify.rtl">mdi-chevron-right</v-icon>
-        <v-icon v-else>mdi-chevron-left</v-icon>
+        <rtl-icon icon="mdi-chevron-left" rtl="mdi-chevron-right"/>
       </v-btn>
 
       <!--   List of all books in context (series/readlist) for navigation   -->
@@ -67,8 +66,7 @@
         :disabled="$_.isEmpty(siblingNext)"
         :to="{ name: 'browse-book', params: { bookId: nextId }, query: { context: context.origin, contextId: context.id}  }"
       >
-        <v-icon v-if="$vuetify.rtl">mdi-chevron-left</v-icon>
-        <v-icon v-else>mdi-chevron-right</v-icon>
+        <rtl-icon icon="mdi-chevron-right" rtl="mdi-chevron-left"/>
       </v-btn>
     </toolbar-sticky>
 
@@ -104,7 +102,9 @@
               {{ book.metadata.number }} · {{ book.media.pagesCount }} {{ $t('common.pages') }}
             </v-col>
             <v-col cols="auto" v-if="book.metadata.releaseDate">
-              {{ new Intl.DateTimeFormat($i18n.locale, { dateStyle: 'long' }).format(new Date(book.metadata.releaseDate)) }}
+              {{
+                new Intl.DateTimeFormat($i18n.locale, {dateStyle: 'long'}).format(new Date(book.metadata.releaseDate))
+              }}
             </v-col>
           </v-row>
 
@@ -295,10 +295,11 @@ import ReadMore from "@/components/ReadMore.vue";
 import VueHorizontal from "vue-horizontal";
 import {authorRoles} from "@/types/author-roles";
 import {convertErrorCodes} from "@/functions/error-codes";
+import RtlIcon from "@/components/RtlIcon.vue";
 
 export default Vue.extend({
   name: 'BrowseBook',
-  components: {ReadMore, ToolbarSticky, ItemCard, BookActionsMenu, ReadListsExpansionPanels, VueHorizontal},
+  components: {ReadMore, ToolbarSticky, ItemCard, BookActionsMenu, ReadListsExpansionPanels, VueHorizontal, RtlIcon},
   data: () => {
     return {
       authorRoles,
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index e6f091579..2f337858f 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -6,8 +6,7 @@
              :title="$t('common.go_to_library')"
              :to="{name:'browse-libraries', params: {libraryId: series.libraryId }}"
       >
-        <v-icon v-if="$vuetify.rtl">mdi-arrow-right</v-icon>
-        <v-icon v-else>mdi-arrow-left</v-icon>
+        <rtl-icon icon="mdi-arrow-left" rtl="mdi-arrow-right"/>
       </v-btn>
 
       <series-actions-menu v-if="series"
@@ -389,6 +388,7 @@ import {groupAuthorsByRole} from "@/functions/authors";
 import ReadMore from "@/components/ReadMore.vue";
 import {authorRoles, authorRolesSeries} from "@/types/author-roles";
 import VueHorizontal from "vue-horizontal";
+import RtlIcon from "@/components/RtlIcon.vue";
 
 const tags = require('language-tags')
 
@@ -409,6 +409,7 @@ export default Vue.extend({
     SortList,
     ReadMore,
     VueHorizontal,
+    RtlIcon,
   },
   data: function () {
     return {