ripples and icons

[peec]

Fixes (1.0 wip):

• CSP for fonts include.
• Ripples: The ripple mixin now works like intended.
• paper-icon now works. Fix icon-fonts and upgrade fonts to v11.

[miguelcobain]

@peec I appreciate the effort.

Isn't a ripple service an overkill? A service should be used whenever there is a shared state. What shared state is there to hold in ripple effects?

[peec]

@miguelcobain True, there is no shared state. I figured that as a service the ripple effect can be used on DOM elements separately without any need of a component and multiple times. E.g:

didInsertElement() {
    this.get('ripple').attach(this.$('.some-item-one'));
    this.get('ripple').attach(this.$('.some-item-two'));
}

So basically it's completely separated from the component, rather bound to a DOM node.

But then again, I understand that it might be overkill.

[miguelcobain]

@peec

I don't see why that wouldn't be possible without a service.
Example:

didInsertElement() {
    this.attachRipple(this.$('.some-item-one'));
    this.attachRipple(this.$('.some-item-two'));
}

attachRipple would be a method provided by including RippleMixin.

[miguelcobain]

I still like the rippleContainerSelector approach for the simple scenarios:

1 - This would attach ripple to this.$() (or this.element) - default case

export default Ember.Component.extend(RippleMixin, {
});

2 - This would attach ripple to this.$('.inner-selector')

export default Ember.Component.extend(RippleMixin, {
  rippleContainerSelector: '.inner-selector'
});

3 - This would attach ripple to this.$('.inner-selector') and this.$('.another-selector')

export default Ember.Component.extend(RippleMixin, {
  rippleContainerSelector: ['.inner-selector', '.another-selector']
});

4 - This would not attach any ripple, basically turning it into the "manual" mode. This means the component including the mixin will have to manually call attachRipple with some selector/element at some point.

export default Ember.Component.extend(RippleMixin, {
  rippleContainerSelector: null,
  didInsertElement() {
    //this is a silly example, because it would be better to use case 3.
    //imagine that some-item-one and some-item-two are dynamically generated or something
    this.attachRipple(this.$('.some-item-one'));
    this.attachRipple(this.$('.some-item-two'));
  }
});

I think these guidelines would make it a really flexible mixin!

[peec]

@miguelcobain Good points. Moved from service to ripple-mixin.

[miguelcobain]

We're now using let for variables and const for constants.

[miguelcobain]

@peec I'd prefer to eliminate the intermediate RippleMixins you created and have the properties on the component itself.

Otherwise we have things like importing checkbox-ripple-mixin on paper-switch.
I see it as more explicit.

You have any objections?

[peec]

@miguelcobain Agreed. I updated and now it's just ripple-mixin along with optimizations for code structure.

[miguelcobain]

Since inkRipple() is basically a wrapper around rippleInk computed, we can replace all inkRipple() entries with this.get('rippleInk').

[miguelcobain]

Why did we remove those tests in paper-icon-test.js and paper-input-test.js?

[miguelcobain]

Why did these happen?
Did the stylesheets change icon names?

[peec]

See https://github.com/google/material-design-icons/blob/master/iconfont/codepoints , this is valid names. I could not get it working with dashes.

[miguelcobain]

I see. The icon names have underscores.

I wonder why we had dashes before. Did material icons change?

[peec]

I think something changed but not sure where, you can also try here:

• http://jsbin.com/rifotulaja/edit?html,css,output
  Change the underscores to dashes and it will break the icon,
  ref. Multi-word icon names not well documented google/material-design-icons#177

[peec]

@miguelcobain tests now passes, i think its ready.

[miguelcobain]

@peec only thing missing is to update the icon name list in the docs at ember-paper/tests/dummy/app/controllers/icons.js.

Alternatively we could just point users to the material icons page for that list. Thoughts?

[peec]

@miguelcobain I actually updated that list, but its too large for github to see here. https://github.com/peec/ember-paper/blob/wip/v1.0.0/tests/dummy/app/controllers/icons.js

List is directly from https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

Ill merge this then

[miguelcobain]

Ah, sorry. I didn't see that.
Good job!