From 86a687a5dfd089dfe397b96eadca8c951fa1c7bb Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Fri, 4 Dec 2015 11:38:58 -0600
Subject: [PATCH] fix(segment): tap acivation working. Fixes #663

---
 ionic/components/segment/modes/ios.scss | 8 ++++----
 ionic/components/segment/modes/md.scss  | 7 ++++---
 ionic/components/segment/segment.ts     | 2 +-
 ionic/components/tap-click/tap-click.ts | 3 ++-
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/ionic/components/segment/modes/ios.scss b/ionic/components/segment/modes/ios.scss
index 7070356231..e455aac04d 100644
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -36,14 +36,14 @@ ion-segment {
       background: $segment-button-ios-bg-color;
       color: $segment-button-ios-bg-color-activated;
 
-      &.activated {
+      &.segment-activated {
         opacity: 1;
         color: $segment-button-ios-text-color;
         background-color: $segment-button-ios-bg-color-activated;
         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);
       }
     }
@@ -95,13 +95,13 @@ ion-segment {
     background: $segment-button-ios-bg-color;
     color: $button-color;
 
-    &.activated {
+    &.segment-activated {
       opacity: 1;
       color: $activated-text-color;
       background-color: $button-color;
     }
 
-    &:hover:not(.activated) {
+    &:hover:not(.segment-activated) {
       background-color: rgba($button-color, $segment-button-ios-hover-opacity);
     }
   }
diff --git a/ionic/components/segment/modes/md.scss b/ionic/components/segment/modes/md.scss
index 1472b99bcb..958a3b041d 100644
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -24,7 +24,7 @@ ion-segment {
     min-height: $segment-button-md-min-height;
     line-height: $segment-button-md-line-height;
 
-    &.activated {
+    &.activated, &.segment-activated {
       color: $segment-button-md-text-color-activated;
       background-color: transparent;
       border-color: $segment-button-md-border-color-activated;
@@ -41,7 +41,8 @@ ion-segment {
   ion-segment {
     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;
     }
   }
@@ -57,7 +58,7 @@ ion-segment {
   &[outline] {
     color: $button-color;
 
-    &.activated {
+    &.activated, &.segment-activated {
       background-color: transparent;
       color: $button-color;
       border-color: $button-color;
diff --git a/ionic/components/segment/segment.ts b/ionic/components/segment/segment.ts
index e70dbcdce7..523e71f4d5 100644
--- a/ionic/components/segment/segment.ts
+++ b/ionic/components/segment/segment.ts
@@ -132,7 +132,7 @@ export class Segment extends Ion {
   ],
   host: {
     '(click)': 'click($event)',
-    '[class.activated]': 'isActive',
+    '[class.segment-activated]': 'isActive',
   }
 })
 export class SegmentButton {
diff --git a/ionic/components/tap-click/tap-click.ts b/ionic/components/tap-click/tap-click.ts
index c59b122192..334a4591ec 100644
--- a/ionic/components/tap-click/tap-click.ts
+++ b/ionic/components/tap-click/tap-click.ts
@@ -62,6 +62,7 @@ export class TapClick {
     if (this.usePolyfill && this.startCoord && this.app.isEnabled()) {
       let endCoord = pointerCoord(ev);
 
+
       if (!hasPointerMoved(POINTER_TOLERANCE, this.startCoord, endCoord)) {
         console.debug('create click from touch ' + Date.now());
 
@@ -206,7 +207,7 @@ function removeListener(type, listener) {
 }
 
 const ACTIVATABLE_ELEMENTS = /^(A|BUTTON)$/;
-const ACTIVATABLE_ATTRIBUTES = /tappable/;
+const ACTIVATABLE_ATTRIBUTES = /tappable|button/i;
 const POINTER_TOLERANCE = 4;
 const POINTER_MOVE_UNTIL_CANCEL = 10;
 const DISABLE_NATIVE_CLICK_AMOUNT = 2500;