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(segment): tap acivation working. Fixes #663

Browse Source
This commit is contained in:
Max Lynch
2015-12-04 11:38:58 -06:00
parent 2c13de9c7b
commit 86a687a5df
4 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
ionic/components/segment/modes/ios.scss
View File

@ -36,14 +36,14 @@ ion-segment {
background: $segment-button-ios-bg-color; background: $segment-button-ios-bg-color;
color: $segment-button-ios-bg-color-activated; color: $segment-button-ios-bg-color-activated;
&.activated { &.segment-activated {
opacity: 1; opacity: 1;
color: $segment-button-ios-text-color; color: $segment-button-ios-text-color;
background-color: $segment-button-ios-bg-color-activated; background-color: $segment-button-ios-bg-color-activated;
transition: $segment-button-ios-activated-transition; transition: $segment-button-ios-activated-transition;
} }
&:hover:not(.activated) { &:hover:not(.segment-activated) {
background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity); background-color: rgba($segment-button-ios-bg-color-activated, $segment-button-ios-hover-opacity);
} }
} }
@ -95,13 +95,13 @@ ion-segment {
background: $segment-button-ios-bg-color; background: $segment-button-ios-bg-color;
color: $button-color; color: $button-color;
&.activated { &.segment-activated {
opacity: 1; opacity: 1;
color: $activated-text-color; color: $activated-text-color;
background-color: $button-color; background-color: $button-color;
} }
&:hover:not(.activated) { &:hover:not(.segment-activated) {
background-color: rgba($button-color, $segment-button-ios-hover-opacity); background-color: rgba($button-color, $segment-button-ios-hover-opacity);
} }
} }

7
ionic/components/segment/modes/md.scss
View File

@ -24,7 +24,7 @@ ion-segment {
min-height: $segment-button-md-min-height; min-height: $segment-button-md-min-height;
line-height: $segment-button-md-line-height; line-height: $segment-button-md-line-height;
&.activated { &.activated, &.segment-activated {
color: $segment-button-md-text-color-activated; color: $segment-button-md-text-color-activated;
background-color: transparent; background-color: transparent;
border-color: $segment-button-md-border-color-activated; border-color: $segment-button-md-border-color-activated;
@ -41,7 +41,8 @@ ion-segment {
ion-segment { ion-segment {
margin: 0 auto; margin: 0 auto;
ion-segment-button[button][outline].activated { ion-segment-button[button][outline].activated,
ion-segment-button[button][outline].segment-activated {
background-color: transparent; background-color: transparent;
} }
} }
@ -57,7 +58,7 @@ ion-segment {
&[outline] { &[outline] {
color: $button-color; color: $button-color;
&.activated { &.activated, &.segment-activated {
background-color: transparent; background-color: transparent;
color: $button-color; color: $button-color;
border-color: $button-color; border-color: $button-color;

2
ionic/components/segment/segment.ts
View File

@ -132,7 +132,7 @@ export class Segment extends Ion {
], ],
host: { host: {
'(click)': 'click($event)', '(click)': 'click($event)',
'[class.activated]': 'isActive', '[class.segment-activated]': 'isActive',
} }
}) })
export class SegmentButton { export class SegmentButton {

3
ionic/components/tap-click/tap-click.ts
View File

@ -62,6 +62,7 @@ export class TapClick {
if (this.usePolyfill && this.startCoord && this.app.isEnabled()) { if (this.usePolyfill && this.startCoord && this.app.isEnabled()) {
let endCoord = pointerCoord(ev); let endCoord = pointerCoord(ev);
if (!hasPointerMoved(POINTER_TOLERANCE, this.startCoord, endCoord)) { if (!hasPointerMoved(POINTER_TOLERANCE, this.startCoord, endCoord)) {
console.debug('create click from touch ' + Date.now()); console.debug('create click from touch ' + Date.now());
@ -206,7 +207,7 @@ function removeListener(type, listener) {
} }
const ACTIVATABLE_ELEMENTS = /^(A|BUTTON)$/; const ACTIVATABLE_ELEMENTS = /^(A|BUTTON)$/;
const ACTIVATABLE_ATTRIBUTES = /tappable/; const ACTIVATABLE_ATTRIBUTES = /tappable|button/i;
const POINTER_TOLERANCE = 4; const POINTER_TOLERANCE = 4;
const POINTER_MOVE_UNTIL_CANCEL = 10; const POINTER_MOVE_UNTIL_CANCEL = 10;
const DISABLE_NATIVE_CLICK_AMOUNT = 2500; const DISABLE_NATIVE_CLICK_AMOUNT = 2500;