javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(switch): use .switch-activated

Browse Source
This commit is contained in:
Adam Bradley
2015-09-21 20:18:20 -05:00
parent ba29025d2e
commit f5d36faf08
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/switch/modes/ios.scss
View File

@ -73,7 +73,7 @@ ion-switch {
} }
&[aria-checked=true] .switch-icon:before, &[aria-checked=true] .switch-icon:before,
.activated .switch-icon:before { .switch-activated .switch-icon:before {
// inner bg track's oval, when checked // inner bg track's oval, when checked
transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0);
} }
@ -105,13 +105,13 @@ ion-switch {
transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0); transform: translate3d($switch-ios-width - $switch-ios-handle-width - ($switch-ios-border-width * 2), 0, 0);
} }
.activated .switch-icon:after { .switch-activated .switch-icon:after {
// when pressing down on the switch and NOT checked // when pressing down on the switch and NOT checked
// then make the knob wider // then make the knob wider
width: $switch-ios-handle-width + 6; width: $switch-ios-handle-width + 6;
} }
&[aria-checked=true] .activated .switch-icon:after { &[aria-checked=true] .switch-activated .switch-icon:after {
// when pressing down on the switch and IS checked // when pressing down on the switch and IS checked
// make the knob wider and move it left a bit // make the knob wider and move it left a bit
left: $switch-ios-border-width - 6; left: $switch-ios-border-width - 6;

10
ionic/components/switch/switch.ts
View File

@ -26,7 +26,7 @@ import {pointerCoord} from '../../util/dom';
'tappable': 'true', 'tappable': 'true',
'(touchstart)': 'swtch.pointerDown($event)', '(touchstart)': 'swtch.pointerDown($event)',
'(mousedown)': 'swtch.pointerDown($event)', '(mousedown)': 'swtch.pointerDown($event)',
'[class.activated]': 'swtch.isActivated' '[class.switch-activated]': 'swtch.isActivated'
} }
}) })
class MediaSwitch { class MediaSwitch {
@ -129,6 +129,7 @@ export class Switch extends Ion {
self.id = IonInput.nextId(); self.id = IonInput.nextId();
self.tabIndex = 0; self.tabIndex = 0;
self.lastTouch = 0;
self.onChange = (_) => {}; self.onChange = (_) => {};
self.onTouched = (_) => {}; self.onTouched = (_) => {};
@ -202,10 +203,10 @@ export class Switch extends Ion {
pointerDown(ev) { pointerDown(ev) {
if (/touch/.test(ev.type)) { if (/touch/.test(ev.type)) {
this.isTouch = true; this.lastTouch = Date.now();
} }
if (this.isTouch && /mouse/.test(ev.type)) { if (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) {
return; return;
} }
@ -218,7 +219,7 @@ export class Switch extends Ion {
} }
pointerUp(ev) { pointerUp(ev) {
if (this.isTouch && /mouse/.test(ev.type)) { if (this.lastTouch + 999 > Date.now() && /mouse/.test(ev.type)) {
return; return;
} }
@ -234,7 +235,6 @@ export class Switch extends Ion {
this.removeMoveListener(); this.removeMoveListener();
this.isActivated = false; this.isActivated = false;
this.isTouch = false;
} }
// Used by the view to update the model (Control) // Used by the view to update the model (Control)