fix: sort btn action ep in rtl

manga-raiku · Dec 21, 2023 · c4cc65c · c4cc65c
1 parent df36fd0
commit c4cc65c
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 50 deletions.
diff --git a/...omponents/truyen-tranh/ep/BtnDownload.vue → ...s/truyen-tranh/ep/actions/BtnDownload.vue b/...omponents/truyen-tranh/ep/BtnDownload.vue → ...s/truyen-tranh/ep/actions/BtnDownload.vue
diff --git a/src/components/truyen-tranh/ep/actions/ButtonNext.vue b/src/components/truyen-tranh/ep/actions/ButtonNext.vue
@@ -0,0 +1,39 @@
+<template>
+  <q-btn
+    no-caps
+    unelevated
+    :rounded="!$q.screen.lt.md"
+    :round="$q.screen.lt.md"
+    :disable="!nextEpisode"
+    :to="nextEpisode?.value.route"
+    :replace="APP_STANDALONE"
+  >
+    <template v-if="$q.screen.lt.md">
+      <i-solar-alt-arrow-left-line-duotone v-if="rtl" class="size-1.8em" />
+      <i-solar-alt-arrow-right-line-duotone v-else class="size-1.8em" />
+    </template>
+    <template v-else>{{ $t("sau") }}</template>
+
+    <q-tooltip
+      anchor="bottom middle"
+      self="top middle"
+      class="bg-dark text-14px text-weight-medium"
+      transition-show="jump-up"
+      transition-hide="jump-down"
+      >{{ $t("chuong-sau-name", [nextEpisode?.value.name]) }}</q-tooltip
+    >
+  </q-btn>
+</template>
+
+<script lang="ts" setup>
+import type { Chapter } from "raiku-pgs/plugin"
+import { APP_STANDALONE } from "src/constants"
+
+defineProps<{
+  nextEpisode?: {
+    readonly index: number
+    readonly value: Chapter
+  }
+  rtl?: boolean
+}>()
+</script>
diff --git a/src/components/truyen-tranh/ep/actions/ButtonPrev.vue b/src/components/truyen-tranh/ep/actions/ButtonPrev.vue
@@ -0,0 +1,39 @@
+<template>
+  <q-btn
+    no-caps
+    unelevated
+    :rounded="!$q.screen.lt.md"
+    :round="$q.screen.lt.md"
+    :disable="!prevEpisode"
+    :to="prevEpisode?.value.route"
+    :replace="APP_STANDALONE"
+  >
+    <template v-if="$q.screen.lt.md">
+      <i-solar-alt-arrow-right-line-duotone v-if="rtl" class="size-1.8em" />
+      <i-solar-alt-arrow-left-line-duotone v-else class="size-1.8em" />
+    </template>
+    <template v-else>{{ $t("truoc") }}</template>
+
+    <q-tooltip
+      anchor="bottom middle"
+      self="top middle"
+      class="bg-dark text-14px text-weight-medium"
+      transition-show="jump-up"
+      transition-hide="jump-down"
+      >{{ $t("chuong-truoc-name", [prevEpisode?.value.name]) }}</q-tooltip
+    >
+  </q-btn>
+</template>
+
+<script lang="ts" setup>
+import type { Chapter } from "raiku-pgs/plugin"
+import { APP_STANDALONE } from "src/constants"
+
+defineProps<{
+  prevEpisode?: {
+    readonly index: number
+    readonly value: Chapter
+  }
+  rtl?: boolean
+}>()
+</script>
diff --git a/src/pages/~[sourceId]/comic/[comic]/chap-[chap].vue b/src/pages/~[sourceId]/comic/[comic]/chap-[chap].vue
@@ -218,56 +218,14 @@ meta:
         />
       </div>
 
-      <q-btn
-        no-caps
-        unelevated
-        :rounded="!$q.screen.lt.md"
-        :round="$q.screen.lt.md"
-        :disable="!prevEpisode"
-        class="<md:order-1"
-        :to="prevEpisode?.value.route"
-        :replace="APP_STANDALONE"
-      >
-        <i-solar-alt-arrow-left-line-duotone
-          v-if="$q.screen.lt.md && scrollingMode"
-          class="size-1.8em"
-        />
-        <template v-else>{{ $t("truoc") }}</template>
-
-        <q-tooltip
-          anchor="bottom middle"
-          self="top middle"
-          class="bg-dark text-14px text-weight-medium"
-          transition-show="jump-up"
-          transition-hide="jump-down"
-          >{{ $t("chuong-truoc-name", [prevEpisode?.value.name]) }}</q-tooltip
-        >
-      </q-btn>
-      <q-btn
-        no-caps
-        unelevated
-        :rounded="!$q.screen.lt.md"
-        :round="$q.screen.lt.md"
-        :disable="!nextEpisode"
-        class="<md:order-3"
-        :to="nextEpisode?.value.route"
-        :replace="APP_STANDALONE"
-      >
-        <i-solar-alt-arrow-right-line-duotone
-          v-if="$q.screen.lt.md && scrollingMode"
-          class="size-1.8em"
-        />
-        <template v-else>{{ $t("sau") }}</template>
-
-        <q-tooltip
-          anchor="bottom middle"
-          self="top middle"
-          class="bg-dark text-14px text-weight-medium"
-          transition-show="jump-up"
-          transition-hide="jump-down"
-          >{{ $t("chuong-sau-name", [nextEpisode?.value.name]) }}</q-tooltip
-        >
-      </q-btn>
+      <template v-if="rightToLeft">
+        <ButtonNext :next-episode="nextEpisode" rtl class="<md:order-1" />
+        <ButtonPrev :prev-episode="prevEpisode" rtl class="<md:order-3" />
+      </template>
+      <template v-else>
+        <ButtonPrev :prev-episode="prevEpisode" class="<md:order-1" />
+        <ButtonNext :next-episode="nextEpisode" class="<md:order-3" />
+      </template>
 
       <div class="md:!hidden w-full order-4" />