feat(button): add ripple to buttons

- support md-no-ink - remove CSS ripple styles from structure
justindujardin · Dec 19, 2015 · eb78e1f · eb78e1f
1 parent 0fd473c
commit eb78e1f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 26 deletions.
diff --git a/ng2-material/components/button/button.scss b/ng2-material/components/button/button.scss
@@ -41,6 +41,13 @@ $md-icon-border-radius: $md-fab-border-radius;
   }
 }
 
+@mixin md-ripple-base() {
+  background-clip: padding-box;
+  overflow: hidden;
+  // The following hack causes Safari/Chrome to respect overflow hidden for ripples
+  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
+}
+
 /** Mixin to set button size to fit an icon */
 @mixin md-button-icon {
   margin: 0 $md-icon-button-margin;
@@ -50,6 +57,10 @@ $md-icon-border-radius: $md-fab-border-radius;
   padding: $baseline-grid;
   width: $md-icon-button-width;
   border-radius: $md-icon-border-radius;
+  .md-ripple-container {
+    border-radius: $md-icon-border-radius;
+    @include md-ripple-base();
+  }
 }
 
 /** Styles for all disabled buttons. */
@@ -138,6 +149,11 @@ $md-icon-border-radius: $md-fab-border-radius;
   &[disabled] {
     @include md-button-disabled();
   }
+
+  .md-ripple-container {
+    border-radius: $md-button-border-radius;
+    @include md-ripple-base()
+  }
 }
 
 /** Base styles for raised buttons, including FABs. */
@@ -243,6 +259,12 @@ $md-icon-border-radius: $md-fab-border-radius;
     }
   }
 
+  .md-ripple-container {
+    border-radius: $md-fab-border-radius;
+    @include md-ripple-base();
+  }
+
+
 
   &.md-mini {
     line-height: $md-fab-mini-line-height;

diff --git a/ng2-material/components/button/button.ts b/ng2-material/components/button/button.ts
@@ -2,15 +2,17 @@ import {Component, View, ViewEncapsulation, OnChanges} from 'angular2/core';
 
 import {TimerWrapper} from 'angular2/src/facade/async';
 import {isPresent} from 'angular2/src/facade/lang';
+import {ElementRef} from "angular2/core";
+import {Ink} from "../../core/util/ink";
+import {Attribute} from "angular2/core";
 
 
-// TODO(jelbourn): Ink ripples.
 // TODO(jelbourn): Make the `isMouseDown` stuff done with one global listener.
 
 @Component({
   selector: '[md-button]:not(a), [md-fab]:not(a), [md-raised-button]:not(a)',
   host: {
-    '(mousedown)': 'onMousedown()',
+    '(mousedown)': 'onMousedown($event)',
     '(focus)': 'onFocus()',
     '(blur)': 'onBlur()',
     '[class.md-button-focus]': 'isKeyboardFocused',
@@ -28,13 +30,25 @@ export class MdButton {
   /** Whether the button has focus from the keyboard (not the mouse). Used for class binding. */
   isKeyboardFocused: boolean = false;
 
-  onMousedown() {
+  private _noInk: boolean = false;
+
+  constructor(private _element: ElementRef, @Attribute('md-no-ink') mdNoInk: string) {
+    this._noInk = isPresent(mdNoInk);
+  }
+
+  onMousedown(event) {
     // We only *show* the focus style when focus has come to the button via the keyboard.
     // The Material Design spec is silent on this topic, and without doing this, the
     // button continues to look :active after clicking.
     // @see http://marcysutton.com/button-focus-hell/
     this.isMouseDown = true;
-    TimerWrapper.setTimeout(() => {this.isMouseDown = false}, 100);
+    TimerWrapper.setTimeout(() => {
+      this.isMouseDown = false
+    }, 100);
+
+    if (!this._noInk) {
+      Ink.rippleEvent(this._element.nativeElement, event);
+    }
   }
 
   onFocus() {

diff --git a/ng2-material/core/style/structure.scss b/ng2-material/core/style/structure.scss
@@ -109,33 +109,12 @@ input {
   top: 0;
   width: 100%;
   height: 100%;
-  transition: all 0.55s $swift-ease-out-timing-function;
 }
 
 .md-ripple {
-  position: absolute;
-  transform: scale(0);
-  transform-origin: 50% 50%;
+  position: relative;
   opacity: 0;
   border-radius: 50%;
-  &.md-ripple-placed {
-    $positionDuration: 0.9s * 2;
-    $sizeDuration: 0.65s * 2;
-    transition: left $positionDuration $swift-ease-out-timing-function,
-                top $positionDuration $swift-ease-out-timing-function,
-                margin $sizeDuration $swift-ease-out-timing-function,
-                border $sizeDuration $swift-ease-out-timing-function,
-                width $sizeDuration $swift-ease-out-timing-function,
-                height $sizeDuration $swift-ease-out-timing-function,
-                opacity $sizeDuration $swift-ease-out-timing-function,
-                transform $sizeDuration $swift-ease-out-timing-function;
-  }
-  &.md-ripple-scaled {
-    transform: scale(1);
-  }
-  &.md-ripple-active, &.md-ripple-full, &.md-ripple-visible {
-    opacity: 0.20;
-  }
 }
 
 .md-padding {