WEBUI-1616: rtl support (Hebrew and Arabic)

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;

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]]" offset="0" animation-delay="0" id="tooltip"
         >[[i18n(label)]]</nuxeo-tooltip
       >
       <template is="dom-if" if="[[badge]]">
@@ -126,10 +126,38 @@ Polymer({
     badge: {
       type: String,
     },
+
+    _isRTL: {
+      type: Boolean,
+      value: false,
+    },
+
+    _tooltipPosition: {
+      type: String,
+      value: 'left',
+    },
   },
 
   observers: ['_srcOrIcon(icon, src)'],
 
+  ready() {
+    this._checkRtl();
+    this._handleTooltipPosition(this._isRTL);
+  },
+
+  _checkRtl() {
+    const dir = document.documentElement.getAttribute('dir');
+    this._isRTL = dir === 'rtl';
+  },
+
+  _handleTooltipPosition(isRTL) {
+    if (!isRTL) {
+      this._tooltipPosition = 'right';
+    } else {
+      this._tooltipPosition = 'left';
+    }
+  },
+
   _srcOrIcon() {
     if (this.src && this.src.length > 0) {
       this.$.button.icon = '';

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;
       }
@@ -81,6 +89,12 @@ Polymer({
         padding-left: 16px;
       }
 
+      :host([dir="rtl"]) #header::slotted(*), /* Chrome, Safari */
+      :host([dir="rtl"]) #toolbar::slotted(*) {
+        padding-right: 16px;
+        padding-left: 64px;
+      }
+
       @media (max-width: 720px) {
         #header::slotted(*), /* chrome, safari */
         #toolbar::slotted(*) {
@@ -105,4 +119,10 @@ Polymer({
   `,
 
   is: 'nuxeo-page',
+  ready() {
+    if (!this.hasAttribute('dir')) {
+      const direction = document.documentElement.getAttribute('dir');
+      this.setAttribute('dir', direction);
+    }
+  },
 });

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;
@@ -74,6 +78,10 @@ import { microTask } from '@polymer/polymer/lib/utils/async.js';
             border-radius: 2px;
           }
 
+          :host([dir='rtl']) .current-icon iron-icon {
+            margin: 0.3rem 0 0 0.5rem;
+          }
+
           #ancestors {
             max-width: 100%;
             list-style-type: none;
@@ -158,6 +166,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() {

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}}">
@@ -128,6 +134,13 @@ Polymer({
     'create-document': '_hideShortcuts',
   },
 
+  ready() {
+    if (!this.hasAttribute('dir')) {
+      const direction = document.documentElement.getAttribute('dir');
+      this.setAttribute('dir', direction);
+    }
+  },
+
   _parentChanged() {
     if (this.parent) {
       if (

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;
@@ -96,6 +102,10 @@ Polymer({
         margin-top: -0.07rem;
       }
 
+      :host([dir='rtl']) iron-icon {
+        margin-right: 0;
+      }
+
       [toggle] {
         cursor: pointer;
       }
@@ -176,12 +186,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>
@@ -248,11 +258,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);
@@ -287,6 +307,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');
   },
@@ -347,7 +376,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) {

elements/nuxeo-home.html

@@ -287,6 +287,12 @@
         },
       },
 
+      ready() {
+        if (!this.hasAttribute('dir')) {
+          this.setAttribute('dir', getComputedStyle(this).direction);
+        }
+      },
+
       observers: ['_processTask(_selection)'],
 
       _processTask() {