ripples and icons

README.md

@@ -28,7 +28,8 @@ Ember Paper uses fonts from Google Fonts, so the URL to them has to be white lis
 ```js
 ENV.contentSecurityPolicy = {
   'default-src': "'none'",
-  'script-src': "'self'",
+  'script-src': "'self' 'unsafe-inline'",
+  'style-src': "'self' 'unsafe-inline' https://fonts.googleapis.com",
   'font-src': "'self' fonts.gstatic.com",
   'connect-src': "'self'",
   'img-src': "'self' data:",

addon/components/paper-button.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import BaseFocusable from './base-focusable';
-import RippleMixin from '../mixins/ripple-mixin';
+import RippleMixin from '../mixins/button-ripple-mixin';
 import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 
@@ -16,7 +16,6 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   }),
 
   /* RippleMixin overrides */
-  focus: false,
   isIconButton: Ember.computed(function() {
     return this.classNames.any(function(className) {
       return className.indexOf('md-icon-button') !== -1;
@@ -27,10 +26,6 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
       return className.indexOf('md-menu-item') !== -1;
     });
   }),
-  center: Ember.computed.alias('isIconButton'),
-  fitRipple: Ember.computed.alias('isIconButton'),
-
-  dimBackground: Ember.computed.not('isIconButton'),
 
   //bubble actions by default
   bubbles: true,

addon/components/paper-checkbox.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import BaseFocusable from './base-focusable';
-import RippleMixin from '../mixins/ripple-mixin';
+import RippleMixin from '../mixins/checkbox-ripple-mixin';
 import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 
@@ -14,11 +14,6 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   checked: false,
   toggle: true,
 
-  /* RippleMixin overrides */
-  center: true,
-  dimBackground: false,
-  fitRipple: true,
-  rippleContainerSelector: '.md-container',
 
   //bubble actions by default
   bubbles: true,

addon/components/paper-icon.js

@@ -4,15 +4,15 @@ import ColorMixin from 'ember-paper/mixins/color-mixin';
 var PaperIconComponent = Ember.Component.extend(ColorMixin, {
   tagName: 'md-icon',
   classNames: ['paper-icon', 'md-font', 'material-icons', 'md-default-theme'],
-  classNameBindings: ['iconClass', 'sizeClass', 'spinClass'],
+  classNameBindings: ['sizeClass', 'spinClass'],
 
   icon: '',
   spin: false,
   reverseSpin: false,
 
   iconClass: Ember.computed('icon', 'positionalIcon', function() {
     var icon = this.getWithDefault('positionalIcon', this.get('icon'));
-    return Ember.String.dasherize(icon);
+    return icon;
   }),
 
   spinClass: Ember.computed('spin', 'reverseSpin', function() {

addon/components/paper-item.js

@@ -1,18 +1,11 @@
 import Ember from 'ember';
-import RippleMixin from '../mixins/ripple-mixin';
+import RippleMixin from '../mixins/list-ripple-mixin';
 import ProxyMixin from 'ember-paper/mixins/proxy-mixin';
 
 export default Ember.Component.extend(RippleMixin, ProxyMixin, {
   tagName: 'md-list-item',
 
-  /* RippleMixin overrides */
-  center: false,
-  dimBackground: true,
-  outline: false,
-  isMenuItem: true,
-  fullRipple: true,
   rippleContainerSelector: '.md-no-style',
-
   noink: Ember.computed.not('shouldBeClickable'),
 
   classNameBindings: ['shouldBeClickable:md-clickable', 'hasProxiedComponent:md-proxy-focus'],

addon/components/paper-option.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 import PaperMenuAbstract from './paper-menu-abstract';
 
 import BaseFocusable from './base-focusable';
-import RippleMixin from '../mixins/ripple-mixin';
+import RippleMixin from '../mixins/button-ripple-mixin';
 
 export default BaseFocusable.extend(RippleMixin, {
   tagName: 'md-option',
@@ -14,13 +14,6 @@ export default BaseFocusable.extend(RippleMixin, {
 
   focus: false,
 
-  /* RippleMixin overrides */
-  center: false,
-  dimBackground: true,
-  outline: false,
-  isMenuItem: false,
-  fullRipple: true,
-
   isDisabled: Ember.computed('disabled', function () {
     return this.get('disabled') ? 'disabled' : null;
   }),

addon/components/paper-radio.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import BaseFocusable from './base-focusable';
-import RippleMixin from '../mixins/ripple-mixin';
+import RippleMixin from '../mixins/checkbox-ripple-mixin';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 
 export default BaseFocusable.extend(RippleMixin, ColorMixin, {
@@ -10,11 +10,6 @@ export default BaseFocusable.extend(RippleMixin, ColorMixin, {
   toggle: false,
   selected: null,
 
-  /* RippleMixin overrides */
-  center: true,
-  dimBackground: false,
-  fitRipple: true,
-  rippleContainerSelector: '.md-container',
 
   checked: Ember.computed('value', 'selected', function() {
     return this.get('value') === this.get('selected');

addon/components/paper-switch.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import BaseFocusable from './base-focusable';
-import RippleMixin from 'ember-paper/mixins/ripple-mixin';
+import RippleMixin from 'ember-paper/mixins/checkbox-ripple-mixin';
 import ProxiableMixin from 'ember-paper/mixins/proxiable-mixin';
 import ColorMixin from 'ember-paper/mixins/color-mixin';
 /* globals Hammer */
@@ -11,9 +11,6 @@ export default BaseFocusable.extend(RippleMixin, ProxiableMixin, ColorMixin, {
   classNameBindings: ['checked:md-checked', 'dragging:md-dragging'],
   toggle: true,
 
-  center: true,
-  dimBackground: false,
-  fitRipple: true,
   rippleContainerSelector: '.md-thumb',
 
   checked: false,

addon/mixins/button-ripple-mixin.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+import Ripple from './ripple-mixin';
+
+export default Ember.Mixin.create(Ripple, {
+    rippleContainerSelector: null,
+    fitRipple: Ember.computed.alias('isIconButton'),
+    center: Ember.computed.alias('isIconButton'),
+    dimBackground: Ember.computed.not('isIconButton')
+});

addon/mixins/checkbox-ripple-mixin.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+import Ripple from './ripple-mixin';
+
+export default Ember.Mixin.create(Ripple, {
+  rippleContainerSelector: '.md-container',
+  center: true,
+  dimBackground: false,
+  fitRipple: true
+});

addon/mixins/list-ripple-mixin.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+import Ripple from './ripple-mixin';
+
+export default Ember.Mixin.create(Ripple, {
+  rippleContainerSelector: '.md-container',
+  center: false,
+  dimBackground: true,
+  outline: false
+});