refactor: use RtlIcon

This commit is contained in:
Gauthier Roebroeck 2021-04-19 17:25:46 +08:00
parent 13b304dd14
commit 237536e7be
3 changed files with 15 additions and 13 deletions

View file

@ -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

View file

@ -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,

View file

@ -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 {