search

knownasilya / ember-toggle

Checkbox based Toggle Switches for Ember
http://knownasilya.github.io/ember-toggle/
MIT License
112 stars 52 forks source link

Add material design toggle theme #90 #97

Closed mcoirault closed 7 years ago

mcoirault commented 7 years ago

Here is my PR related to issue #90. I'm fairly new to contributions like these so hopefully I made it properly.

lolmaus commented 7 years ago

I've deployed the demo of this branch for convenience: https://lolmaus.github.io/ember-toggle/

lolmaus commented 7 years ago

@mcoirault Are the styles hand-written or copied over from some Material Design kit?

lolmaus commented 7 years ago

BTW, why a pink hue? I've tried a few Material kits online and they all have teal toggles.

Maybe it makes sense to make the toggle configurable. On the other hand, it can be configured with CSS... :thinking:

knownasilya commented 7 years ago

FYI the drag doesn't work on that toggle.

Edit: it works, just not in the first section of the dummy app.. weird.

mcoirault commented 7 years ago

@lolmaus I copied the switches' color from the screenshot that @knownasilya provided in the issue. Material guidelines only provide with swatches and gradients. So it's basically up to whoever is implementing to decide of the colors. Maybe @knownasilya has a preference as to what the default color should be?

ember-toggle doesn't provide a way to configure toggle's color, only through overriding (or at least that how i handled it in the project where I use it). But that may be a interesting feature to add to the project.

@knownasilya I'll have a closer look, it seems odd indeed.

knownasilya commented 7 years ago

We should probably do green, since all of the active states are green by default, except for the default switch.. weird.

Maybe next major release we can make the default active state green too.

mcoirault commented 7 years ago

I went with the green used by the flat theme. I also modified the css to follow more closely the material guidelines.

As for the drag not working, it seems like it was due to the first one not having value and onToggle attributes. So I've added those two attributes back into the dummy page and it's working fine now. This might be an issue to look into.