Page MenuHomePhabricator

Implement sticky header for control panel
Open, Needs TriagePublic8 Estimated Story Points

Description

As the use scrolls past the pagination controls, a sticky toolbar with these (and other) controls appear to facilitate their access. This video shows the idea in motion, and the mockups below.

The sticky toolbar includes the following elements:

  • A "Filter recent changes" button to access the filter menu. When clicked, it will scroll up to the active filters on top, with the main filter panel open for the user to change the filters.
    • A tooltip for this button reads: Show all filtering tools.
  • The "live mode" toggle button, allowing users to activate and, more importantly, deactivate live updates. This button keeps all the behavior described in T167743, including the "on" state pulse indicator.
  • The pagination controls. Working as described in T163429, regardless of being in the sticky toolbar or attached to the page.
    • When the user, having scrolled down the page to reveal the Sticky Bar, clicks either the < Newer X or Older X > button, the page reloads with the newer or older X results displayed and the user at page top, with the normal (non-sticky) tool panel showing. I.e., the user does not stay scrolled halfway down the page.

Mockups

Default pagination controlsPagination controls integrated into a sticky header (when scrolling)

Event Timeline

I have simplified the design based on input from @jmatazzoni. I removed the access to saved filters and simplified the entry point to access the filters. Keeping the labelling consistent ("Filter recent changes") to provide more continuity between the regular entry point in the page and the shortcut we provide at the sticky toolbar.

@Pginer-WMF, I like the "Filter recent changes button." I had a couple of refinements to the design on other points. I apologize in advance for touching your mockups, but in the interest of moving this to RFP before I left, I went ahead adjusted the graphic in the Description, as follows (see below):

  1. In the F8466635, the "Legend" had slipped down the page again. I assume it's meant to still be at page top, below the sticky control bar, so I added it back in.
  2. I think it's safer not to abbreviate the "Live updates" button in the sticky bar. There's plenty of space for the full button, which has the fancy pulsing design remember. Keeping it consistent will, I think, help to maintain a feeling of stability and will stop users having to learn a "new" button. Again, have a look.

If these adjustments are OK with you, just leave this in RFP. If not, say why and bounce this back to Product/Design.

@Pginer-WMF, I like the "Filter recent changes button." I had a couple of refinements to the design on other points. I apologize in advance for touching your mockups, but in the interest of moving this to RFP before I left, I went ahead adjusted the graphic in the Description, as follows (see below):

  1. In the F8466635, the "Legend" had slipped down the page again. I assume it's meant to still be at page top, below the sticky control bar, so I added it back in.

In that particular instance, the legend would still be visible, but it won't if you keep scrolling. I'll adjust the image to make sure the legend is not interpreted as becoming sticky in any way.

  1. I think it's safer not to abbreviate the "Live updates" button in the sticky bar. There's plenty of space for the full button, which has the fancy pulsing design remember. Keeping it consistent will, I think, help to maintain a feeling of stability and will stop users having to learn a "new" button. Again, have a look.

My goal was to de-emphasize the "live updates" action a bit where it is less useful. As users scroll down it is more useful as a way to disable, where I expect users to recognise the flashing blue button, or in the worst case to scroll up to get the regular controls. So I don't expect much issue for users but we can keep the label if you think otherwise.

If these adjustments are OK with you, just leave this in RFP. If not, say why and bounce this back to Product/Design.

Pginer-WMF updated the task description. (Show Details)
Mattflaschen-WMF renamed this task from Implement sticky control panel to Implement sticky header for control panel.Sep 12 2017, 6:18 PM