1099366 - Make the filters list slide out of/into view when scrolling/stationary, respectively

Status: RESOLVED WONTFIX

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

Description

[Doug Sherk (:drs) (inactive)]

The UX spec for the tabless redesign (bug 1097757) calls for the filters bar, which contains the "All" and "Missed" tabs, to:

1) Slide into view when the scroll position is stationary,
2) Slide out of view when scrolling.

This bug tracks progress in implementing this.

This will likely be fairly easy to do. Here's a rough outline:

1) Add the following CSS rule to the filters container base matcher: `transform: translateY(0);`.
2) Add an additional class matcher to the filters container, perhaps `.scrolling`, which is set on it when scrolling, and hides it by setting `transform: translateY(-100%);`.
3) Set a 'scroll' listener on the call log items container.
  a. When scrolling, add the `.scrolling` class.
  b. When quiescent, remove the `.scrolling` class.
4) (optional) Add `will-change: scroll-position;` to the CSS rules for the filters 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 1.

Comment 1

[Gabriele Svelto [:gsvelto]]

When working in the SMS app one problem we had was that the user could tap fast enough that transitions from multiple elements might be triggered at the same time causing races and inconsistent behavior. This was fixed in bug 881469 by introducing a navigation object that tracked transitions to prevent races. We might want to do something similar.

Comment 2

[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 1099420 at the same time.

Comment 3

[Paco Rampas [:paco]]

Ok Doug, I'm going to try to do this :D

Comment 4

[Paco Rampas [:paco]]

Attachment: parch v2

Comment 5

[Paco Rampas [:paco]]

Attachment: patch v1

Comment 6

[Paco Rampas [:paco]]

Hi Doug,
There are two patches that are doing the same. I think the patch V2 is better:
1- The idea of patch v1 is animate the filters and calls log items container. The performance is really bad.
2- I think this option is better, but I working less on it. The idea is to have the filters with a higher z-index. So, we should animate only the filters. The problem is the first element of call log list, because it can be hidden for the filters layer when the scroll = 0. therefore we are added a extra padding-top on call log container.

Monday, I will continue working on it, I think in the second version. What do you think?

Thanks.

Comment 7

[Doug Sherk (:drs) (inactive)]

I think that the v2 is much better, but I think that this needs UX/UI input. The way the call log time headers move with the filters seems really weird to me, and I think we need to think more about how to deal with that. Carrie, Carol, could you take a look at these patch proposals and tell us what you think?

Also, I noticed while testing this that the filter buttons ("All" and "Missing") don't work. But since this is just a PoC, it doesn't matter yet.

Comment 8

[Paco Rampas [:paco]]

Hi, I have continued working on bug 1099420 because with fav container is really different the scroll interaction.

Comment 9

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

Not in the 2.2 scope anymore.

Comment 10

[Carol Huang [:Carol]]

I guess it's not in the new 2.2 scope.

Comment 11

[BMO Automation]

Firefox OS is not being worked on