WEBUI-1616: support rtl webui 3.0.x (#2448)

elements/document/nuxeo-document-page.js

@@ -89,6 +89,11 @@ Polymer({
         padding-right: 16px;
       }
 
+      :host([dir='rtl'][opened]) .main {
+        padding-right: 0;
+        padding-left: 16px;
+      }
+
       .side {
         @apply --layout-vertical;
         position: relative;
@@ -279,6 +284,13 @@ Polymer({
     },
   },
 
+  ready() {
+    if (!this.hasAttribute('dir')) {
+      const direction = document.documentElement.getAttribute('dir');
+      this.setAttribute('dir', direction);
+    }
+  },
+
   _documentChanged(doc) {
     this.selectedTab = this.hasFacet(doc, 'Commentable') ? 'comments' : 'activity';
   },

elements/document/nuxeo-picture-formats.js

@@ -46,6 +46,19 @@ Polymer({
         @apply --layout-justified;
       }
 
+      .properties .item > * {
+        unicode-bidi: plaintext;
+      }
+
+      :host(:not([dir='rtl'])) .properties .item span {
+        flex: 1;
+        text-align: left;
+      }
+
+      :host([dir='rtl']) .properties .item {
+        justify-content: space-between;
+      }
+
       iron-icon {
         fill: var(--nuxeo-text-default, #3a3a54);
       }
@@ -84,6 +97,13 @@ Polymer({
     },
   },
 
+  ready() {
+    if (!this.hasAttribute('dir')) {
+      const direction = document.documentElement.getAttribute('dir');
+      this.setAttribute('dir', direction);
+    }
+  },
+
   _getAdditionalFormats(document) {
     return document && document.properties['picture:views']
       ? document.properties['picture:views'].map((view) => {

elements/document/nuxeo-picture-info.js

@@ -44,6 +44,10 @@ Polymer({
         @apply --layout-flex;
         line-height: 2.2rem;
       }
+
+      .properties .item > * {
+        unicode-bidi: plaintext;
+      }
     </style>
 
     <div class="properties">

elements/nuxeo-app.js

@@ -133,6 +133,9 @@ Polymer({
         --paper-drawer-panel-left-drawer-container: {
           z-index: 100;
         }
+        --paper-drawer-panel-right-drawer-container: {
+          z-index: 100;
+        }
         --paper-drawer-panel-scrim: {
           z-index: 2;
         }
@@ -144,18 +147,28 @@ 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='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 +224,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 +253,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;
@@ -270,6 +293,10 @@ Polymer({
         background-color: var(--nuxeo-drawer-background);
       }
 
+      :host([dir='rtl']) #drawerToggle {
+        right: 6px;
+      }
+
       nuxeo-document-create-button.admin {
         display: none;
       }
@@ -283,6 +310,13 @@ Polymer({
         margin-left: 50px;
       }
 
+      :host([dir='rtl']) #snackbarPanel {
+        left: auto;
+        right: 0px;
+        margin-right: 50px;
+        margin-left: 0px;
+      }
+
       mwc-snackbar {
         position: relative !important;
         left: 0 !important;
@@ -294,6 +328,11 @@ Polymer({
         color: white;
         --mdc-typography-body2-font-size: 14px;
       }
+
+      :host([dir='rtl']) mwc-snackbar {
+        right: 0 !important;
+        left: auto !important;
+      }
     </style>
 
     <nuxeo-offline-banner message="[[i18n('app.offlineBanner.message')]]"></nuxeo-offline-banner>
@@ -323,6 +362,7 @@ Polymer({
       drawer-width="[[drawerWidth]]"
       responsive-width="720px"
       edge-swipe-sensitivity="0"
+      right-drawer$="[[_isRTL]]"
     >
       <div slot="drawer" role="list">
         <!-- logo -->
@@ -394,7 +434,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 +637,13 @@ Polymer({
     _routedSearch: {
       type: Object,
     },
+
+    _isRTL: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+      observer: '_directionChanged',
+    },
   },
 
   listeners: {
@@ -641,6 +688,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 +724,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-item.js

@@ -39,6 +39,10 @@ Polymer({
         border-bottom: 2px solid transparent;
       }
 
+      :host-context([dir='rtl']) {
+        margin: 0 16px 0 16px;
+      }
+
       :host(:hover) {
         border-bottom: 2px solid var(--nuxeo-app-header-pill-hover);
         color: var(--nuxeo-app-header-pill-hover);

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,13 +89,24 @@ 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(*) {
           /* firefox */
           overflow-y: scroll;
           padding-left: 48px;
         }
+
+        :host([dir="rtl"]) #header::slotted(*), /* Chrome, Safari */
+        :host([dir="rtl"]) #toolbar::slotted(*) {
+          padding-right: 48px;
+        }
       }
     </style>
 
@@ -105,4 +124,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() {