WEBUI-1616: rtl support webui 3.0.x

nuxeo · Jan 29, 2025 · 39aa2f7 · 39aa2f7
1 parent 7a18070
commit 39aa2f7
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 10 deletions.
diff --git a/elements/nuxeo-app.js b/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;
@@ -235,6 +250,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 +343,7 @@ Polymer({
       drawer-width="[[drawerWidth]]"
       responsive-width="720px"
       edge-swipe-sensitivity="0"
+      right-drawer$="[[_isRTL]]"
     >
       <div slot="drawer" role="list">
         <!-- logo -->
@@ -597,6 +618,13 @@ Polymer({
     _routedSearch: {
       type: Object,
     },
+
+    _isRTL: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+      observer: '_directionChanged',
+    },
   },
 
   listeners: {
@@ -641,6 +669,7 @@ Polymer({
   ],
 
   ready() {
+    this._checkRtl();
     this.$.drawerPanel.closeDrawer();
     this.drawerWidth = this.sidebarWidth = getComputedStyle(this).getPropertyValue('--nuxeo-sidebar-width');
     this.$.drawerPanel.$.drawer.addEventListener('transitionend', () => {
@@ -676,6 +705,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;

diff --git a/elements/nuxeo-app/nuxeo-menu-icon.js b/elements/nuxeo-app/nuxeo-menu-icon.js
@@ -72,7 +72,7 @@ Polymer({
 
     <a href$="[[_href(urlFor, route, link)]]">
       <paper-icon-button noink id="button" name$="[[name]]" aria-labelledby="tooltip"></paper-icon-button>
-      <nuxeo-tooltip for="button" position="right" offset="0" animation-delay="0" id="tooltip"
+      <nuxeo-tooltip for="button" position="[[_tooltipPosition(_isRTL)]]" offset="0" animation-delay="0" id="tooltip"
         >[[i18n(label)]]</nuxeo-tooltip
       >
       <template is="dom-if" if="[[badge]]">
@@ -126,10 +126,27 @@ Polymer({
     badge: {
       type: String,
     },
+
+    _isRTL: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   observers: ['_srcOrIcon(icon, src)'],
 
+  _checkRtl() {
+    const dir = document.documentElement.getAttribute('dir');
+    this._isRTL = dir === 'rtl';
+  },
+
+  _tooltipPosition(isRTL) {
+    if (isRTL) {
+      return 'right';
+    }
+    return 'left';
+  },
+
   _srcOrIcon() {
     if (this.src && this.src.length > 0) {
       this.$.button.icon = '';

diff --git a/elements/nuxeo-app/nuxeo-page.js b/elements/nuxeo-app/nuxeo-page.js
@@ -58,6 +58,10 @@ Polymer({
         overflow-x: auto;
       }
 
+      :host([dir='rtl']) .toolbar {
+        border-right: 1px solid var(--divider-color);
+      }
+
       #tabs {
         flex: 0 0 auto;
         background: var(--nuxeo-app-header-background);
@@ -67,6 +71,10 @@ Polymer({
         z-index: 1;
       }
 
+      :host([dir='rtl']) #tabs {
+        border-right: 1px solid var(--divider-color);
+      }
+
       #header::slotted(*) {
         overflow-x: hidden;
       }

diff --git a/elements/nuxeo-browser/nuxeo-breadcrumb.js b/elements/nuxeo-browser/nuxeo-breadcrumb.js
@@ -49,6 +49,10 @@ import { microTask } from '@polymer/polymer/lib/utils/async.js';
             @apply --layout-horizontal;
           }
 
+          :host([dir='rtl']) .breadcrumb {
+            margin: 0.5em 0 0 1em;
+          }
+
           .doc-path {
             width: 100%;
             white-space: nowrap;
@@ -158,6 +162,10 @@ import { microTask } from '@polymer/polymer/lib/utils/async.js';
     connectedCallback() {
       super.connectedCallback();
       this.addEventListener('iron-resize', this._resize);
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
     }
 
     disconnectedCallback() {

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,12 @@ Polymer({
       nuxeo-document-create-shortcuts {
         --nuxeo-document-create-shortcut-margin: 0 0 16px 0;
       }
+
+      :host([dir='rtl']) #tray {
+        left: 32px;
+        right: auto;
+        overflow: hidden;
+      }
     </style>
 
     <nuxeo-document id="defaultDoc" doc-path="[[parent.path]]" enrichers="permissions, subtypes" response="{{parent}}">

diff --git a/elements/nuxeo-document-tree/nuxeo-document-tree.js b/elements/nuxeo-document-tree/nuxeo-document-tree.js
@@ -60,6 +60,12 @@ Polymer({
         }
       }
 
+      :host([dir='rtl']) {
+        --nuxeo-tree-children-theme: {
+          padding-right: 1em;
+        }
+      }
+
       .content {
         padding: 5px 0;
         overflow: auto;
@@ -74,6 +80,11 @@ Polymer({
         word-break: break-word;
       }
 
+      :host([dir='rtl']) .node-name {
+        margin-left: auto;
+        margin-right: 1.3em;
+      }
+
       a {
         @apply --nuxeo-link;
       }
@@ -96,6 +107,10 @@ Polymer({
         margin-top: -0.07rem;
       }
 
+      :host([dir='rtl']) iron-icon {
+        margin-right: 0;
+      }
+
       [toggle] {
         cursor: pointer;
       }
@@ -184,12 +199,12 @@ Polymer({
     <div class="content" role="tree">
       <div class="parents" hidden$="[[_noPermission]]">
         <a href$="[[urlFor('document', '/')]]" class="layout horizontal" hidden$="[[_hideRoot(document)]]">
-          <span aria-hidden="true"><iron-icon icon="icons:chevron-left"></iron-icon></span>
+          <span aria-hidden="true"><iron-icon icon="[[toggleChevronIcon]]"></iron-icon></span>
           <span class="parent">[[i18n('browse.root')]]</span>
         </a>
         <template is="dom-repeat" items="[[parents]]" as="item">
           <a href$="[[urlFor(item)]]">
-            <span><iron-icon icon="icons:chevron-left"></iron-icon></span>
+            <span><iron-icon icon="[[toggleChevronIcon]]"></iron-icon></span>
             <span class="parent">[[item.title]]</span>
           </a>
         </template>
@@ -265,11 +280,21 @@ Polymer({
       type: Boolean,
       value: false,
     },
+    _isRtl: {
+      type: Boolean,
+      value: false,
+      observer: '_onRtlChange',
+    },
   },
 
   observers: ['_fetchDocument(docPath, visible)'],
 
   ready() {
+    if (!this.hasAttribute('dir')) {
+      const direction = document.documentElement.getAttribute('dir');
+      this.setAttribute('dir', direction);
+    }
+    this._checkRtl();
     window.addEventListener('nuxeo-documents-deleted', (e) => {
       if (e.detail.documents) {
         this.removeDocuments(e.detail.documents);
@@ -304,6 +329,15 @@ Polymer({
     };
   },
 
+  _checkRtl() {
+    const dir = document.documentElement.getAttribute('dir');
+    this._isRtl = dir === 'rtl';
+  },
+
+  _onRtlChange() {
+    this.toggleChevronIcon = this._isRtl ? 'icons:chevron-right' : 'icons:chevron-left';
+  },
+
   _hideRoot(doc) {
     return this.rootDocPath !== '/' || (doc && doc.type && doc.type === 'Root');
   },
@@ -385,7 +419,8 @@ Polymer({
   },
 
   _expandIcon(opened) {
-    return `hardware:keyboard-arrow-${opened ? 'down' : 'right'}`;
+    const iconDirection = this._isRtl ? 'left' : 'right';
+    return `hardware:keyboard-arrow-${opened ? 'down' : iconDirection}`;
   },
 
   _icon(opened) {

diff --git a/index.css b/index.css
@@ -20,6 +20,13 @@ nuxeo-app[unresolved] {
   background-color: var(--nuxeo-sidebar-background);
   width: 52px;
   height: 100%;
+}
+
+[dir="rtl"] [unresolved] #sidebar{
+  float: right;
+}
+
+[dir="ltr"] [unresolved]  #sidebar {
   float: left;
 }
 
@@ -28,6 +35,14 @@ nuxeo-app[unresolved] {
   animation: glow 1s infinite alternate;
 }
 
+[dir="rtl"] [unresolved] #sidebar img {
+  float: right;
+}
+
+[dir="ltr"] [unresolved] #sidebar img {
+  float: left;
+}
+
 [unresolved] #container {
   background-color: var(--nuxeo-page-background);
   float: left;

diff --git a/index.html b/index.html
@@ -57,7 +57,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
 
     <!-- Content security policy (needs Nuxeo.UI.config.expressions.eval = false) -->
-    <!-- meta http-equiv="Content-Security-Policy" content="img-src data: blob: *; default-src blob: *; script-src data: * 'nonce-dummy'; style-src 'unsafe-inline' *; font-src data: *" -->
+    <!-- <meta
+      http-equiv="Content-Security-Policy"
+      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>

diff --git a/plugin/web-ui/addon/src/main/resources/web/nuxeo.war/ui/index.jsp b/plugin/web-ui/addon/src/main/resources/web/nuxeo.war/ui/index.jsp
@@ -22,8 +22,6 @@ limitations under the License.
 <%@ page import="org.nuxeo.runtime.api.Framework"%>
 <%@ page import="org.nuxeo.ecm.core.api.repository.RepositoryManager"%>
 <%@ page import="org.nuxeo.common.utils.UserAgentMatcher"%>
-<%@ page import="javax.servlet.http.HttpServletResponse" %>
-
 
 <%
   String ua = request.getHeader("user-agent");
@@ -38,7 +36,6 @@ limitations under the License.
   } else {
     baseUrl = context + "/repo/" + repository + "/ui/";
   }
-  HttpServletResponse resp = (HttpServletResponse) pageContext.getResponse();
   String NX_NONCE_VALUE = UUID.randomUUID().toString();
   String updatedScriptSrcStr = "'self' 'strict-dynamic' 'nonce-" + NX_NONCE_VALUE + "'";
   String cspHeader = resp.getHeader("Content-Security-Policy");
@@ -85,6 +82,7 @@ limitations under the License.
   <meta charset="UTF-8">
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-<%= NX_NONCE_VALUE %>' 'strict-dynamic'; object-src 'none'">
 
   <title><%= Framework.getProperty(Environment.PRODUCT_NAME) %></title>
 
@@ -119,6 +117,9 @@ limitations under the License.
   <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+  <script>
+    <%@include file="rtl-setup.js"%>
+  </script>
 
   <style>
     <%@include file="index.css"%>
@@ -155,4 +156,4 @@ limitations under the License.
 
 </body>
 
-</html>
+</html>
diff --git a/rtl-setup.js b/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');
+}
diff --git a/themes/base.js b/themes/base.js
@@ -109,6 +109,7 @@ const template = html`
 
         paper-button + paper-button {
           margin-left: 8px;
+          margin-right: 8px;
         }
 
         paper-textarea {