major button, shadow and ripple refactor. include hammerjs.

Brocfile.js

@@ -17,10 +17,12 @@ var app = new EmberAddon();
 // please specify an object with the list of modules as keys
 // along with the exports of each module as its value.
 
-app.import('vendor/material-icons/styles.css');
+/*app.import('vendor/material-icons/styles.css');
 app.import('vendor/material-icons/fonts/material-icon-font.eot', { destDir: 'fonts' });
 app.import('vendor/material-icons/fonts/material-icon-font.svg', { destDir: 'fonts' });
 app.import('vendor/material-icons/fonts/material-icon-font.ttf', { destDir: 'fonts' });
 app.import('vendor/material-icons/fonts/material-icon-font.woff', { destDir: 'fonts' });
 
+app.import('bower_components/hammerjs/hammer.js');*/
+
 module.exports = app.toTree();

README.md

@@ -1,7 +1,5 @@
 # Ember-paper
 
-# Introduction
-
 This project aims to bring Google's new [Material Design](https://www.google.com/design/spec/material-design/introduction.html) to Ember. The goal is to encapsulate everything possible in Ember components. This project is packaged as an [Ember-cli](http://www.ember-cli.com/) addon. This a allows a much nicer "plug and play" experience, as you can see for yourself in the "Installation" section.
 
 ## Installation

addon/components/base-focusable.js

@@ -5,22 +5,34 @@ export default Ember.Component.extend(EventsMixin,{
   disabled:false,
   pressed:false,
   active:false,
-  focused:false,
-  attributeBindings: ['disabled','pressed','active','focused'],
+  focus:false,
+  hover:false,
+  classNameBindings: ['disabled','pressed','active','focus','hover'],
 
   toggle:false,
 
+  /*
+   * Listen to `focusIn` and `focusOut` events instead of `focus` and `blur`.
+   * This way we don't need to explicitly bubble the events.
+   */
   focusIn: function() {
     if (!this.get('pressed')){
       // Only render the "focused" state if the element gains focus due to
       // keyboard navigation.
-      this.set('focused',true);
+      this.set('focus',true);
     }
   },
   focusOut: function(){
-    this.set('focused',false);
+    this.set('focus',false);
   },
-
+  mouseEnter:function(){
+    this.set('hover',true);
+  },
+  mouseLeave:function(e){
+    this.set('hover',false);
+    this._super(e);
+  },
+
   down:function(){
     this.set('pressed',true);
     if (this.toggle) {

addon/components/paper-button.js

@@ -1,31 +1,33 @@
 import Ember from 'ember';
 import BaseFocusable from './base-focusable';
+import ShadowMixin from '../mixins/shadow-mixin';
+import RippleMixin from '../mixins/ripple-mixin';
 
-export default BaseFocusable.extend({
+export default BaseFocusable.extend(ShadowMixin,RippleMixin,{
   classNames:['paper-button'],
-  raised:false,
-  recenteringTouch: false,
-  fill: true,
 
+  /* RippleMixin overrides */
+  animationName: 'inkRippleButton',
+  animationDuration: 350,
+  mousedownPauseTime: 175,
+
+  /* ShadowMixin properties */
   z:1,
+
   defaultZ:1,
   activeZ:2,
   disabledZ:0,
-  animatedShadow:true,
-
-  down:function(e){
-    this._super();
-    this.set('lastDownEvent',e);
-  },
-  up:function(e){
-    this._super();
-    this.set('lastUpEvent',e);
-  },
 
-  stateDidChange:Ember.observer('active','disabled',function(){
+  /*
+   * Function that handles button state changes.
+   * Changes z and sends action.
+   */
+  stateDidChange:Ember.observer('active','focus','disabled','hover',function(){
     var active = this.get('active'),
-      disabled = this.get('disabled');
-    if (active) {
+      disabled = this.get('disabled'),
+      hover = this.get('hover'),
+      focus = this.get('focus');
+    if (active || focus || hover) {
       this.sendAction('action', this.get('param'));
       this.set('z',this.get('activeZ'));
     } else if (disabled) {