Specifications/Trays

From Ticket 2713. It was initially about activity tray so it needs to be made more generic.

The frame is broken into 75px square cells, which means there are 16 cells across the bottom of the frame. The corner cells are never used, which limits the edge to 14 cells. When there are more than 14 activities, the left and right cells should become arrow cells, thus limiting the number of activities visible to 12 per "page".

The arrow icon provided should be centered within the 75px cell at the left and right. (The icons should come from the system theme: go-left and go-right) The entire 75px cell should act as a clickable area for the pager arrow, and will require an explicit click to activate. When clicked, the 12 icons visible should "slide" left or right by a full twelve icons, revealing the next page. When the last page is reached, it should still scroll over a full twelve, revealing a non-full bar. For instance, when there are fifteen activities, clicking the right arrow would scroll over to reveal 3 total activities on page 2.

I'm uncertain about whether or not we want to support looping back to page one. If one method is easier than the other, chose that one for now. If they are equally easy, let me know and I'll think about the interaction a bit more.

The scrolling animation should be perceivable but quick. I'd say 1/3 second, perhaps. Ideally it should have an ease-out and perhaps an ease-in also. Steady scrolling always feel mechanical; some acceleration and deceleration would help.

It would be ideal if this solution were developed in a modular way since we'll need this paging in various other locations, including the people edge of the frame, and later on within the tray element which will become a standard control.