1099420 - Slide the favorite contacts banner into/out of view when the call log is scrolled to the top/anywhere else, respectively

Status: RESOLVED WONTFIX

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

Description

[Doug Sherk (:drs) (inactive)]

The UX spec for bug 1097757 calls for the favorite contacts list to:
1) Slide into view when the call log is scrolled to the top.
2) Slide out of view when the call log is scrolled anywhere else.

This bug tracks progress in implementing this.

The strategy here will be similar to the one in bug 1099366. However, there is an additional consideration here. Since the favorites contacts banner will cover a significant portion of the visible area on the screen, we cannot simply slide it into view on top of the call log like we would for the filters. Thus, we must slide down the entire call log when showing the favorite contacts banner.

Here's a suggested strategy, modified from bug 1099366. It is liable to require significant adjustment, but should be a good starting point.

1) Add the favorite contacts banner to the top of the call log. This will be done in bug 1099397.
2) Add the following CSS rule to the base call log container matcher: `transform: translateY(0);`.
3) Add an additional class matcher to the call log container, perhaps `.scrolled`, which slides the whole call log upwards. This would contain: `transform: translateY(-nrem);` , where `n` is the `rem` size of the favorite contacts banner.
3) Set a 'scroll' listener on the call log items container.
  a. When scrolling, add the `.scrolled` class.
  b. When quiescent, remove the `.scrolled` class.
4) (optional) Add `will-change: scroll-position;` to the CSS rules for the call log container. This may be needed if the show/hide animation is janky. This is unlikely to be needed if the base matcher has any transform rule in it, such as in point 2.
5) Contingency: This may make the very end of the call log have some additional whitespace. One possible way to fix this is to artificially limit the height of the call log container to the regular size, minus the height of the favorite contacts banner. Overflow should make the end visible but not overscrolled.

Comment 1

[Doug Sherk (:drs) (inactive)]

Paco, do you have time to take this during this sprint? If you do, I suggest thinking about this and bug 1099366 at the same time.

Comment 2

[Paco Rampas [:paco]]

Attachment: patch in github

Comment 3

[Paco Rampas [:paco]]

Hi Doug,

Could you give your feedback about the patch? I am working in a strategy a little bit different than the strategy of the description. The idea is the following:
1- To have favorites, filters and call logs container in the same box with scroll.
2.1- When the user is scrolling we put on the whole container a .scrolling for doing the animations.
2.2- With .scrolling the filters disappear
3- Then, we should know when the scroll is on top, at this moment we doesn't need .scrolling, so we should remove it, so  when the scrollTop < 120px we remove the .scrolling.

I think the patch is working very nice. Only two things that I think aren't good.
1- The animations of date of call logs is not good. It is working bad with the animation of filters. Also, I have changed the sticky for a real sticky (with css not js).
2- Finally, could you read this link?
https://github.com/mozilla-b2g/gaia/pull/26574/files#diff-f70ff14b804b9dcffe477bb56b6a7e97R152

Thanks.

Comment 4

[Doug Sherk (:drs) (inactive)]

Clearing needinfo as we aren't working on this anymore for now.

Comment 5

[BMO Automation]

Firefox OS is not being worked on