WEBUI-1615: rtl support index,create-button & suggester

nuxeo · Dec 17, 2024 · 88e8a60 · 88e8a60
1 parent eaac0c6
commit 88e8a60
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 0 deletions.
diff --git a/elements/nuxeo-document-create-button/nuxeo-document-create-button.js b/elements/nuxeo-document-create-button/nuxeo-document-create-button.js
@@ -70,6 +70,11 @@ Polymer({
       nuxeo-document-create-shortcuts {
         --nuxeo-document-create-shortcut-margin: 0 0 16px 0;
       }
+
+      :host([dir='rtl']) #tray {
+        left: 32px;
+        right: auto;
+      }
     </style>
 
     <nuxeo-document id="defaultDoc" doc-path="[[parent.path]]" enrichers="permissions, subtypes" response="{{parent}}">
@@ -128,6 +133,12 @@ Polymer({
     'create-document': '_hideShortcuts',
   },
 
+  ready() {
+    if (!this.hasAttribute('dir')) {
+      this.setAttribute('dir', getComputedStyle(this).direction);
+    }
+  },
+
   _parentChanged() {
     if (this.parent) {
       if (

diff --git a/elements/nuxeo-suggester/nuxeo-suggester.js b/elements/nuxeo-suggester/nuxeo-suggester.js
@@ -245,6 +245,12 @@ Polymer({
           width: 100%;
           padding: 1em;
         }
+
+        :host([dir='rtl']) #searchButton {
+          right: auto;
+          left: 0;
+          border-right: 1px solid rgba(0, 0, 0, 0.1);
+        }
       }
     </style>
 
@@ -341,6 +347,12 @@ Polymer({
     },
   },
 
+  ready() {
+    if (!this.hasAttribute('dir')) {
+      this.setAttribute('dir', getComputedStyle(this).direction);
+    }
+  },
+
   toggle() {
     this.toggled = !this.toggled;
     this.searchTerm = '';

diff --git a/index.js b/index.js
@@ -2,6 +2,18 @@ import { config } from '@nuxeo/nuxeo-elements';
 import { importHTML, importHref } from '@nuxeo/nuxeo-ui-elements/import-href.js';
 import { setFallbackNotificationTarget } from '@nuxeo/nuxeo-elements/nuxeo-notify-behavior.js';
 
+// RTL configuration setup
+const setupRTLSupport = () => {
+  window.nuxeo = window.nuxeo || {};
+  window.nuxeo.I18n = window.nuxeo.I18n || {};
+  const userLanguage = navigator.language || navigator.userLanguage || 'en';
+  window.console.log(`User language: ${userLanguage}`);
+  const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
+  const isRTL = rtlLanguages.some((lang) => userLanguage?.startsWith(lang));
+  window.nuxeo.I18n.direction = isRTL ? 'rtl' : 'ltr';
+  document.documentElement.dir = window.nuxeo.I18n.direction;
+};
+
 // To fix WEBUI-833 and to disable the Roboto font request
 const disableRobotoFont = () => {
   window.polymerSkipLoadingFontRoboto = true;
@@ -57,6 +69,7 @@ const ready =
 
 ready
   .then(disableRobotoFont)
+  .then(setupRTLSupport)
   .then(loadApp)
   .then(loadLegacy)
   .then(loadBundle)