Add rtl support (#1706)

* Initial rtl support

* Fix the styles, update frozen, add rtl visual tests

* Optimize frozen cells calculations

* Add test for frozen columns

* Import dir mixin in tree toggle

* Fix FF issues with normalizedScrollLeft

* Fix sorter order

* Update sorting visual tests and fix tree toggle rtl material

* Add missing sorting styles

* Move toggle margin to not(rtl)

* Bump dependencies

* Move _updateScrollerMeasurements to vaadin-grid-scroll-mixin

* Remove extra count styles

* Update helper

* Bump version

Author: yuriy-fix

bower.json

@@ -64,21 +64,21 @@
     "iron-ajax": "PolymerElements/iron-ajax#^v2.0.0",
     "app-localize-behavior": "^v2.0.0",
     "iron-list": "^v2.0.4",
-    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0",
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0-alpha1",
     "vaadin-button": "vaadin/vaadin-button#^2.1.0",
-    "vaadin-context-menu": "^4.3.1"
+    "vaadin-context-menu": "vaadin/vaadin-context-menu#^4.4.0-alpha1"
   },
   "dependencies": {
     "polymer": "^2.0.0",
     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^v2.0.0",
     "iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^v2.0.0",
     "iron-a11y-keys-behavior": "^v2.0.0",
     "iron-a11y-announcer": "^v2.0.0",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
-    "vaadin-checkbox": "vaadin/vaadin-checkbox#^2.2.1",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.1.1",
-    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.1",
-    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.1",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.1.1"
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.5.2",
+    "vaadin-checkbox": "vaadin/vaadin-checkbox#^2.3.0-alpha1",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.6.0-alpha4",
+    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0",
+    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.3.2",
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.2"
   }
 }

src/vaadin-grid-column.html

@@ -6,6 +6,7 @@
 
 <link rel="import" href="../../polymer/polymer-element.html">
 <link rel="import" href="../../polymer/lib/utils/flattened-nodes-observer.html">
+<link rel="import" href="../../vaadin-element-mixin/vaadin-dir-mixin.html">
 <link rel="import" href="vaadin-grid-templatizer.html">
 
 <script>
@@ -512,7 +513,7 @@
      * @memberof Vaadin
      * @mixes Vaadin.Grid.ColumnBaseMixin
      */
-    class GridColumnElement extends Vaadin.Grid.ColumnBaseMixin(Polymer.Element) {
+    class GridColumnElement extends Vaadin.Grid.ColumnBaseMixin(Vaadin.DirMixin(Polymer.Element)) {
       static get is() {
         return 'vaadin-grid-column';
       }

src/vaadin-grid-scroll-mixin.html

@@ -350,12 +350,22 @@
             cell.style.transform = '';
           });
           this._frozenCells = Array.prototype.slice.call(this.$.table.querySelectorAll('[frozen]'));
+          this._updateScrollerMeasurements();
           this._translateStationaryElements();
         }
       );
       this._updateLastFrozen();
     }
 
+    _updateScrollerMeasurements() {
+      if (this._frozenCells.length > 0 && this.__isRTL) {
+        this.__scrollerMetrics = {
+          scrollWidth: this.$.outerscroller.scrollWidth,
+          clientWidth: this.$.outerscroller.clientWidth
+        };
+      }
+    }
+
     _updateLastFrozen() {
       if (!this._columnTree) {
         return;
@@ -386,9 +396,15 @@
         this.$.footer.style.transform = this.$.header.style.transform = this._getTranslate(0, this._scrollTop);
       }
 
-      var frozenCellTransform = this._getTranslate(this._scrollLeft, 0);
-      for (var i = 0; i < this._frozenCells.length; i++) {
-        this._frozenCells[i].style.transform = frozenCellTransform;
+      if (this._frozenCells.length > 0) {
+        const x = this.__isRTL ?
+          this.__getNormalizedScrollLeft(this.$.table) + this.__scrollerMetrics.clientWidth -
+          this.__scrollerMetrics.scrollWidth
+          : this._scrollLeft;
+        var frozenCellTransform = this._getTranslate(x, 0);
+        for (var i = 0; i < this._frozenCells.length; i++) {
+          this._frozenCells[i].style.transform = frozenCellTransform;
+        }
       }
     }
 

src/vaadin-grid-sorter.html

@@ -7,6 +7,7 @@
 <link rel="import" href="../../polymer/polymer.html">
 <link rel="import" href="../../polymer/lib/elements/custom-style.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
+<link rel="import" href="../../vaadin-element-mixin/vaadin-dir-mixin.html">
 
 <custom-style>
   <style>
@@ -45,6 +46,7 @@
 
       [part="indicators"]::before {
         font-family: 'vaadin-grid-sorter-icons';
+        display: inline-block;
       }
 
       :host(:not([direction])) [part="indicators"]::before {
@@ -102,7 +104,7 @@
        *
        * @memberof Vaadin
        */
-      class GridSorterElement extends Vaadin.ThemableMixin(Polymer.Element) {
+      class GridSorterElement extends Vaadin.ThemableMixin(Vaadin.DirMixin(Polymer.Element)) {
         static get is() {
           return 'vaadin-grid-sorter';
         }

src/vaadin-grid-styles.html

@@ -306,6 +306,28 @@
         width: 100%;
         will-change: transform;
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part~="reorder-ghost"] {
+        left: auto;
+        right: 0;
+      }
+
+      :host([dir="rtl"]) [part~="resize-handle"] {
+        left: 0;
+        right: auto;
+      }
+
+      :host([dir="rtl"]) [part~="resize-handle"]::before {
+        transform: translateX(50%);
+      }
+
+      :host([dir="rtl"]) [last-column] [part~="resize-handle"]::before,
+      :host([dir="rtl"]) [last-frozen] [part~="resize-handle"]::before {
+        left: 0;
+        right: auto;
+      }
     </style>
   `);
 

src/vaadin-grid-tree-toggle.html

@@ -8,6 +8,7 @@
 <link rel="import" href="../../polymer/lib/elements/custom-style.html">
 <link rel="import" href="../../polymer/lib/utils/debounce.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
+<link rel="import" href="../../vaadin-element-mixin/vaadin-dir-mixin.html">
 
 <custom-style>
   <style>
@@ -129,7 +130,7 @@
      * @memberof Vaadin
      * @mixes Vaadin.ThemableMixin
      */
-    class GridTreeToggleElement extends Vaadin.ThemableMixin(Polymer.Element) {
+    class GridTreeToggleElement extends Vaadin.ThemableMixin(Vaadin.DirMixin(Polymer.Element)) {
       static get is() {
         return 'vaadin-grid-tree-toggle';
       }

src/vaadin-grid.html

@@ -420,6 +420,13 @@
         this.recalculateColumnWidths();
       }
 
+      attributeChangedCallback(name, oldValue, newValue) {
+        super.attributeChangedCallback(name, oldValue, newValue);
+        if (name === 'dir') {
+          this.__isRTL = newValue === 'rtl';
+        }
+      }
+
       __hasRowsWithClientHeight() {
         return !!Array.from(this.$.items.children).filter(row => row.clientHeight).length;
       }
@@ -770,6 +777,7 @@
       _resizeHandler() {
         this._updateDetailsCellHeights();
         this._accessIronListAPI(super._resizeHandler, true);
+        this._updateScrollerMeasurements();
         this._updateHeaderFooterMetrics();
       }
 

test/.eslintrc.json

@@ -40,6 +40,8 @@
     "scrollToEnd": false,
     "isFullOfItems": false,
     "isVisible": false,
+    "isWithinParentConstraints": false,
+    "getCustomCSSPropertyValue": false,
     "defaultCellWidth": false,
     "listenOnce": false,
     "MockInteractions": false,