Page MenuHomePhabricator

Add indicator that appears when TOC has been hidden
Open, MediumPublic

Description

Description

In order to help people understand where the table of contents has been collapsed to, after you collapse the table of contents (manually) the icon-button that appears should show a temporary indicator:

basic prototype: https://di-collapsible-menus.web.app/Brown_bear

before hidingafter hiding
image.png (1×3 px, 1 MB)
image.png (1×3 px, 1 MB)

Acceptance criteria

  • Indicator appears after collapsing the TOC
  • Indicator points to the TOC icon-button (next to the page title), regardless of browser screen size
  • Indicator disappears after 4 seconds

Notes

  • this is a similar pattern to what we do on Commons and Wikidata when you change UI language. It would be great if we could use the same timing interval for how long it remains on the screen (it seems to be about 4 seconds, which I've put in the AC):
    image.png (426×1 px, 72 KB)
  • thanks to @TheDJ for this idea

Event Timeline

@ovasileva @RHo two other situations in which we could show the indicator, but i'm not sure if it's necessary:

  • someone arrives at the page with a screen 1000px wide (or less), in which case the TOC will automatically be hidden
  • someone resizes their screen to be 1000px (or less), in which case the TOC will automatically be hidden

also, originally we had discussed showing this indicator only once per session. thinking about it again i'm not sure if that additional complexity (code-wise) is needed. i'm assuming it will be uncommon for people to hide > unhide > hide the TOC.

Jdlrobson triaged this task as Medium priority.Wed, Jun 22, 6:51 PM

According to T117720 the preferred way to make this fly out is OOUI (and that's the one being used by ULS), however we are moved towards Vue. I'm pinging design systems to see if there's a Vue component we could be using here and understand the plan for migrating the OOUI tipsy fly out to Codex. I'd rather we didn't create something new from scratch here, but also loading OOUI on top of Vue.js doesn't seem ideal.

@ovasileva @RHo two other situations in which we could show the indicator, but i'm not sure if it's necessary:

  • someone arrives at the page with a screen 1000px wide (or less), in which case the TOC will automatically be hidden
  • someone resizes their screen to be 1000px (or less), in which case the TOC will automatically be hidden

Hi @alexhollender_WMF - I think it would be valuable to show this tooltip, esp. the first situation for long time readers/editors with narrow screens who might wonder where the ToC went.