1160962 - [gaia-list] active effect length is short, can't full fill width size when tap at the edge

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Components, defect)

Description

[[e-mail]]

active effect length is short, can't full fill width size when tap at the edge

Comment 1

[[e-mail]]

This issue is caused by https://github.com/gaia-components/gaia-list/blob/master/gaia-list.js#L85

which divide item width with factor 1.2.

It means if origin item is 200px width (200/1.2 = 166), tap the edge in remaining area (34px at left & right) make the animation stop too early.

I'm not sure what's the prefered solution here for animation, 

1. to reduce the factor (means less edge area), or

2. keep current animation, but detect finger tap on edge and return the scale with full item width

Comment 2

[Harly Hsu[:harly]]

After an offline discussion with Fred and some quick testing, I think that it looks good if we could changed the dividing factor from 1.2 to 1. But before we make any changes, I want to make sure with Wilson first that if there is a reason why there is this 1.2 dividing factor in the first place.

Comment 3

[Wilson Page [:wilsonpage]]

(In reply to Harly Hsu from comment #2)
> After an offline discussion with Fred and some quick testing, I think that
> it looks good if we could changed the dividing factor from 1.2 to 1. But
> before we make any changes, I want to make sure with Wilson first that if
> there is a reason why there is this 1.2 dividing factor in the first place.

I think I just played around with a few values and this one seems to work the best (most of the time). If the ripple is intended to cover the entire <li>, we need to be smarter about what scale factor the ripple uses.

For example: If the <li> is tapped at x:0% or x:100%, then the ripple scale should be 200%. If it's tapped at x:50% then the ripple scale should be 100%.

If the ripple were to fade out to 0% opacity, this might not be so prevalent.

At the end of the day this is a question for visual :)

Comment 4

[[e-mail]]

@harly I changed the dividing factor from 1.2 to 1 and come out with a online sample. Could you help with visual to check if the ripple effect is as your expectation?

origin 
http://gaia-components.github.io/gaia-list/

with patch
http://gasolin.github.io/gaia-list/

Comment 5

[[e-mail]]

If the origin gaia-list page is not well formed, you can compare with origin components demo page

http://gaia-components.github.io/gaia-components/

Comment 6

[Harly Hsu[:harly]]

Hi Przemek,
Could you check on the two links below and try out the list button? Basically the differences are in the original version, when you tap on the edge of the list button, the circular press animation will not fill the whole list, and with Fred's patch, the animation will fill all the list button. Let me know if you are OK with the patch, thanks.

Original version: 
http://gaia-components.github.io/gaia-components/

Patch version:
http://gasolin.github.io/gaia-list/

Comment 7

[Przemek Abratowski [:przemek] UX]

This is great! Thanks guys :)

Comment 8

[[e-mail]]

Attachment: pull request redirect to github

Since the animation effect got UX confirm, set r flag for review :)

Comment 9

[Wilson Page [:wilsonpage]]

LANDED https://github.com/gaia-components/gaia-list/commit/d0b6f5411687cc51291cc71d9a7c57dd8cd28499
STAMPED https://github.com/gaia-components/gaia-list/releases/tag/v0.2.0