mobile version supports rtl

src/views/mobile/users/DataManagementPage.vue

@@ -184,6 +184,6 @@ reloadUserDataStatistics();
 
 <style>
 .export-file-type-list.list > ul > li > .item-content {
-    padding-left: 0;
+    padding-inline-start: 0;
 }
 </style>

src/views/mobile/users/SessionListPage.vue

@@ -34,7 +34,9 @@
                 <template #after>
                     <small>{{ session.lastSeenDateTime }}</small>
                 </template>
-                <f7-swipeout-actions right v-if="!session.isCurrent">
+                <f7-swipeout-actions :left="textDirection === TextDirection.RTL"
+                                     :right="textDirection === TextDirection.LTR"
+                                     v-if="!session.isCurrent">
                     <f7-swipeout-button color="red" :text="tt('Log Out')" @click="revoke(session)"></f7-swipeout-button>
                 </f7-swipeout-actions>
             </f7-list-item>
@@ -51,6 +53,7 @@ import { useI18nUIComponents, showLoading, hideLoading, onSwipeoutDeleted } from
 
 import { useTokensStore } from '@/stores/token.ts';
 
+import { TextDirection } from '@/core/text.ts';
 import { type TokenInfoResponse, SessionInfo } from '@/models/token.ts';
 
 import { isEquals } from '@/lib/common.ts';
@@ -73,7 +76,7 @@ const props = defineProps<{
     f7router: Router.Router;
 }>();
 
-const { tt, formatUnixTimeToLongDateTime } = useI18n();
+const { tt, getCurrentLanguageTextDirection, formatUnixTimeToLongDateTime } = useI18n();
 const { showConfirm, showToast, routeBackOnError } = useI18nUIComponents();
 
 const tokensStore = useTokensStore();
@@ -82,6 +85,8 @@ const tokens = ref<TokenInfoResponse[]>([]);
 const loading = ref<boolean>(true);
 const loadingError = ref<unknown | null>(null);
 
+const textDirection = computed<TextDirection>(() => getCurrentLanguageTextDirection());
+
 const sessions = computed<MobilePageSessionInfo[]>(() => {
     const sessions: MobilePageSessionInfo[] = [];
 

src/views/mobile/users/UserProfilePage.vue

@@ -526,6 +526,7 @@ import { useRootStore } from '@/stores/index.ts';
 import { useUserStore } from '@/stores/user.ts';
 import { useAccountsStore } from '@/stores/account.ts';
 
+import { TextDirection } from '@/core/text.ts';
 import type { LocalizedCurrencyInfo } from '@/core/currency.ts';
 
 import type { UserProfileResponse } from '@/models/user.ts';
@@ -538,7 +539,15 @@ const props = defineProps<{
     f7router: Router.Router;
 }>();
 
-const { tt, getAllLanguageOptions, getAllCurrencies, getCurrencyName, formatFiscalYearStartToLongDay } = useI18n();
+const {
+    tt,
+    getCurrentLanguageTextDirection,
+    getAllLanguageOptions,
+    getAllCurrencies,
+    getCurrencyName,
+    formatFiscalYearStartToLongDay
+} = useI18n();
+
 const { showAlert, showToast, routeBackOnError } = useI18nUIComponents();
 
 const {
@@ -661,6 +670,8 @@ function save(): void {
         return;
     }
 
+    const oldTextDirection: TextDirection = getCurrentLanguageTextDirection();
+
     saving.value = true;
     showLoading(() => saving.value);
 
@@ -671,7 +682,10 @@ function save(): void {
 
         doAfterProfileUpdate(response.user);
         showToast('Your profile has been successfully updated');
-        router.back();
+
+        if (oldTextDirection === getCurrentLanguageTextDirection()) {
+            router.back(); // if text direction is changed, the page will be reloaded, so it don't need to go back
+        }
     }).catch(error => {
         saving.value = false;
         hideLoading();