Fix RTL detection edge case

cortezaproject · Feb 9, 2022 · 30cc4eb · 30cc4eb
1 parent 1574feb
commit 30cc4eb
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 6 deletions.
diff --git a/src/app.js b/src/app.js
@@ -47,7 +47,7 @@ export default (options = {}) => {
 
       return this.$auth.vue(this).handle().then(({ user }) => {
         // switch the page directionality on body based on language
-        document.body.setAttribute('dir', this.textDirectionality)
+        document.body.setAttribute('dir', this.textDirectionality(user.meta.preferredLanguage))
 
         if (user.meta.preferredLanguage) {
           // After user is authenticated, get his preferred language

diff --git a/src/dev-env.js b/src/dev-env.js
@@ -25,7 +25,7 @@ export default new Vue({
   el: '#app',
   name: 'DevEnv',
   async created () {
-    document.body.setAttribute('dir', this.textDirectionality)
+    document.body.setAttribute('dir', this.textDirectionality())
   },
   template: '<router-view/>',
   router: new Router({

diff --git a/src/mixins/resource-translations.js b/src/mixins/resource-translations.js
@@ -35,8 +35,11 @@ export default {
       return this.$i18n.i18next.language
     },
 
+  },
+
+  methods: {
     /**
-     * Manage directionality of the page according to the language
+     * Returns directionality of the page according to the language
      *  - Arabic (ar)
      *  - Hebrew (he)
      *  - Pashto (pa)
@@ -45,8 +48,8 @@ export default {
      *  - Sindhi (sd)
      * @returns {string} rtl | ltr
      */
-    textDirectionality () {
-      switch (this.currentLanguage) {
+    textDirectionality (language = this.currentLanguage) {
+      switch (language) {
         case 'ar':
         case 'he':
         case 'pa':

diff --git a/src/views/Layout.vue b/src/views/Layout.vue
@@ -38,7 +38,7 @@
         :logo="logo"
         :disabled-routes="['namespace.list', 'namespace.edit', 'namespace.create']"
         expand-on-hover
-        :right="textDirectionality === 'rtl'"
+        :right="textDirectionality() === 'rtl'"
       >
         <template #header-expanded>
           <portal-target name="sidebar-header-expanded" />