fix(toggle): RTL fix for toggle

ionic-team · May 28, 2017 · 2afb936 · 2afb936
1 parent e526ce1
commit 2afb936
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/src/components/toggle/toggle.ios.scss b/src/components/toggle/toggle.ios.scss
@@ -144,7 +144,7 @@ $toggle-ios-item-end-padding-start:    $item-ios-padding-start !default;
   background-color: $toggle-ios-handle-background-color;
   box-shadow: $toggle-ios-handle-box-shadow;
 
-  transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms;
+  transition: transform $toggle-ios-transition-duration, width 120ms ease-in-out 80ms, left 110ms ease-in-out 80ms, right 110ms ease-in-out 80ms;
 
   will-change: transform;
   contain: strict;
@@ -174,6 +174,10 @@ $toggle-ios-item-end-padding-start:    $item-ios-padding-start !default;
 .toggle-ios.toggle-checked .toggle-inner {
   transform: translate3d($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2), 0, 0);
 
+  @include rtl() {
+    transform: translate3d(-($toggle-ios-width - $toggle-ios-handle-width - ($toggle-ios-border-width * 2)), 0, 0);
+  }
+
 }
 
 

diff --git a/src/components/toggle/toggle.md.scss b/src/components/toggle/toggle.md.scss
@@ -180,6 +180,10 @@ $toggle-md-item-end-padding-start:       $item-md-padding-start !default;
 .toggle-md.toggle-checked .toggle-inner {
   background-color: $toggle-md-handle-background-color-on;
   transform: translate3d($toggle-md-track-width - $toggle-md-handle-width, 0, 0);
+
+  @include rtl() {
+    transform: translate3d(-($toggle-md-track-width - $toggle-md-handle-width), 0, 0);
+  }
 }
 
 

diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts
@@ -155,16 +155,18 @@ export class Toggle extends BaseInput<boolean> implements IonicTapInput, AfterCo
     let activated: boolean;
 
     if (this._value) {
-      if (currentX + 15 < this._startX) {
+      if ((this._plt.isRTL && (currentX - 15 > this._startX)) ||
+          (!this._plt.isRTL && (currentX + 15 < this._startX))) {
         dirty = true;
         value = false;
         activated = true;
       }
 
-    } else if (currentX - 15 > this._startX) {
+    } else if ((this._plt.isRTL && (currentX + 15 < this._startX)) ||
+               (!this._plt.isRTL && (currentX - 15 > this._startX))){
       dirty = true;
       value = true;
-      activated = (currentX < this._startX + 5);
+      activated = (this._plt.isRTL ? (currentX > this._startX - 5) : (currentX < this._startX + 5));
     }
 
     if (dirty) {
@@ -190,12 +192,14 @@ export class Toggle extends BaseInput<boolean> implements IonicTapInput, AfterCo
 
     this._zone.run(() => {
       if (this._value) {
-        if (this._startX + 4 > endX) {
+        if ((this._plt.isRTL && (this._startX - 4 < endX)) ||
+            (!this._plt.isRTL && (this._startX + 4 > endX))){
           this.value = false;
           this._haptic.selection();
         }
 
-      } else if (this._startX - 4 < endX) {
+      } else if ((this._plt.isRTL && (this._startX + 4 > endX)) ||
+                 (!this._plt.isRTL && (this._startX - 4 < endX))) {
         this.value = true;
         this._haptic.selection();
       }

diff --git a/src/components/toggle/toggle.wp.scss b/src/components/toggle/toggle.wp.scss
@@ -162,6 +162,10 @@ $toggle-wp-item-end-padding-start:       $item-wp-padding-start !default;
 .toggle-wp.toggle-checked .toggle-inner {
   background-color: $toggle-wp-handle-background-color-on;
   transform: translate3d($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2), 0, 0);
+
+  @include rtl() {
+    transform: translate3d(-($toggle-wp-track-width - $toggle-wp-handle-width - ($toggle-wp-track-border-width * 2) - ($toggle-wp-handle-left * 2)), 0, 0);
+  }
 }