ELEMENTS-1777: rtl support thumbnail & card

nuxeo · Dec 17, 2024 · 67f347b · 67f347b
1 parent 3c2402f
commit 67f347b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/ui/nuxeo-document-thumbnail/nuxeo-document-thumbnail.js b/ui/nuxeo-document-thumbnail/nuxeo-document-thumbnail.js
@@ -58,6 +58,10 @@ 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 +78,13 @@ import { I18nBehavior } from '../nuxeo-i18n-behavior';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        this.setAttribute('dir', getComputedStyle(this).direction);
+      }
+    }
+
     _thumbnail(doc) {
       if (
         doc &&

diff --git a/ui/widgets/nuxeo-card.js b/ui/widgets/nuxeo-card.js
@@ -98,6 +98,11 @@ import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
             --iron-icon-width: 16px;
             --iron-icon-height: 16px;
           }
+          
+          :host([dir="rtl"]) .header .icon {
+            margin-left: 8px;
+            margin-right: 0;
+          }
 
           .header .toggle {
             --iron-icon-width: 20px;
@@ -173,6 +178,13 @@ import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js';
       };
     }
 
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('dir')) {
+        this.setAttribute('dir', getComputedStyle(this).direction);
+      }
+    }
+
     _hasHeading(icon, heading, collapsible) {
       return icon || heading || collapsible;
     }