From 2270f8be741890a1668decf2a90c092bfcb83661 Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Sun, 19 Jul 2015 18:02:54 -0500
Subject: [PATCH] Start of ripple effects

---
 ionic/components.ts                             |  4 ++++
 ionic/components/app/test/material/index.ts     |  4 +++-
 .../components/button/extensions/material.scss  |  2 +-
 ionic/components/material/ripple.scss           |  0
 ionic/components/material/ripple.ts             | 17 +++++++++++++++++
 ionic/config/annotations.ts                     |  8 +++++++-
 6 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 ionic/components/material/ripple.scss
 create mode 100644 ionic/components/material/ripple.ts

diff --git a/ionic/components.ts b/ionic/components.ts
index a98961691f..c332160b61 100644
--- a/ionic/components.ts
+++ b/ionic/components.ts
@@ -13,6 +13,10 @@ export * from 'ionic/components/form/text-input'
 export * from 'ionic/components/form/tap-input'
 export * from 'ionic/components/form/label'
 export * from 'ionic/components/list/list'
+
+// Material components/effects
+export * from 'ionic/components/material/ripple'
+
 export * from 'ionic/components/modal/modal'
 export * from 'ionic/components/nav/nav'
 export * from 'ionic/components/nav/nav-controller'
diff --git a/ionic/components/app/test/material/index.ts b/ionic/components/app/test/material/index.ts
index ad625622f8..e376e159fd 100644
--- a/ionic/components/app/test/material/index.ts
+++ b/ionic/components/app/test/material/index.ts
@@ -14,7 +14,9 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
     '</ion-nav-items>' +
   '</ion-navbar>' +
   '<ion-content>' +
-    `<ion-list>
+    `
+    <button primary md-ripple>Cleeek</button>
+    <ion-list>
       <ion-item>
         <h3>All Genres</h3>
         <h4>Jan 17 2015</h4>
diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss
index d15a2fb640..9366877e8f 100644
--- a/ionic/components/button/extensions/material.scss
+++ b/ionic/components/button/extensions/material.scss
@@ -8,7 +8,7 @@ $button-material-box-shadow:               0 2px 5px 0 rgba(0, 0, 0, 0.26) !defa
 $button-material-border-radius:            3px !default;
 
 
-.button.button-md {
+.mode-md button {
   border: 0;
   border-radius: $button-material-border-radius;
 
diff --git a/ionic/components/material/ripple.scss b/ionic/components/material/ripple.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/ionic/components/material/ripple.ts b/ionic/components/material/ripple.ts
new file mode 100644
index 0000000000..9ea7dc8354
--- /dev/null
+++ b/ionic/components/material/ripple.ts
@@ -0,0 +1,17 @@
+import {Directive, ElementRef} from 'angular2/angular2';
+
+@Directive({
+  selector: '[md-ripple]',
+  host: {
+    '(click)': 'elementClicked($event)'
+  }
+})
+export class MaterialRipple {
+  constructor(elementRef: ElementRef) {
+    this.elementRef = elementRef;
+    console.log('Ripple', elementRef);
+  }
+
+  elementClicked(event) {
+  }
+}
diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts
index e122c4ba58..859b3fcbf6 100644
--- a/ionic/config/annotations.ts
+++ b/ionic/config/annotations.ts
@@ -18,7 +18,10 @@ import {
   RadioGroup, RadioButton, SearchBar,
   Nav, NavbarTemplate, Navbar, NavPush, NavPop,
   TapClick, TapDisabled,
-  Register
+  Register,
+
+  // Material
+  MaterialRipple
 } from '../ionic';
 
 
@@ -81,6 +84,9 @@ export const IonicDirectives = [
   // Gestures
   forwardRef(() => TapClick),
   forwardRef(() => TapDisabled),
+
+  // Material
+  forwardRef(() => MaterialRipple)
 ];
 
 class IonicViewImpl extends View {