search

jaunesarmiento / fries

Fries helps you prototype Android apps using HTML, CSS, and JavaScript.
MIT License
1.55k stars 222 forks source link

Implement switch form elements #17

Closed jaunesarmiento closed 10 years ago

jaunesarmiento commented 11 years ago

Implementation of the following switches should be included in version 1.0.1:

Should be implemented with little to no JavaScript as much as possible.

It must follow the design guidelines as stated here: http://developer.android.com/design/building-blocks/switches.html

jaunesarmiento commented 11 years ago

Done implementing radio buttons and on/off switches on wip-1.0.1 branch. Check it out. :)

jadjoubran commented 11 years ago

Hey where can we see the radio buttons? Thanks!

mohitjain commented 11 years ago

+1

jaunesarmiento commented 11 years ago

Oops, I forgot to merge the branch with wip-1.0.1. I did a merge just now. Just pull the changes then check out /examples/new-contact.html to see the radio buttons.

jaunesarmiento commented 11 years ago

The switches needs testing on an Android device. I still don't have one so I can't test these right now. Will only close this issue once these have been tested on an Android device.

Wolfr commented 11 years ago

I'll test it, I have a Nexus 4 and Nexus 7.

On Fri, Jun 21, 2013 at 9:33 AM, Jaune Sarmiento notifications@github.comwrote:

The switches needs testing on an Android device. I still don't have one so I can't test these right now. Will only close this issue once these have been tested on an Android device.

— Reply to this email directly or view it on GitHubhttps://github.com/jaunesarmiento/fries/issues/17#issuecomment-19802125 .

jaunesarmiento commented 11 years ago

Great! Thanks @Wolfr. :)

jaunesarmiento commented 11 years ago

Just pull the latest wip-1.0.1 branch and check out /examples/new-contact.html for the markup. :)

Wolfr commented 11 years ago

I tested it and tried to film it need to find a way to make it better quality because this is pretty crappy: https://www.youtube.com/watch?v=bUQ2ujSa62A

tapping on/off switch works. But there is a weird "flash" above the switch when you do it.

swiping the on/off switch doesn't work. This works in Ratchet. I used fingerblast.js from Ratchet before to make the swiping work on desktop too without the use of chrome touch events (they use this in their demos)

target areas on radio/check are too small, the label around radio/checkbox should be 44px by 44px at least for a good hit area (I had trouble hitting them on actual device)

On Fri, Jun 21, 2013 at 9:53 AM, Jaune Sarmiento notifications@github.comwrote:

Just pull the latest wip-1.0.1 branch and check out /examples/new-contact.html for the markup. :)

— Reply to this email directly or view it on GitHubhttps://github.com/jaunesarmiento/fries/issues/17#issuecomment-19802750 .

Wolfr commented 11 years ago

How did you make this? https://www.youtube.com/watch?v=BpcLDI6c9Cc

On Fri, Jun 21, 2013 at 10:12 AM, Johan Ronsse johan.ronsse@gmail.comwrote:

I tested it and tried to film it need to find a way to make it better quality because this is pretty crappy: https://www.youtube.com/watch?v=bUQ2ujSa62A

tapping on/off switch works. But there is a weird "flash" above the switch when you do it.

swiping the on/off switch doesn't work. This works in Ratchet. I used fingerblast.js from Ratchet before to make the swiping work on desktop too without the use of chrome touch events (they use this in their demos)

target areas on radio/check are too small, the label around radio/checkbox should be 44px by 44px at least for a good hit area (I had trouble hitting them on actual device)

On Fri, Jun 21, 2013 at 9:53 AM, Jaune Sarmiento <notifications@github.com

wrote:

Just pull the latest wip-1.0.1 branch and check out /examples/new-contact.html for the markup. :)

— Reply to this email directly or view it on GitHubhttps://github.com/jaunesarmiento/fries/issues/17#issuecomment-19802750 .

jaunesarmiento commented 11 years ago

The weird flash above the switch is probably caused by the :active state highlight. Just need to position it correctly.

As for the swiping of on/off switch, I haven't done that yet. Will need a js component for that.

I think I'll have to change the markup a bit and the styles. Damn, I overlooked that one. It's really hard to see everything without a device lol.

Off topic: the video was captured using Screencast app. You can download it from Google Play.

Wolfr commented 11 years ago

OK I'll probably use that in the future because filming it with a camera and then exporting etc just gets in the way

On Fri, Jun 21, 2013 at 10:18 AM, Jaune Sarmiento notifications@github.comwrote:

The weird flash above the switch is probably caused by the :active state highlight. Just need to position it correctly.

As for the swiping of on/off switch, I haven't done that yet. Will need a js component for that.

I think I'll have to change the markup a bit and the styles. Damn, I overlooked that one. It's really hard to see everything without a device lol.

Off topic: the video was captured using Screencast app. You can download it from Google Play.

— Reply to this email directly or view it on GitHubhttps://github.com/jaunesarmiento/fries/issues/17#issuecomment-19803509 .

Wolfr commented 11 years ago

What's the exact app name? Finding a lot of **** Is it paid?

On Fri, Jun 21, 2013 at 10:31 AM, Johan Ronsse johan.ronsse@gmail.comwrote:

OK I'll probably use that in the future because filming it with a camera and then exporting etc just gets in the way

On Fri, Jun 21, 2013 at 10:18 AM, Jaune Sarmiento < notifications@github.com> wrote:

The weird flash above the switch is probably caused by the :active state highlight. Just need to position it correctly.

As for the swiping of on/off switch, I haven't done that yet. Will need a js component for that.

I think I'll have to change the markup a bit and the styles. Damn, I overlooked that one. It's really hard to see everything without a device lol.

Off topic: the video was captured using Screencast app. You can download it from Google Play.

— Reply to this email directly or view it on GitHubhttps://github.com/jaunesarmiento/fries/issues/17#issuecomment-19803509 .

jaunesarmiento commented 11 years ago

Here's the link: https://play.google.com/store/apps/details?id=com.ms.screencastfree

I'm just using the demo version.

Wolfr commented 11 years ago

Unfortunately you need a rooted device.

I don't want to spend my time on XDA so a no-go :(

On Fri, Jun 21, 2013 at 10:38 AM, Jaune Sarmiento notifications@github.comwrote:

Here's the link: https://play.google.com/store/apps/details?id=com.ms.screencastfree

I'm just using the demo version.

— Reply to this email directly or view it on GitHubhttps://github.com/jaunesarmiento/fries/issues/17#issuecomment-19804279 .

jaunesarmiento commented 11 years ago

Oh right, I forgot about that. Sorry. >.<