Browse Source

Bug: the position of "next" and "previous" buttons in forms is confusing for RTL languages

Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: sheldon-welinga <sheldonwelinga@gmail.com>
Co-authored-by: gitstart_bot <gitstart_bot@users.noreply.github.com>
pull/6039/head
gitstart 1 year ago
parent
commit
feb5287950
  1. 14
      packages/nc-gui/components/smartsheet/Pagination.vue

14
packages/nc-gui/components/smartsheet/Pagination.vue

@ -1,10 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import { ChangePageInj, PaginationDataInj, computed, iconMap, inject } from '#imports' import { ChangePageInj, PaginationDataInj, computed, iconMap, inject, useGlobal } from '#imports'
import type { StoredState } from '~/composables/useGlobal/types'
const props = defineProps<{ const props = defineProps<{
alignCountOnRight?: boolean alignCountOnRight?: boolean
}>() }>()
const { lang } = useGlobal()
const rtlLanguages: Array<StoredState['lang']> = ['ar', 'fa']
const paginatedData = inject(PaginationDataInj)! const paginatedData = inject(PaginationDataInj)!
const changePage = inject(ChangePageInj)! const changePage = inject(ChangePageInj)!
@ -19,6 +23,8 @@ const page = computed({
changePage?.(p) changePage?.(p)
}, },
}) })
const isRTLLanguage = computed(() => rtlLanguages.includes(lang.value))
</script> </script>
<template> <template>
@ -39,6 +45,7 @@ const page = computed({
v-model:page-size="size" v-model:page-size="size"
size="small" size="small"
class="!text-xs !m-1 nc-pagination" class="!text-xs !m-1 nc-pagination"
:class="{ 'rtl-pagination': isRTLLanguage }"
:total="count" :total="count"
show-less-items show-less-items
:show-size-changer="false" :show-size-changer="false"
@ -77,4 +84,9 @@ const page = computed({
:deep(.ant-pagination-item-link) { :deep(.ant-pagination-item-link) {
@apply text-gray-500 flex items-center justify-center; @apply text-gray-500 flex items-center justify-center;
} }
:deep(.rtl-pagination .ant-pagination-prev .ant-pagination-item-link),
:deep(.rtl-pagination .ant-pagination-next .ant-pagination-item-link) {
@apply transform rotate-180;
}
</style> </style>

Loading…
Cancel
Save