From a2d608630995f2eac136ecec4b76a06461abf618 Mon Sep 17 00:00:00 2001 From: rakeshkumar1019 Date: Wed, 29 Jan 2025 11:34:48 +0530 Subject: [PATCH] ELEMENTS-1779: rtl support 3.0.x --- .../nuxeo-document-comment.js | 8 +++++++ .../nuxeo-document-acl-table.js | 4 ++-- .../nuxeo-document-permissions.js | 13 +++++++++++ .../nuxeo-document-thumbnail.js | 11 ++++++++++ .../nuxeo-path-suggestion.js | 22 +++++++++++++++++-- ui/nuxeo-tree/nuxeo-tree-node.js | 12 ++++++++++ ui/nuxeo-user-group-management.js | 9 ++++++++ ui/nuxeo-video/nuxeo-video-conversions.js | 3 +++ ui/widgets/nuxeo-card.js | 13 +++++++++++ ui/widgets/nuxeo-directory-suggestion.js | 8 +++++++ ui/widgets/nuxeo-html-editor.js | 4 ++++ ui/widgets/nuxeo-selectivity.js | 13 +++++++++++ ui/widgets/nuxeo-user-tag.js | 10 +++++++++ ui/widgets/quill/quill-snow.js | 4 ++++ 14 files changed, 130 insertions(+), 4 deletions(-) diff --git a/ui/nuxeo-document-comments/nuxeo-document-comment.js b/ui/nuxeo-document-comments/nuxeo-document-comment.js index 98918201e..d6d932793 100644 --- 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 index a71b8f806..450726ad6 100644 --- 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 index 8a27af1ac..c61fb89ad 100644 --- 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 index ef554ad99..697c18b7e 100644 --- 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; + } [[_title(document)]] @@ -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 index 7e63596e1..55076a685 100644 --- 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 index 972beed2b..c1a22618a 100644 --- 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 index da7e10f03..c0b862633 100644 --- 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 index 24ac1f99b..ce02fca1a 100644 --- 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 index 783b29688..e006212f3 100644 --- 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 index ad0bacd80..7d09e5234 100644 --- 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 index 9c23571e0..5b59d7ff8 100644 --- 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 index cf8b70a9c..e3f25bf6d 100644 --- 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 index bb709590e..766630e98 100644 --- 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 index e6f40ebbf..7db71fc49 100644 --- 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,