From 6e2dcd1832ab0d04843688dc1bb269a796ec0ff7 Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Mon, 14 Oct 2024 13:52:40 +0200 Subject: [PATCH] fix(MediaSettings): adjust transition direction based on language support Signed-off-by: DorraJaouad --- src/components/MediaSettings/MediaSettingsTabs.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/MediaSettings/MediaSettingsTabs.vue b/src/components/MediaSettings/MediaSettingsTabs.vue index 03a099ba5c4..6f5c59cbe87 100644 --- a/src/components/MediaSettings/MediaSettingsTabs.vue +++ b/src/components/MediaSettings/MediaSettingsTabs.vue @@ -7,6 +7,8 @@ import { computed, ref } from 'vue' import type { Component } from 'vue' +import { isRTL } from '@nextcloud/l10n' + import NcButton from '@nextcloud/vue/dist/Components/NcButton.js' import TransitionExpand from './TransitionExpand.vue' @@ -29,6 +31,8 @@ const emit = defineEmits<{ /** Whether the tab panel is open */ const isOpen = ref(!!props.active) +const isRTLDirection = isRTL() + // A11y ReferenceIDs const randomId = Math.random().toString(36).substring(7) const getRefId = (scope: 'tab' | 'panel', key: string) => `tab-${randomId}-${scope}-${key}` @@ -126,7 +130,7 @@ function handleTabsAfterClosed() { :inert="!isActive(tab.id)" :aria-hidden="!isActive(tab.id)" :aria-labelledby="getRefId('tab', tab.id)" - :style="activeIndex !== -1 ? `transform: translateX(${-activeIndex * 100}%)` : ''"> + :style="activeIndex !== -1 ? `transform: translateX(${(isRTLDirection ? 1 : -1) * activeIndex * 100}%)` : ''">