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

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 controls	Pagination controls integrated into a sticky header (when scrolling)

Related Objects
Search...

Status	Assigned	Task
Resolved	SBisson	T162675 'Integrated filters'—add all RC Page filters into the new UI along with selected new functions
Open	None	T163429 Provide UI for paging through Watchlist and Recent Changes results
Open	None	T167932 Implement sticky header for control panel

Event Timeline

• jmatazzoni created this task.Jun 14 2017, 10:51 PM

• jmatazzoni mentioned this in T162675: 'Integrated filters'—add all RC Page filters into the new UI along with selected new functions.Jun 14 2017, 10:59 PM

• jmatazzoni mentioned this in T163429: Provide UI for paging through Watchlist and Recent Changes results.Jun 14 2017, 11:02 PM

• jmatazzoni updated the task description. (Show Details)Jun 15 2017, 12:27 AM

Catrope merged a task: T164135: Add a sticky header with filter and pagination controls.Jun 16 2017, 12:11 AM

Catrope set the point value for this task to 8.

Pginer-WMF updated the task description. (Show Details)Jun 16 2017, 8:05 AM

Pginer-WMF updated the task description. (Show Details)Jun 16 2017, 8:08 AM

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.

• jmatazzoni mentioned this in Edit-Review-Improvements-Integrated-Filters.Jun 16 2017, 5:30 PM

• jmatazzoni updated the task description. (Show Details)Jun 16 2017, 9:22 PM

• jmatazzoni updated the task description. (Show Details)Jun 16 2017, 9:29 PM

• jmatazzoni updated the task description. (Show Details)Jun 16 2017, 9:56 PM

@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):

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.
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.

• jmatazzoni updated the task description. (Show Details)Jun 16 2017, 10:04 PM

• jmatazzoni moved this task from Untriaged to Ready for Pickup on the Collaboration-Team-Triage (Collab-Team-Q4-Apr-Jun-2017) board.

• jmatazzoni updated the task description. (Show Details)Jun 16 2017, 10:08 PM

• jmatazzoni updated the task description. (Show Details)Jun 16 2017, 10:24 PM

In T167932#3356174, @jmatazzoni wrote:

@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):

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.

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.