Page MenuHomePhabricator

Add navigation UI to access Categories and/or User filters
Open, HighPublic

Description

T171894 described the tweaks that would improve the Advanced Filters navigation. However, that ticket covered ony 2 advanced filters. With the addition of Users and Categories filters, this navigation needs to expand. This ticket describes the navigation as it will be in its final state.

Changes to the feature (final state, when all four Advanced menus are available)

    • The "Advanced filters" label becomes the "Advanced filters [down arrow icon]" menu/button, .
    • Clicking on Advanced filters opens a menu that contains all available options, displayed with icons and names.
      • The "Advanced filters" button will follow the standard state changes (e.g., hover, etc.) for "frameless" buttons on OOJS UI.
      • The "Advanced filters" button will have a tooltip: "Add advanced filters".
    • Two icons continue to be displayed next to the menu, but...
    • Which icons are displayed will depend on user behavior: the icons displayed will be those representing the last two filter panels the user has used.
      • So, when a user clicks in the dropdown menu to select an Advanced filter set that isn't currently at the top level, that filter's icon takes the place of the second-to-the-last-used icon at the top level. It then persists in that spot when the menu is closed. It remains there as a new, passively set "default."
    • Before the user intervenes, default icons will be: Tagged edits and Namespaces.
  • The main "Add filters for recent changes" placeholder requires also adjustment for the text to be at the same prominence level as the "advanced" filters is. That implies to use bold font-weight and the same text color.

Layout and typography guidelines are illustrated below:

Event Timeline

jmatazzoni renamed this task from Add Categories and/or User filters to new UI to Add navigation UI to access Categories and/or User filters.Aug 1 2017, 10:53 PM

If we apply the change of metaphor suggested in T173257 (replacing the hamburger menu with a "+"), we may want to use an alternative sign for the "advanced filters menu" such as a chevron pointing down:

@Pginer-WMF, thanks for tweaking the icons. I have transferred your new plan and designs to the Description. One question though: I happen to be sitting next to Carolyn these days, so I showed her the design to see if she had any ideas.

She thought it would be helpful if the "Advanced filters" button text and the text for "Add filters for recent changes" were at the same level. I.e., hierarchically, there are three levels going on in that area: "Active filters" is the smallest, then "Add filters..." then "Advanced filters." Carolyn suggests having just two levels.

I think it might help accentuate that all-important starting point. What do you think? If you like the idea, can you please update the spec?

@Pginer-WMF, thanks for tweaking the icons. I have transferred your new plan and designs to the Description. One question though: I happen to be sitting next to Carolyn these days, so I showed her the design to see if she had any ideas.
She thought it would be helpful if the "Advanced filters" button text and the text for "Add filters for recent changes" were at the same level. I.e., hierarchically, there are three levels going on in that area: "Active filters" is the smallest, then "Add filters..." then "Advanced filters." Carolyn suggests having just two levels.
I think it might help accentuate that all-important starting point. What do you think? If you like the idea, can you please update the spec?

I agree with @cmadeo (thanks for pointing to this!). In the mockup both labels look different because despite using the same font size (14px), I used a different typeface by mistake. I updated the mockups to correct this.

Currently in the real Recent Changes page the main entry point is not using the same font-weight and colors as the mockup. I'll add a note about this in the description.

Pginer-WMF updated the task description. (Show Details)Aug 29 2017, 8:24 AM
Pginer-WMF updated the task description. (Show Details)Aug 29 2017, 8:26 AM
Pginer-WMF updated the task description. (Show Details)Aug 29 2017, 8:30 AM

@Pginer-WMF Minor nitpick on the menu. Currently our menus across widgets use a 12px padding at base font-size 12.8px. It's one of those lil annoyances with our current limitations. I'd ensure that it follows standard OOUI menus in padding and box-shadow in the code if you don't have specific objections.

@Pginer-WMF Minor nitpick on the menu. Currently our menus across widgets use a 12px padding at base font-size 12.8px. It's one of those lil annoyances with our current limitations. I'd ensure that it follows standard OOUI menus in padding and box-shadow in the code if you don't have specific objections.

Sure. If there is a standard layout for menus, let's follow that (and at some point document it at the styleguide).

As mentioned in the merged-in (sub-)tasks, those elements being “wrong” widgets is also resulting in a keyboard accessibility issue…

@Volker_E, FYI, this task is not under current development because we currently have no plans to add Category or User filters (much as we might like to). So the accessibility and other issues are kind of moot points right now.

jmatazzoni added a subscriber: Hagarshilo.EditedMay 23 2018, 3:36 PM

@Hagarshilo and @Mooeypoo, we don't want to use this menu for only three options. Because it hides one item, it can have a negative impact on discoverability. Plus it's just too complicated for only three options—more necessary for the four items originally contemplated.

My preferred solution would be to simply line them up side by side: Namespaces, Tags, Categories. @Pginer-WMF, is that what you want? Or do you have a better idea?

Pau, if we go that way, please mock up. Would it be better to start a new ticket for he simplified interface (and close this?)? Or should we just add the simplified inter face here?

The MVP will definitely just use another button in the row (no dropdown menu) so we can take a look at that and see if we want to iterate. The initial implementation will not include a dropdown menu, even just for practical reasons.

It might help also to look at what that looks like and then see if we want to implement a menu or not.

That sounds good. Especially since we currently don't show the New Filters for mobile, so there's no issue of having the side-by-side layout be too wide. (If we ever implement for mobile, we will probably need to adjust.) Pau has shown above what icon he wants for Categories--the folder.

My preferred solution would be to simply line them up side by side: Namespaces, Tags, Categories. @Pginer-WMF, is that what you want? Or do you have a better idea?

Yes. I think we can add the option directly.

Pau, if we go that way, please mock up. Would it be better to start a new ticket for he simplified interface (and close this?)? Or should we just add the simplified inter face here?

I think it is better to create a new ticket. I created T195481, capturing the two entry points for the categories filters.

The current one captures the idea of providing the access to the advanced filters in a compact way, which will be needed when other filters such as language and users are added to the mix. Even if the designs get updated then, I think it is better to keep the ticket.