Add paper-slider component

[mike1o1]

I combined the paper-slider component my ember-material-design project and added a demo page.

There are some .scss differences, as I have a color($color, $type) method, which tries to mirror the theming support from the angular project. If you'd rather those be simple map-get calls, I can refactor.

[miguelcobain]

@mike1o1 Thanks a lot for your effort! This isn't forgotten.

Can you elaborate on the color function? I've never really understood how angular material has, for example, background-color: '{{background-500-0.2}}';.

I think it would be a huge win to bring this to ember-paper, possibly using that function, especially because we could take the styles from angular material more easily.

I'm just asking so I can convert the rest of the project to this convention.

[mike1o1]

The theming code in Angular Material is pretty complex, and I haven't converted all of the functionality either. I don't think it's possible just using sass, but I did my best, which is very close to your implementation.

Your example basically means, find whatever color is defined as '500' for the background, and then add an opacity. That would be converted to sass as:

background-color: rgba(color($background, '500'), 0.2);

A better example might be

background-color: '{{foreground-4-0.5}}';

Would be converted to:

rgba(color($foreground, '4'), 0.5);

This would find the variable defined as the $foreground, which would either by light or dark. Then, it would do another lookup into that light or dark table to find the entry for '4', and apply the opacity.

There are still things I'm missing, such as the hues, and better support for contrasts, and I plan on adding better support for those soon.

[miguelcobain]

Cool stuff. Understood and definitely desirable.

Another perhaps more complex question is how angular material (or we in the future) tackle {{accent-color}}, {{accent-contrast}} and {{warn-color}}?
Does the same logic apply, like "get 'color' key from the 'accent' table", etc?

I don't see these accent, warn and background palettes defined anywhere in the repo, but I believe they're dynamically generated.

[mike1o1]

In [ember-material-design](Ember Material Design) I have $warn, $accent, etc. defined as a variable in variables.scss which points to a color, which is the way the Angular Material themes are setup. For $warn, it's then just a matter of doing the same lookup as color($warn, '500').

For contrast, I added a contrast entry to each color table. All the user has to do is do color($warn, 'contrast') the same way that they'd look up any other color.

For {{warn-color}}, I just make a call to color($warn) which defaults to '500' if no shade is passed in. I'll have to double check the Angular theming code to see if that is correct. I think that might actually also generate .md-hue-1, .md-hue-2 and .md-hue-3 classes. It's been awhile since I read through it.

[peec]

+1 for this, need the slider for my current project as well.

[benedikt-buchert]

I'm curious of what the differences between ember-material-design and ember paper are?

[peec]

@benedikt-d

I myself just started investigating and testing both ember-material-design and ember-paper, ember-paper seems much more clean in its implementation.

I think it's "unfortunate" that there currently are 3 separate projects:

• ember-paper (sources: angular material and WSK material sprint branch)
• ember-material-design (sources: angular material)
• ember-materialize (sources: Materialize

There are also some difference in what paper components that are available from the Material design: See this comparison table made by :
mike1o1/ember-material-design#8 (comment)

We should definitely gather everyone to one single repo as it would be more value to everyone including the devs working on these projects. And thus I think ember-paper is the best of the three as a base for further enhancements as its the project that has most traction and a longer commit history. But as of now, all of the 3 projects seems to be actively maintained.

This pull request makes the first way of porting ember-material-design to ember-paper though, so a start would be to merge this in to ember-paper :)

[peec]

After more testing, https://github.com/mike1o1/ember-material-design seems more complete imo (and actively maintained). So I guess my pull requests will go for https://github.com/mike1o1/ember-material-design

[miguelcobain]

@mike1o1 I finally had the chance to review your PR. Very sorry for the delay.

I just made some changes that can be seen in 7136c91.
I think we don't need a "constants" service (for now). That is very "angular". We can just go with a regular es6 module and avoid the service (minimal) overhead.

Hope to see more features implemented. We have seen many many projects merging through the ember community. This is the right way to open source. I hope to port some components from your repo to this one myself.

[mike1o1]

I agree with the constants service. I'll refactor that in my addon as well.

I have a fork of ember-paper with tabs working, but unit tests are failing with the latest Ember. Functionality everything is OK, so I assume it's an issue with the test itself. I'll work on getting that fixed and can submit a PR soon.

[miguelcobain]

I have a fork of ember-paper with tabs working, but unit tests are failing with the latest Ember.

Check my recent commits. I fixed those problems and removed deprecation warnings.
Ideally, you should merge upstream changes to your fork.

[mike1o1]

Sorry, I meant that my tests specific to the tabs are failing.