Closed Bug 1067310 Opened 8 years ago Closed 8 years ago

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

Categories

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

ARM
Gonk (Firefox OS)
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
2.1 S8 (7Nov)

People

(Reporter: sergi, Assigned: jmcf)

References

Details

(Whiteboard: [p=3])

Attachments

(3 files, 1 obsolete file)

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.
No longer blocks: 1061504
Target Milestone: --- → 2.1 S5 (26sep)
Whiteboard: [p=3]
Assignee: nobody → jmcf
QA Whiteboard: [EditRedesign]
Target Milestone: 2.1 S5 (26sep) → 2.1 S6 (10oct)
Target Milestone: 2.1 S6 (10oct) → 2.1 S7 (24Oct)
We need input from Carrie and Fang. A meeting has been proposed by email

thanks
Flags: needinfo?(fshih)
Flags: needinfo?(cawang)
Hi Jose, 

Yes, I'd love to, but I haven't receive the invitation. What time will be fine for you guys? Thanks!
Flags: needinfo?(cawang)
Flags: needinfo?(jmcf)
invitation for a meeting to be held next monday has been sent, thanks!
Flags: needinfo?(jmcf)
Flags: needinfo?(fshih)
(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
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
Flags: needinfo?(fshih)
Flags: needinfo?(cawang)
(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!
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.
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.
OS: Mac OS X → Gonk (Firefox OS)
Hardware: x86 → ARM
(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
Flags: needinfo?(fshih)
Flags: needinfo?(cawang)
Hi Fang, I think that he needs with the background to render faster although I am not pretty sure
Attached file Contact_actionbutton_Sprite.zip (obsolete) —
Attached the image assets. Thanks!
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.
Target Milestone: 2.1 S7 (24Oct) → 2.1 S8 (7Nov)
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!
Hi Jose, here is the sprite with 3 status button in it. Thanks
Attachment #8511844 - Attachment is obsolete: true
Attached image Rotation Spec.png
Hi Jose, I also attached the rotation spec with how the layer showing. Just a reference for you! Thanks a lot!
Summary: Analyze viability of animations in contacts form with UX team → [Contacts] [Form] Implement animation when new field groups appear on user's demand
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.
Attached file 25776.html
Attachment #8515919 - Flags: ui-review?(fshih)
Attachment #8515919 - Flags: ui-review?(cawang)
Attachment #8515919 - Flags: review?(crdlc)
Comment on attachment 8515919 [details]
25776.html

LGTM, Perfect!! Thanks
Attachment #8515919 - Flags: review?(crdlc) → review+
Comment on attachment 8515919 [details]
25776.html

I've checked the patch with Fang. It looks nice. Great job! Thanks!
Attachment #8515919 - Flags: ui-review?(cawang) → ui-review+
Comment on attachment 8515919 [details]
25776.html

Looks great!!! Thanks Jose!!
Attachment #8515919 - Flags: ui-review?(fshih) → ui-review+
https://github.com/mozilla-b2g/gaia/commit/89a863f05800e143bdabbeb3859f9fbc20cb3040
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
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]:
Attachment #8515919 - Flags: approval-gaia-v2.1?
(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
(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 :)
Attachment #8515919 - Flags: approval-gaia-v2.1? → approval-gaia-v2.1-
You need to log in before you can comment on or make changes to this bug.