1061504 - Add/Delete icon animation to fields in contact form

Status: RESOLVED DUPLICATE of bug 1067310

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

Comment 1

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

This is a very simple, low-risk fix that improves user experience a lot.

Comment 2

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

Attachment: Github PR

Comment 3

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

triage: major issue to new feature "contacts form redesign".
Functionality-wise it works properly, but this fix(polish) is must-have to make the feature shiny.

Comment 5

[Francisco Jordano [:arcturus] [:francisco]]

Comment on attachment 8483572 [details] [review]
Github PR

Left a couple of ni in the PR, but here is Fang who should give us the ok according to her specification:

https://www.dropbox.com/s/z9tzu22ogu502bs/Add_Contact_Transition.mov?dl=0

Comment 6

[Fang Shih [:fang]]

Comment on attachment 8483572 [details] [review]
Github PR

Thanks for the work. I was wondering can we fix the problem of image overlapping the button. Cause right now is kind of hard to see the button animation from this patch. For the extending box, we hope to have something that looks like it extended out directly from the button. Thanks!

Comment 7

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

Comment on attachment 8483572 [details] [review]
Github PR

Hi Fang, the overlapping button issue has been resolved.

Asking Cristian for some feedback on CSS implementation.

Comment 8

[Cristian Rodriguez (:crdlc)]

Honestly I don't have the magic wand for this because the animation is complex and I guess this should be analyzed deeper. Some details:

The animation for the template could be a something like this instead of playing with height (according to video):

.field-template {
  max-height: 50rem;
  transform: scale(0);
  transform-origin: left top;
  transition: transform 0.4s ease;
}

.field-template.grown {
  transform: scale(1);
}

Although the button should live outside template perhaps in order not to be scaled...

Also I would re-implement this:

setTimeout(function() {
  elem.parentNode.removeChild(elem);
}, 400);

->

elem.addEventListener('transitionend', () => {
  elem.parentNode.removeChild(elem);
});

Another idea would be to scale from 1 to 0 or viceversa instead of using opacity to hide buttons. AFAIK the opacity changes are not accelerated properly at least when I did stuffs in the old home screen.

Comment 9

[Cristian Rodriguez (:crdlc)]

and maybe we could change icons (from plus to cross) once rotated the icon at the same time that the template is scaling. Both transitions of .4s

Comment 10

[Dietrich Ayala (:dietrich)]

Triage group reviewed - polish bugs cannot hold back an entire release from shipping. Please review the blocking criteria at https://wiki.mozilla.org/B2G/Triage#Blocker_Triage_Guidelines to understand what constitutes a blocker.

2.1 is open for approved landings, so request approval from Fabrice or Bhavana in order to land this if it's fixed in time!

Comment 11

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8483572 [details] [review]
Github PR

I gave my comments in the thread. If you address something please ask me again, thanks

Comment 12

[Francisco Jordano [:arcturus] [:francisco]]

We are going to discuss the possibilities in bug 1067310