WEBUI-1616: rtl support 3.0x

nuxeo · Jan 29, 2025 · 8395864 · 8395864
1 parent 219bfa6
commit 8395864
Show file tree

Hide file tree

Showing 14 changed files with 130 additions and 4 deletions.
diff --git a/ui/nuxeo-document-comments/nuxeo-document-comment.js b/ui/nuxeo-document-comments/nuxeo-document-comment.js
@@ -65,6 +65,10 @@ import '../nuxeo-button-styles.js';
             margin-right: 5px;
           }
 
+          :host([dir='rtl']) .author {
+            margin-left: 5px;
+          }
+
           .info {
             margin-left: 10px;
             @apply --layout-vertical;
@@ -365,6 +369,10 @@ import '../nuxeo-button-styles.js';
 
     connectedCallback() {
       super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
       this.addEventListener('number-of-replies', this._handleRepliesChange);
       this.text = this.comment && this.comment.text;
     }

diff --git a/ui/nuxeo-document-permissions/nuxeo-document-acl-table.js b/ui/nuxeo-document-permissions/nuxeo-document-acl-table.js
@@ -49,7 +49,7 @@ import './nuxeo-popup-permission.js';
             color: var(--nuxeo-text-default, rgba(0, 0, 0, 0.54));
             font-weight: 700;
             min-height: 48px;
-            padding: 0 0 0 12px;
+            padding: 0 12px 0 12px;
             border-bottom: 2px solid var(--nuxeo-border, #eee);
             box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2) inset;
           }
@@ -61,7 +61,7 @@ import './nuxeo-popup-permission.js';
             background-color: var(--nuxeo-table-items-background, #fafafa);
             cursor: pointer;
             min-height: 48px;
-            padding: 0 0 0 12px;
+            padding: 0 12px 0 12px;
           }
 
           .acl-table-row:hover {

diff --git a/ui/nuxeo-document-permissions/nuxeo-document-permissions.js b/ui/nuxeo-document-permissions/nuxeo-document-permissions.js
@@ -59,6 +59,11 @@ import '../nuxeo-button-styles.js';
             right: 16px;
           }
 
+          :host([dir='rtl']) nuxeo-card .actions {
+            right: auto;
+            left: 16px;
+          }
+
           nuxeo-card .content {
             margin-top: 32px;
           }
@@ -240,6 +245,14 @@ import '../nuxeo-button-styles.js';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
+    }
+
     ready() {
       super.ready();
       this.addEventListener('acecreated', this.onACECreated);

diff --git a/ui/nuxeo-document-thumbnail/nuxeo-document-thumbnail.js b/ui/nuxeo-document-thumbnail/nuxeo-document-thumbnail.js
@@ -58,6 +58,9 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior';
             filter: brightness(1.2);
             -webkit-filter: brightness(1.2);
           }
+          :host([dir='rtl']) img {
+            margin: auto auto auto 8px;
+          }
         </style>
 
         <img id="img" src="[[_thumbnail(document)]]" alt="[[_title(document)]]" on-error="_error" />
@@ -74,6 +77,14 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
+    }
+
     _thumbnail(doc) {
       if (
         doc &&

diff --git a/ui/nuxeo-path-suggestion/nuxeo-path-suggestion.js b/ui/nuxeo-path-suggestion/nuxeo-path-suggestion.js
@@ -68,11 +68,21 @@ import { FormatBehavior } from '../nuxeo-format-behavior.js';
               display: block;
               overflow: hidden;
               white-space: nowrap;
-              direction: rtl;
-              text-align: left;
               @apply --nuxeo-path-suggestion-result;
             }
 
+            :host([dir='rtl']) {
+              --paper-typeahead-result: {
+                text-align: right;
+              }
+            }
+
+            :host(:not([dir='rtl'])) {
+              --paper-typeahead-result: {
+                text-align: left;
+              }
+            }
+
             --paper-input-container-underline: {
               z-index: 0;
             }
@@ -175,6 +185,14 @@ import { FormatBehavior } from '../nuxeo-format-behavior.js';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
+    }
+
     displayResults() {
       this.$.typeahead.tryDisplayResults();
     }

diff --git a/ui/nuxeo-tree/nuxeo-tree-node.js b/ui/nuxeo-tree/nuxeo-tree-node.js
@@ -54,6 +54,10 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior.js';
             margin: 0.1rem 0 0.2rem;
           }
 
+          :host([dir='rtl']) ::slotted(#content) {
+            margin: 0.1rem 0.8rem 0.2rem 0;
+          }
+
           ::slotted(#content iron-icon) {
             margin-top: -0.25rem;
           }
@@ -125,6 +129,14 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior.js';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
+    }
+
     static get observers() {
       return ['_renderNodeContent(data)'];
     }

diff --git a/ui/nuxeo-user-group-management.js b/ui/nuxeo-user-group-management.js
@@ -90,6 +90,11 @@ import './nuxeo-button-styles.js';
             top: 15px;
           }
 
+          :host([dir='rtl']) #createDropdown {
+            left: 0;
+            right: auto;
+          }
+
           paper-menu-button {
             width: 130px;
             height: 48px;
@@ -233,6 +238,10 @@ import './nuxeo-button-styles.js';
 
     ready() {
       super.ready();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
       // dynamic loading of user layouts
       if (!this._isRegistered('nuxeo-view-user')) {
         importHref(this.resolveUrl('nuxeo-user-group-management/nuxeo-view-user.html'));

diff --git a/ui/nuxeo-video/nuxeo-video-conversions.js b/ui/nuxeo-video/nuxeo-video-conversions.js
@@ -50,6 +50,9 @@ import '../widgets/nuxeo-tooltip.js';
             @apply --layout-justified;
             line-height: 2.2rem;
           }
+          .properties .item > * {
+            unicode-bidi: plaintext;
+          }
           .properties .item span {
             flex: 1;
             text-align: left;

diff --git a/ui/widgets/nuxeo-card.js b/ui/widgets/nuxeo-card.js
@@ -73,6 +73,11 @@ import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
             @apply --nuxeo-link-hover;
           }
 
+          :host([dir='rtl']) .header .icon {
+            margin-left: 8px;
+            margin-right: 0;
+          }
+
           [hidden] {
             display: none !important;
           }
@@ -173,6 +178,14 @@ import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
+    }
+
     _hasHeading(icon, heading, collapsible) {
       return icon || heading || collapsible;
     }

diff --git a/ui/widgets/nuxeo-directory-suggestion.js b/ui/widgets/nuxeo-directory-suggestion.js
@@ -244,6 +244,14 @@ import { escapeHTML } from './nuxeo-selectivity.js';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
+    }
+
     /* Override method from Polymer.IronValidatableBehavior. */
     _getValidity() {
       return this.$.s2._getValidity();

diff --git a/ui/widgets/nuxeo-html-editor.js b/ui/widgets/nuxeo-html-editor.js
@@ -181,6 +181,10 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior.js';
 
     ready() {
       super.ready();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
       // init editor
       const { placeholder, readOnly } = this;
       const modules = { toolbar: '#toolbar' };

diff --git a/ui/widgets/nuxeo-selectivity.js b/ui/widgets/nuxeo-selectivity.js
@@ -6971,6 +6971,10 @@ typedArrayTags[weakMapTag] = false;
             @apply --nuxeo-tag;
           }
 
+          :host([dir='rtl']) .selectivity-multiple-selected-item {
+            float: right;
+          }
+
           .selectivity-multiple-selected-item.highlighted {
             background-color: #ccc;
           }
@@ -7029,6 +7033,11 @@ typedArrayTags[weakMapTag] = false;
             right: 0;
           }
 
+          :host([dir="rtl"]) .selectivity-caret {
+            left:0;
+            right: auto;
+          }
+
           @media only screen and (max-device-width: 480px) {
             .selectivity-single-result-container {
               right: 5px;
@@ -7125,6 +7134,10 @@ typedArrayTags[weakMapTag] = false;
 
     connectedCallback() {
       super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
       const options = {
         searchFloor: this.minChars, // minimum length a search value should be before choices are searched
         tokenSeparators: [this.separator],

diff --git a/ui/widgets/nuxeo-user-tag.js b/ui/widgets/nuxeo-user-tag.js
@@ -44,10 +44,16 @@ import './nuxeo-tooltip.js';
           nuxeo-user-avatar {
             margin: 0 0.5rem 0 0;
           }
+          :host([dir='rtl']) nuxeo-user-avatar {
+            margin: 0 0 0 0.5rem;
+          }
           nuxeo-tag {
             padding: 0 6px 0 0;
             max-width: 100%;
           }
+          :host([dir='rtl']) nuxeo-tag {
+            padding: 0 0 0 6px;
+          }
           .tag {
             @apply --layout-horizontal;
             @apply --layout-center;
@@ -231,6 +237,10 @@ import './nuxeo-tooltip.js';
 
     connectedCallback() {
       super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        const direction = document.documentElement.getAttribute('dir');
+        this.setAttribute('dir', direction);
+      }
       this.addEventListener('dom-change', this._layout);
       this.addEventListener('iron-resize', this._layout);
     }

diff --git a/ui/widgets/quill/quill-snow.js b/ui/widgets/quill/quill-snow.js
@@ -768,6 +768,10 @@ const template = html`
           top: 50%;
           width: 18px;
         }
+        :host([dir='rtl']) .ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
+          left: 0;
+          right: auto;
+        }
         .ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
         .ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
         .ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,