Apply RTL logic for resizing (#132)

vaadin · Jan 23, 2020 · b6ae782 · b6ae782
1 parent 090f5cb
commit b6ae782
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 2 deletions.
diff --git a/src/vaadin-split-layout.html b/src/vaadin-split-layout.html
@@ -317,8 +317,11 @@
           }
 
           var distance = this.orientation === 'vertical' ? event.detail.dy : event.detail.dx;
-          this._setFlexBasis(this._primaryChild, this._startSize.primary + distance, this._startSize.container);
-          this._setFlexBasis(this._secondaryChild, this._startSize.secondary - distance, this._startSize.container);
+          const isRtl = this.orientation !== 'vertical' && this.getAttribute('dir') === 'rtl';
+          const dirDistance = isRtl ? -distance : distance;
+
+          this._setFlexBasis(this._primaryChild, this._startSize.primary + dirDistance, this._startSize.container);
+          this._setFlexBasis(this._secondaryChild, this._startSize.secondary - dirDistance, this._startSize.container);
 
           this.notifyResize();
 

diff --git a/test/vaadin-split-layout_test.html b/test/vaadin-split-layout_test.html
@@ -338,6 +338,27 @@
 
             expect(spy.called).to.be.true;
           });
+
+          describe('RTL mode', () => {
+
+            beforeEach(() => splitLayout.setAttribute('dir', 'rtl'));
+
+            it('resizes forwards', () => {
+              dragHandle(distance);
+
+              expect(Math.abs((isVertical ? first : second).getBoundingClientRect()[size] - (initialSize + distance))).to.be.at.most(1);
+              expect(Math.abs((isVertical ? second : first).getBoundingClientRect()[size] - (initialSize - distance))).to.be.at.most(1);
+            });
+
+            it('resizes backwards', () => {
+              dragHandle(distance);
+              dragHandle(-distance);
+
+              expect(Math.abs((isVertical ? first : second).getBoundingClientRect()[size] - initialSize)).to.be.at.most(1);
+              expect(Math.abs((isVertical ? second : first).getBoundingClientRect()[size] - initialSize)).to.be.at.most(1);
+            });
+
+          });
         });
 
       }

diff --git a/theme/lumo/vaadin-split-layout-styles.html b/theme/lumo/vaadin-split-layout-styles.html
@@ -92,6 +92,13 @@
       :host([theme~="minimal"]) > [part="splitter"]:active > [part="handle"]::after {
         opacity: 1;
       }
+
+      /* RTL specific styles */
+
+      :host([theme~="small"][dir="rtl"]) > [part="splitter"] {
+        border-left: auto;
+        border-right: 1px solid var(--lumo-contrast-10pct);
+      }
     </style>
   </template>
 </dom-module>