1067310 - [Contacts] [Form] Implement animation when new field groups appear on user's demand

Status: RESOLVED FIXED

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

Description

[Sergi Mansilla [:sergi] (Telenor) [PTO]]

We need to agree on animations for the contacts form that are viable to implement in CSS with an HTML structure that is as close as possible to our current one, to avoid edge cases.

Comment 2

[Jose Manuel Cantera]

We need input from Carrie and Fang. A meeting has been proposed by email

thanks

Comment 3

[Carrie Wang [New account: [e-mail]]]

Hi Jose, 

Yes, I'd love to, but I haven't receive the invitation. What time will be fine for you guys? Thanks!

Comment 4

[Jose Manuel Cantera]

invitation for a meeting to be held next monday has been sent, thanks!

Comment 5

[Jose Manuel Cantera]

(In reply to Jose Manuel Cantera from comment #4)
> invitation for a meeting to be held next monday has been sent, thanks!

The outcome of the meeting is:

- We have two different alternatives for the animations:

1. A "expand" animation that will play with the height of the block added. That might work provided we don't animate the 'cross' button at the same time

2. A fade-in, fade-out animation that will play with opacity

- Dev will create a prototype showing option 1 and UX will provide feedback afterwards until further refinement

Once we know the results we will decide next steps or other ideas

Comment 6

[Jose Manuel Cantera]

First version of the solution suggested by Fang can be found at

https://github.com/jmcanterafonseca/gaia/tree/animations_prototype

patch over master branch: 

https://github.com/jmcanterafonseca/gaia/commit/e24cd8b585f708dc8474077ea9260b30b2cfca89.patch

Comment 7

[Jose Manuel Cantera]

(In reply to Jose Manuel Cantera from comment #6)
> First version of the solution suggested by Fang can be found at
> 
> https://github.com/jmcanterafonseca/gaia/tree/animations_prototype
> 
> patch over master branch: 

https://github.com/mozilla-b2g/gaia/pull/25323.patch

(that is the latest version of the patch). Now I've crafted a better solution based on opacity. The animation durations can be adjusted by, but I think we are here on the right way. 

Carrie and Fang please let me know

thanks!

Comment 8

[Jose Manuel Cantera]

Today We had another meeting with Fang and Carrie. As per the feedback received from them, I've updated the branch. Please note that the animation is only implemented for the 'phone' fieldset. 

Below you can find how to change the animation parameters 

Go to apps/communications/contacts/style/contacts.css, line 931, there you can find the animation time for the containing block, currently it is 0.25s

https://github.com/mozilla-b2g/gaia/pull/25323/files#diff-852e9f3dfce815c64e366aed859e23cfR931

In line 949 it can be changed the duration of the animation for the first row of elements contained within the referred block. Currently the duration is 0.20s and it starts 0.15s right after the startup of the animation of the block. 

https://github.com/mozilla-b2g/gaia/pull/25323/files#diff-852e9f3dfce815c64e366aed859e23cfR931

In line 953 it can be changed the animation duration of the second row currently it is 0.20s as well. This animation starts right after the animation of the first row finishes (0.20s + 0.15s = 0.35s).

https://github.com/mozilla-b2g/gaia/pull/25323/files#diff-852e9f3dfce815c64e366aed859e23cfR953

The timing functions of the animations (ease, linear) can be changed as well.

Comment 9

[Jose Manuel Cantera]

I have prepared a new version of the prototype, now with the rotation animation of the '+' to 'x' button. for the final implementation we would need a sprite with these two images in order not to reload these two different resources which will make the transition from '+' to 'x' smoother.

Comment 10

[Fang Shih [:fang]]

(In reply to Jose Manuel Cantera from comment #9)
> I have prepared a new version of the prototype, now with the rotation
> animation of the '+' to 'x' button. for the final implementation we would
> need a sprite with these two images in order not to reload these two
> different resources which will make the transition from '+' to 'x' smoother.

Hi Jose, For the sprite you need. Do I provide a sign of + and x without the background circle? Is that what you need? Thanks

Comment 11

[Cristian Rodriguez (:crdlc)]

Hi Fang, I think that he needs with the background to render faster although I am not pretty sure

Comment 12

[Jose Manuel Cantera]

Yes as Cristian said we would need a new resource that will be a sprite containing these two individual images:

https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/contacts/style/images/Add_button.png

https://github.com/mozilla-b2g/gaia/blob/master/apps/communications/contacts/style/images/icon_remove.png

Comment 13

[Fang Shih [:fang]]

Attachment: Contact_actionbutton_Sprite.zip

Attached the image assets. Thanks!

Comment 14

[Jose Manuel Cantera]

I've updated the patch with the sprite and send an invitation to Carrie and Fang for a meeting tomorrow in order to sort it out, times, and final spec. Then, I will productize the prototype.

Comment 15

[Jose Manuel Cantera]

New version ready. Now there is a transition between the '+' button and the 'x' button. The active state of the 'Add field' button has been erased. 

Carrie, Fang, could you check?. We will meet tomorrow at 8:00 AM CET.

thanks!

Comment 16

[Fang Shih [:fang]]

Attachment: contact_actionbutton_sprite.zip

Hi Jose, here is the sprite with 3 status button in it. Thanks

Comment 17

[Fang Shih [:fang]]

Attachment: Rotation Spec.png

Hi Jose, I also attached the rotation spec with how the layer showing. Just a reference for you! Thanks a lot!

Comment 18

[Jose Manuel Cantera]

Today we have a meeting UX-dev and we have decided that for the moment we will only try to land the animation that shows the fields progressively when a new field group is created by the user on demand. 

The rotation of the button will be postponed until we have an improved design of the contacts form page.

Comment 19

[Jose Manuel Cantera]

Attachment: 25776.html

Comment 20

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8515919 [details]
25776.html

LGTM, Perfect!! Thanks

Comment 21

[Carrie Wang [New account: [e-mail]]]

Comment on attachment 8515919 [details]
25776.html

I've checked the patch with Fang. It looks nice. Great job! Thanks!

Comment 22

[Fang Shih [:fang]]

Comment on attachment 8515919 [details]
25776.html

Looks great!!! Thanks Jose!!

Comment 23

[Jose Manuel Cantera]

https://github.com/mozilla-b2g/gaia/commit/89a863f05800e143bdabbeb3859f9fbc20cb3040

Comment 24

[Jose Manuel Cantera]

Comment on attachment 8515919 [details]
25776.html

[Approval Request Comment]
[Bug caused by] (feature/regressing bug #):
[User impact] if declined:
[Testing completed]:
[Risk to taking this patch] (and alternatives if risky):
[String changes made]:

Comment 25

[Jose Manuel Cantera]

(In reply to Jose Manuel Cantera from comment #24)
> Comment on attachment 8515919 [details]
> 25776.html
> 
> [Approval Request Comment]
> [Bug caused by] (feature/regressing bug #): New visual design for contacts
> [User impact] if declined: Poor UX perception
> [Testing completed]: Yes
> [Risk to taking this patch] (and alternatives if risky): No-risk patch. Mostly CSS and HTML changes
> [String changes made]: None

Asking approval for v2.1 as it would be a good thing to improve the overall UX of the Contacts App in v2.1

Comment 26

[bhavana bajaj [:bajaj]]

(In reply to Jose Manuel Cantera from comment #25)
> (In reply to Jose Manuel Cantera from comment #24)
> > Comment on attachment 8515919 [details]
> > 25776.html
> > 
> > [Approval Request Comment]
> > [Bug caused by] (feature/regressing bug #): New visual design for contacts
> > [User impact] if declined: Poor UX perception
> > [Testing completed]: Yes
> > [Risk to taking this patch] (and alternatives if risky): No-risk patch. Mostly CSS and HTML changes
> > [String changes made]: None
> 
> Asking approval for v2.1 as it would be a good thing to improve the overall
> UX of the Contacts App in v2.1

Although this is a great improvement, given where we are in 2.1 on the release timeline, we are only taking ship-blockers at this point. So this will be improved in 2.2 and on :)