test

elements/nuxeo-app.js

@@ -144,18 +144,33 @@ Polymer({
         width: var(--nuxeo-sidebar-width);
         height: 53px;
         top: var(--nuxeo-app-top);
-        left: 0;
         z-index: 102;
         box-sizing: border-box;
         outline: none;
         background-color: var(--nuxeo-sidebar-background);
       }
 
+      :host([dir='rtl']) #logo {
+        left: auto;
+        right: 0;
+      }
+
+      :host([dir='ltr']) #logo {
+        left: 0;
+        right: auto;
+      }
+
       #logo img {
         width: var(--nuxeo-sidebar-width);
         height: 53px;
       }
 
+      :host([dir='rtl']) #logo {
+        right: 0px;
+        height: 53px;
+        left: auto;
+      }
+
       /* menu */
       #menu {
         @apply --nuxeo-sidebar;
@@ -211,6 +226,11 @@ Polymer({
         cursor: pointer;
       }
 
+      :host([dir='rtl']) #drawer .toggle {
+        left: -16px;
+        right: auto;
+      }
+
       #drawer .toggle iron-icon {
         visibility: hidden;
         color: var(--nuxeo-drawer-background);
@@ -235,6 +255,11 @@ Polymer({
         background-color: var(--nuxeo-drawer-background);
       }
 
+      :host([dir='rtl']) #drawer iron-pages {
+        margin-right: var(--nuxeo-sidebar-width);
+        margin-left: 0;
+      }
+
       #drawer nuxeo-menu-item:hover,
       #drawer list-item:hover {
         @apply --nuxeo-block-hover;
@@ -323,6 +348,7 @@ Polymer({
       drawer-width="[[drawerWidth]]"
       responsive-width="720px"
       edge-swipe-sensitivity="0"
+      right-drawer$="[[_isRTL]]"
     >
       <div slot="drawer" role="list">
         <!-- logo -->
@@ -394,7 +420,7 @@ Polymer({
           </iron-pages>
 
           <div class="toggle" on-tap="_closeDrawer" hidden$="[[!drawerOpened]]">
-            <iron-icon icon="icons:chevron-left"></iron-icon>
+            <iron-icon icon="[[toggleChevronIcon]]"></iron-icon>
           </div>
         </div>
       </div>
@@ -597,6 +623,13 @@ Polymer({
     _routedSearch: {
       type: Object,
     },
+
+    _isRTL: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+      observer: '_directionChanged',
+    },
   },
 
   listeners: {
@@ -641,6 +674,7 @@ Polymer({
   ],
 
   ready() {
+    this._checkRtl();
     this.$.drawerPanel.closeDrawer();
     this.drawerWidth = this.sidebarWidth = getComputedStyle(this).getPropertyValue('--nuxeo-sidebar-width');
     this.$.drawerPanel.$.drawer.addEventListener('transitionend', () => {
@@ -675,6 +709,21 @@ Polymer({
     });
   },
 
+  _checkRtl() {
+    const dir = document.documentElement.getAttribute('dir');
+    this._isRTL = dir === 'rtl';
+  },
+
+  _directionChanged(isRTL) {
+    if (isRTL) {
+      this.$.drawerPanel.setAttribute('right-drawer', '');
+      this.toggleChevronIcon = 'icons:chevron-right';
+    } else {
+      this.$.drawerPanel.removeAttribute('right-drawer');
+      this.toggleChevronIcon = 'icons:chevron-left';
+    }
+  },
+
   _resetTaskSelection() {
     this.currentTask = null;
     this.currentTaskId = null;

index.html

@@ -58,10 +58,10 @@
 
     <!-- Content security policy (needs Nuxeo.UI.config.expressions.eval = false) -->
     <!-- <meta
-      http-equiv="Content-Security-Policy"
+      http-equiv="Content-Security-Policy" test
       content="img-src data: blob: *; default-src blob: *; script-src data: * 'nonce-dummy'; style-src 'unsafe-inline' *; font-src data: *"
     /> -->
-
+    <script type="text/javascript" src="rtl-setup.js"></script>
     <link rel="stylesheet" type="text/css" href="index.css" />
   </head>
 

index.js

@@ -2,6 +2,17 @@ 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';
+  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;
@@ -35,6 +46,7 @@ const setupApp = async () =>
       if (!Nuxeo.UI.app) {
         console.error('could not find nuxeo-app');
       }
+      Nuxeo.UI.app.setAttribute('dir', window.nuxeo.I18n.direction);
       setFallbackNotificationTarget(Nuxeo.UI.app);
     } else {
       console.error('could not find nuxeo-app');
@@ -57,6 +69,7 @@ const ready =
 
 ready
   .then(disableRobotoFont)
+  .then(setupRTLSupport)
   .then(loadApp)
   .then(loadLegacy)
   .then(loadBundle)

plugin/web-ui/addon/src/main/resources/web/nuxeo.war/ui/index.jsp

@@ -139,7 +139,9 @@ limitations under the License.
       <span id="loading"></span>
     </div>
   </nuxeo-app>
-
+
+  <script src="rtl-setup.js" nonce="<%= NX_NONCE_VALUE %>"></script>
+
   <script src="vendor/webcomponentsjs/webcomponents-loader.js"  nonce="<%= NX_NONCE_VALUE %>"></script>
 
   <script src="vendor/html-imports/html-imports.min.js" nonce="<%= NX_NONCE_VALUE %>"></script>

rtl-setup.js

@@ -0,0 +1,11 @@
+window.nuxeo = window.nuxeo || {};
+window.nuxeo.I18n = window.nuxeo.I18n || {};
+const userLanguage = navigator.language || navigator.userLanguage || 'en';
+const rtlLanguages = ['ar', 'he', 'fa', 'ur'];
+const isRTL = rtlLanguages.some((lang) => userLanguage?.startsWith(lang));
+window.nuxeo.I18n.direction = isRTL ? 'rtl' : 'ltr';
+document.documentElement.setAttribute('dir', window.nuxeo.I18n.direction || 'ltr');
+const nuxeoApp = document.querySelector('nuxeo-app');
+if (nuxeoApp) {
+  nuxeoApp.setAttribute('dir', window.nuxeo.I18n.direction || 'ltr');
+}