fix alignment issues with RTL languages support

app/frontend/src/assets/scss/style.scss

@@ -592,3 +592,9 @@ a,
   justify-content: center;
   min-height: 300px;
 }
+
+.label .v-label {
+  right: 0 !important;
+  left: auto !important;
+}
+

app/frontend/src/components/admin/AdminFormsTable.vue

@@ -1,24 +1,29 @@
 <template>
-  <div>
+  <div :class="{ 'dir-rtl': isRTL }">
     <v-row no-gutters>
-      <v-col cols="12" sm="8">
+      <v-col cols="6">
         <v-checkbox
           class="pl-3"
+          :class="isRTL ? 'float-right' : 'float-left'"
           v-model="activeOnly"
           :label="$t('trans.adminFormsTable.showDeletedForms')"
           @click="refeshForms"
         />
       </v-col>
-      <v-col cols="12" sm="4">
+      <v-col cols="6">
         <!-- search input -->
-        <div class="submissions-search">
+        <div
+          class="submissions-search"
+          :class="isRTL ? 'float-left' : 'float-right'"
+        >
           <v-text-field
             v-model="search"
             append-icon="mdi-magnify"
             :label="$t('trans.adminFormsTable.search')"
             single-line
             hide-details
             class="pb-5"
+            :class="[{ 'dir-rtl': isRTL }, isRTL ? 'label' : null]"
           />
         </div>
       </v-col>
@@ -85,6 +90,7 @@ export default {
   },
   computed: {
     ...mapGetters('admin', ['formList']),
+    ...mapGetters('form', ['isRTL']),
     calcHeaders() {
       return this.headers.filter(
         (x) => x.value !== 'updatedAt' || this.activeOnly

app/frontend/src/components/admin/AdminPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-tabs>
+  <v-tabs :class="{ 'dir-rtl': isRTL }">
     <v-tab>{{ $t('trans.adminPage.forms') }}</v-tab>
     <v-tab>{{ $t('trans.adminPage.users') }}</v-tab>
     <v-tab>{{ $t('trans.adminPage.developer') }}</v-tab>
@@ -15,6 +15,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 export default {
   name: 'AdminPage',
   components: {
@@ -30,5 +31,14 @@ export default {
       adminDashboardUrl: this.$config.adminDashboardUrl,
     };
   },
+  computed: {
+    ...mapGetters('form', ['isRTL']),
+  },
 };
 </script>
+<style lang="css" scoped>
+.dir-rtl {
+  direction: rtl !important;
+  text-align: right;
+}
+</style>

app/frontend/src/components/admin/AdminUsersTable.vue

@@ -2,16 +2,20 @@
   <div>
     <v-row no-gutters>
       <v-spacer />
-      <v-col cols="12" sm="4">
+      <v-col cols="12">
         <!-- search input -->
-        <div class="submissions-search">
+        <div
+          class="submissions-search"
+          :class="isRTL ? 'float-left' : 'float-right'"
+        >
           <v-text-field
             v-model="search"
             append-icon="mdi-magnify"
             :label="$t('trans.adminUsersTable.search')"
             single-line
             hide-details
             class="pb-5"
+            :class="[{ 'dir-rtl': isRTL }, isRTL ? 'label' : null]"
           />
         </div>
       </v-col>
@@ -58,6 +62,7 @@ export default {
   },
   computed: {
     ...mapGetters('admin', ['userList']),
+    ...mapGetters('form', ['isRTL']),
     headers() {
       return [
         {

app/frontend/src/components/base/BaseDialog.vue

@@ -7,7 +7,7 @@
     @keydown.esc="closeDialog"
   >
     <v-card>
-      <div class="dialog-body">
+      <div class="dialog-body" :class="{ 'dir-rtl': isRTL }">
         <div v-if="showCloseButton">
           <v-spacer />
           <v-icon color="primary" class="float-right m-3" @click="closeDialog"
@@ -47,7 +47,12 @@
               <span>{{ $t('trans.baseDialog.continue') }}</span>
             </slot>
           </v-btn>
-          <v-btn class="mb-5" outlined @click="closeDialog">
+          <v-btn
+            :class="{ 'dir-rtl': isRTL }"
+            class="mb-5"
+            outlined
+            @click="closeDialog"
+          >
             <slot name="button-text-cancel">
               <span>{{ $t('trans.baseDialog.cancel') }}</span>
             </slot>
@@ -58,6 +63,7 @@
             class="mb-5 mr-5"
             color="primary"
             depressed
+            :class="{ 'dir-rtl': isRTL }"
             @click="continueDialog"
           >
             <slot name="button-text-continue">
@@ -104,6 +110,8 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   name: 'BaseDialog',
   methods: {
@@ -120,6 +128,9 @@ export default {
       this.$emit('custom-dialog');
     },
   },
+  computed: {
+    ...mapGetters('form', ['isRTL']),
+  },
   props: {
     value: {
       default: false,
@@ -159,4 +170,8 @@ export default {
   flex: 1 1 auto;
   width: 90%;
 }
+.dir-rtl {
+  direction: rtl !important;
+  text-align: right !important;
+}
 </style>

app/frontend/src/components/base/BaseFilter.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-card>
+  <v-card :class="{ 'dir-rtl': isRTL }">
     <v-card-title class="text-h5 pb-0 titleWrapper">
       <slot name="filter-title"></slot>
     </v-card-title>
@@ -18,6 +18,7 @@
           filled
           dense
           class="mt-3"
+          :class="[{ 'dir-rtl': isRTL }, isRTL ? 'label' : 'label']"
         >
         </v-text-field>
         <v-tooltip bottom>
@@ -63,6 +64,7 @@
       <v-btn
         @click="cancelFilterData"
         class="mt-3 ml-3 primary--text"
+        :class="isRTL ? 'mr-3' : 'ml-3'"
         outlined
         >{{ $t('trans.baseFilter.cancel') }}</v-btn
       >
@@ -71,6 +73,7 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import i18n from '@/internationalization';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faRepeat } from '@fortawesome/free-solid-svg-icons';
@@ -130,6 +133,9 @@ export default {
       default: i18n.t('trans.baseFilter.filter'),
     },
   },
+  computed: {
+    ...mapGetters('form', ['isRTL']),
+  },
   data() {
     return {
       selectedData: this.preselectedData,
@@ -187,6 +193,11 @@ export default {
   color: #000000 !important;
 }
 
+.dir-rtl {
+  direction: rtl !important;
+  text-align: right;
+}
+
 .hr {
   height: 1px;
   border: none;

app/frontend/src/components/base/BaseInternationalization.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="text-center">
+  <div class="text-center" style="z-index: 100">
     <v-menu offset-y>
       <template v-slot:activator="{ on, attrs }">
         <v-btn dark outlined v-bind="attrs" v-on="on" class="ml-3">

app/frontend/src/components/base/BaseNotificationBar.vue

@@ -1,6 +1,6 @@
 <template>
   <v-alert
-    :class="'target-notification ' + notification.class"
+    :class="['target-notification ' + notification.class, { 'dir-rtl': isRTL }]"
     :icon="notification.icon"
     prominent
     dismissible
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapGetters } from 'vuex';
 export default {
   name: 'BaseNotificationBar',
   props: {
@@ -30,6 +30,9 @@ export default {
       timeout: null,
     };
   },
+  computed: {
+    ...mapGetters('form', ['isRTL']),
+  },
   methods: {
     ...mapActions('notifications', ['deleteNotification']),
     alertClosed() {
@@ -53,4 +56,9 @@ export default {
 .target-notification >>> .v-alert__icon.v-icon:after {
   display: none;
 }
+
+.dir-rtl {
+  direction: rtl !important;
+  text-align: right;
+}
 </style>

app/frontend/src/components/base/BaseNotificationContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="notification-container">
+  <div class="notification-container" :class="{ 'dir-rtl': isRTL }">
     <BaseNotificationBar
       v-for="notification in notifications"
       :key="notification.id"
@@ -9,10 +9,13 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters } from 'vuex';
 export default {
   name: 'BaseNotificationContainer',
-  computed: mapState('notifications', ['notifications']),
+  computed: {
+    ...mapState('notifications', ['notifications']),
+    ...mapGetters('form', ['isRTL']),
+  },
 };
 </script>
 
@@ -25,4 +28,9 @@ export default {
   margin-top: 15px;
   width: 50%;
 }
+
+.dir-rtl {
+  direction: rtl !important;
+  text-align: right;
+}
 </style>

app/frontend/src/components/designer/FloatButton.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    :class="{ 'dir-rtl': true }"
     :style="[
       {
         display: 'flex',
@@ -206,7 +207,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('form', ['multiLanguage']),
+    ...mapGetters('form', ['multiLanguage', 'isRTL']),
   },
   props: {
     formId: String,
@@ -521,4 +522,9 @@ export default {
   text-align: center;
   word-break: break-word;
 }
+
+.dir-rtl {
+  direction: rtl !important;
+  text-align: right;
+}
 </style>