From 2510dc0ebd43ee3dbac7286b9b4686a9417d1ebf Mon Sep 17 00:00:00 2001 From: yashgupta-hyland Date: Wed, 29 Jan 2025 19:46:16 +0530 Subject: [PATCH] WEBUI-1616: support rtl webui 3.0.x (#2448) --- elements/document/nuxeo-document-page.js | 12 ++++ elements/document/nuxeo-picture-formats.js | 20 ++++++ elements/document/nuxeo-picture-info.js | 4 ++ elements/nuxeo-app.js | 67 ++++++++++++++++++- elements/nuxeo-app/nuxeo-menu-icon.js | 30 ++++++++- elements/nuxeo-app/nuxeo-page-item.js | 4 ++ elements/nuxeo-app/nuxeo-page.js | 25 +++++++ elements/nuxeo-browser/nuxeo-breadcrumb.js | 12 ++++ .../nuxeo-document-blob.js | 12 ++++ .../nuxeo-document-create-button.js | 13 ++++ .../nuxeo-document-tree.js | 40 ++++++++++- elements/nuxeo-home.html | 6 ++ .../nuxeo-note-editor/nuxeo-note-editor.js | 12 ++++ elements/nuxeo-suggester/nuxeo-suggester.js | 29 ++++++++ index.css | 15 +++++ index.html | 16 +++++ index.js | 13 ++++ .../features/step_definitions/admin.js | 2 +- .../features/step_definitions/browser.js | 4 +- .../features/step_definitions/search.js | 2 +- .../main/resources/web/nuxeo.war/ui/index.jsp | 16 +++++ themes/base.js | 16 +++++ 22 files changed, 360 insertions(+), 10 deletions(-) diff --git a/elements/document/nuxeo-document-page.js b/elements/document/nuxeo-document-page.js index 6b34d2e26d..f326bb1bba 100644 --- a/elements/document/nuxeo-document-page.js +++ b/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'; }, diff --git a/elements/document/nuxeo-picture-formats.js b/elements/document/nuxeo-picture-formats.js index 3d87520699..856b400ef3 100644 --- a/elements/document/nuxeo-picture-formats.js +++ b/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) => { diff --git a/elements/document/nuxeo-picture-info.js b/elements/document/nuxeo-picture-info.js index 34cab11212..1c7bf3390d 100644 --- a/elements/document/nuxeo-picture-info.js +++ b/elements/document/nuxeo-picture-info.js @@ -44,6 +44,10 @@ Polymer({ @apply --layout-flex; line-height: 2.2rem; } + + .properties .item > * { + unicode-bidi: plaintext; + }
diff --git a/elements/nuxeo-app.js b/elements/nuxeo-app.js index 1497efe714..65d8cf3be1 100644 --- a/elements/nuxeo-app.js +++ b/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; + } @@ -323,6 +362,7 @@ Polymer({ drawer-width="[[drawerWidth]]" responsive-width="720px" edge-swipe-sensitivity="0" + right-drawer$="[[_isRTL]]" >
@@ -394,7 +434,7 @@ Polymer({
- +
@@ -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; diff --git a/elements/nuxeo-app/nuxeo-menu-icon.js b/elements/nuxeo-app/nuxeo-menu-icon.js index 0c0d8fba98..ecb43c6650 100644 --- a/elements/nuxeo-app/nuxeo-menu-icon.js +++ b/elements/nuxeo-app/nuxeo-menu-icon.js @@ -72,7 +72,7 @@ Polymer({ - [[i18n(label)]]