Start of ripple effects

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'

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>

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;
 

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) {
+  }
+}

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 {