javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(toggle): RTL fix for toggle

Browse Source
This commit is contained in:
Sina
2017-05-28 12:29:37 +04:30
parent e526ce1da5
commit 2afb936536
4 changed files with 22 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/toggle/toggle.ios.scss
View File

@ -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);
}
}

4
src/components/toggle/toggle.md.scss
View File

@ -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);
}
}

14
src/components/toggle/toggle.ts
View File

@ -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();
}

4
src/components/toggle/toggle.wp.scss
View File

@ -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);
}
}