From 872b4db0ddd7c4bc5171a82b5c680799b3155c18 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Mon, 20 Jul 2015 16:02:48 -0500
Subject: [PATCH] That ripple shit

---
 ionic/components.ts                           |  1 +
 ionic/components/app/extensions/material.scss | 27 +++++++++++++++++++
 ionic/components/button/button.ts             |  9 ++++++-
 .../button/extensions/material.scss           | 17 +++++++++---
 ionic/components/button/test/basic/main.html  |  2 ++
 ionic/components/button/test/block/main.html  |  3 +++
 ionic/components/material/button.ts           | 22 +++++++++++++++
 ionic/components/material/ripple.ts           | 20 +++++---------
 ionic/components/material/variables.scss      |  6 +++++
 ionic/config/annotations.ts                   |  8 +++---
 ionic/platform/registry.ts                    |  6 +++--
 11 files changed, 98 insertions(+), 23 deletions(-)
 create mode 100644 ionic/components/material/button.ts

diff --git a/ionic/components.ts b/ionic/components.ts
index c332160b61..4a4bcc4419 100644
--- a/ionic/components.ts
+++ b/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'
diff --git a/ionic/components/app/extensions/material.scss b/ionic/components/app/extensions/material.scss
index f10d6d9ef7..bf78ed90a8 100644
--- a/ionic/components/app/extensions/material.scss
+++ b/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;
+  }
 }
diff --git a/ionic/components/button/button.ts b/ionic/components/button/button.ts
index 0a406611f0..61e24c4fb6 100644
--- a/ionic/components/button/button.ts
+++ b/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]'
diff --git a/ionic/components/button/extensions/material.scss b/ionic/components/button/extensions/material.scss
index 9366877e8f..0ee8fa8a68 100644
--- a/ionic/components/button/extensions/material.scss
+++ b/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-box-shadow:               0 2px 5px 0 rgba(0, 0, 0, 0.26) !default;
+$button-material-min-height:               3.6rem !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;
diff --git a/ionic/components/button/test/basic/main.html b/ionic/components/button/test/basic/main.html
index 4574a79b0c..0fc92a5f91 100644
--- a/ionic/components/button/test/basic/main.html
+++ b/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>
diff --git a/ionic/components/button/test/block/main.html b/ionic/components/button/test/block/main.html
index 8f393e711f..29b20c85e5 100644
--- a/ionic/components/button/test/block/main.html
+++ b/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>
diff --git a/ionic/components/material/button.ts b/ionic/components/material/button.ts
new file mode 100644
index 0000000000..3ccc9b2d39
--- /dev/null
+++ b/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() {
+
+  }
+}
diff --git a/ionic/components/material/ripple.ts b/ionic/components/material/ripple.ts
index 8fc8d8ae16..3aebb80ffa 100644
--- a/ionic/components/material/ripple.ts
+++ b/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({
-  selector: '[md-ripple]',
-  host: {
-    '(click)': 'elementClicked($event)'
-  }
-})
-export class MaterialRipple {
-  constructor(elementRef: ElementRef) {
-    this.elementRef = elementRef;
+import {MaterialButton} from './button';
+
+export class MaterialRippleEffect {
+  constructor(button: MaterialButton) {
+    this.elementRef = button.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');
diff --git a/ionic/components/material/variables.scss b/ionic/components/material/variables.scss
index a0f5dc29d8..bf4698c0c6 100644
--- a/ionic/components/material/variables.scss
+++ b/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;
diff --git a/ionic/config/annotations.ts b/ionic/config/annotations.ts
index 859b3fcbf6..c83cdaa2d3 100644
--- a/ionic/config/annotations.ts
+++ b/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
-  MaterialRipple
+  MaterialButton
 } 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 {
diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts
index 6c1d3b29ae..c97405599f 100644
--- a/ionic/platform/registry.ts
+++ b/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');