That ripple shit

ionic/components.ts

@@ -15,6 +15,7 @@ export * from 'ionic/components/form/label'
 export * from 'ionic/components/list/list'
 
 // Material components/effects
+export * from 'ionic/components/material/button'
 export * from 'ionic/components/material/ripple'
 
 export * from 'ionic/components/modal/modal'

ionic/components/app/extensions/material.scss

@@ -2,4 +2,31 @@
   ion-app, .ion-app {
     font-family: 'RobotoDraft','Roboto',-apple-system,'Helvetica Neue',sans-serif;
   }
+
+  $content-padding: 16px;
+  
+  .padding,
+  .padding > .scroll-content {
+    padding: $content-padding;
+  }
+
+  .padding-top,
+  .padding-vertical {
+    padding-top: $content-padding;
+  }
+
+  .padding-right,
+  .padding-horizontal {
+    padding-right: $content-padding;
+  }
+
+  .padding-bottom,
+  .padding-vertical {
+    padding-bottom: $content-padding;
+  }
+
+  .padding-left,
+  .padding-horizontal {
+    padding-left: $content-padding;
+  }
 }

ionic/components/button/button.ts

@@ -1,9 +1,16 @@
-import {Directive, ElementRef, Optional, Ancestor} from 'angular2/angular2';
+import {Directive, ElementRef, Optional, Ancestor, onDestroy} from 'angular2/angular2';
 
 import {IonicConfig} from '../../config/config';
 import {Gesture} from '../../gestures/gesture';
 import * as dom  from '../../util/dom';
 
+@Directive({
+  selector: 'button,[button]'
+})
+export class Button {
+  constructor(elementRef: ElementRef, config: IonicConfig) {
+  }
+}
 
 @Directive({
   selector: '[tap-disabled]'

ionic/components/button/extensions/material.scss

@@ -3,15 +3,19 @@
 // --------------------------------------------------
 
 $button-material-font-size:                1.4rem !default;
-$button-material-padding:                  0 0.6rem !default;
+$button-material-min-height:               3.6rem !default;
-$button-material-box-shadow:               0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
+$button-material-padding:                  0 1.6rem !default;
+$button-material-box-shadow:               0 1px 1.5px 0 rgba(0, 0, 0, 0.12),0 1px 1px 0 rgba(0, 0, 0, 0.24);//0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
+$button-material-box-shadow-active:        0 4px 5px 0 rgba(0, 0, 0, 0.14),0 1px 10px 0 rgba(0, 0, 0, 0.12),0 2px 4px -1px rgba(0, 0, 0, 0.2); //0 1px 3px 0 rgba(0, 0, 0, 0.3); //0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
 $button-material-border-radius:            3px !default;
 
 
-.mode-md button {
+.mode-md button, .mode-md [button] {
   border: 0;
   border-radius: $button-material-border-radius;
 
+  min-height: $button-material-min-height;
+
   padding: $button-material-padding;
   text-transform: uppercase;
 
@@ -19,6 +23,13 @@ $button-material-border-radius:            3px !default;
   font-size: $button-material-font-size;
   box-shadow: $button-material-box-shadow;
 
+  transition: box-shadow 0.2s $animation-curve-fast-out-linear-in,
+              background-color 0.2s $animation-curve-default,
+              color 0.2s $animation-curve-default;
+
+  &:active, &.activated {
+    box-shadow: $button-material-box-shadow-active;
+  }
 
   &[icon] {
     font-size: $button-icon-size;

ionic/components/button/test/basic/main.html

@@ -1,4 +1,5 @@
 
+<div class="padding">
 <div>
   <a button href="#">a[button]</a>
   <button>button</button>
@@ -47,3 +48,4 @@
   <button dark class="hover">hover</button>
   <button dark class="activated">activated</button>
 </div>
+</div>

ionic/components/button/test/block/main.html

@@ -21,3 +21,6 @@
     <button block full clear danger>Full</a>
   </div>
 </div>
+<style>
+button, [button] { margin-bottom: 20px !important; }
+</style>

ionic/components/material/button.ts

@@ -0,0 +1,22 @@
+import {ElementRef, Directive, onDestroy} from 'angular2/angular2';
+
+import {IonicConfig} from '../../config/config';
+import {MaterialRippleEffect} from '../material/ripple';
+
+@Directive({
+  selector: 'button,[button]',
+  lifecycle: [onDestroy]
+})
+export class MaterialButton {
+  constructor(elementRef: ElementRef, config: IonicConfig) {
+    this.elementRef = elementRef;
+
+    if(config.setting('mdRipple')) {
+      this.ripple = new MaterialRippleEffect(this);
+    }
+  }
+
+  onDestroy() {
+
+  }
+}

ionic/components/material/ripple.ts

@@ -1,24 +1,18 @@
 /**
- * Portions lovingly adapted from Material Design Lite
+ * Lovingly Adapted from Material Design Lite
  * Copyright Google, 2015, Licensed under the Apache 2 license.
  * https://github.com/google/material-design-lite
  */
 
-import {Directive, ElementRef} from 'angular2/angular2';
+import {ElementRef, forwardRef} from 'angular2/angular2';
 
-@Directive({
+import {MaterialButton} from './button';
-  selector: '[md-ripple]',
+
-  host: {
+export class MaterialRippleEffect {
-    '(click)': 'elementClicked($event)'
+  constructor(button: MaterialButton) {
-  }
+    this.elementRef = button.elementRef;
-})
-export class MaterialRipple {
-  constructor(elementRef: ElementRef) {
-    this.elementRef = elementRef;
     this.element = this.elementRef.nativeElement;
 
-    console.log('Ripple', elementRef);
-
     var rippleContainer = document.createElement('span');
     rippleContainer.classList.add('md-ripple-container');
     this.rippleElement = document.createElement('span');

ionic/components/material/variables.scss

@@ -1,3 +1,9 @@
+$animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$animation-curve-linear-out-slow-in: cubic-bezier(0, 0, 0.2, 1) !default;
+$animation-curve-fast-out-linear-in: cubic-bezier(0.4, 0, 1, 1) !default;
+
+$animation-curve-default: $animation-curve-fast-out-slow-in !default;
+
 $shadow-multiplier: 0.7;
 $shadow-key-umbra-opacity:      $shadow-multiplier * 0.2;
 $shadow-key-penumbra-opacity:   $shadow-multiplier * 0.14;

ionic/config/annotations.ts

@@ -5,7 +5,7 @@ import {IonicConfig} from './config';
 import {IonicRouter} from '../routing/router';
 import {ionicBootstrap} from '../components/app/app';
 import {
-  Aside, Content, Scroll, Refresher,
+  Aside, Button, Content, Scroll, Refresher,
   Slides, Slide, SlidePager,
   Tabs, Tab,
   List, Item, ItemGroup, ItemGroupTitle,
@@ -20,8 +20,7 @@ import {
   TapClick, TapDisabled,
   Register,
 
-  // Material
+  MaterialButton
-  MaterialRipple
 } from '../ionic';
 
 
@@ -33,6 +32,7 @@ export const IonicDirectives = [
 
   // Content
   forwardRef(() => Aside),
+  forwardRef(() => Button),
   forwardRef(() => Content),
   forwardRef(() => Scroll),
   forwardRef(() => Refresher),
@@ -86,7 +86,7 @@ export const IonicDirectives = [
   forwardRef(() => TapDisabled),
 
   // Material
-  forwardRef(() => MaterialRipple)
+  forwardRef(() => MaterialButton)
 ];
 
 class IonicViewImpl extends View {

ionic/platform/registry.ts

@@ -56,7 +56,8 @@ Platform.register({
     iconMode: 'md',
     type: 'overlay',
     keyboardScrollAssist: true,
-    viewTransition: 'md'
+    viewTransition: 'md',
+    mdRipple: true
   },
   isMatch(p) {
     // "silk" is kindle fire
@@ -83,7 +84,8 @@ Platform.register({
     iconMode: 'ios',
     tapPolyfill: true,
     keyboardScrollAssist: true,
-    viewTransition: 'ios'
+    viewTransition: 'ios',
+    mdRipple: false
   },
   isMatch(p) {
     return p.isPlatform('ios', 'iphone|ipad|ipod');