Page MenuHomePhabricator

[SPIKE] Decide how the VE toolbar should behave in relation to site-wide header
Open, Needs TriagePublic

Assigned To
None
Authored By
ppelberg
Jan 13 2022, 2:46 AM
Referenced Files
F34940802: image.png
Feb 2 2022, 6:33 PM
F34940798: image.png
Feb 2 2022, 6:33 PM
F34940820: image.png
Feb 2 2022, 6:33 PM
F34940808: Screen Shot 2022-02-02 at 2.25.50 PM.png
Feb 2 2022, 6:33 PM
F34940800: image.png
Feb 2 2022, 6:33 PM
F34940818: image.png
Feb 2 2022, 6:33 PM
F34940809: Screen Shot 2022-02-02 at 2.25.38 PM.png
Feb 2 2022, 6:33 PM
F34940822: image.png
Feb 2 2022, 6:33 PM

Description

This task involves the work of deciding how the toolbar that appears within VE behaves in relation to the site-wide sticky header such that:

  1. People understand what content they can use the tools within VE's toolbar to affect
  2. People experience a "smooth" and "fluid" transition between reading into editing

Open questions

  • What – if any – additional cases should be added to the list of === Cases below?
  • For each of the ===Cases listed below, what –if any – changes do we think ought to be made to how VE's toolbar behaves?

Cases

CaseSidebar StateScroll PositionCurrent BehaviorDesired Behavior
1.CollapsedTop of PageVE toolbar wide as page
Screen Shot 2022-01-12 at 6.29.15 PM.png (1×1 px, 422 KB)
Same as "Current Behavior"
2.CollapsedElsewhere on PageVE toolbar wide as page
Screen Shot 2022-01-12 at 6.31.05 PM.png (660×1 px, 270 KB)
Same as "Current Behavior"
3.ExpandedTop of PageVE toolbar wide as content
Screen Shot 2022-01-12 at 6.32.04 PM.png (896×1 px, 326 KB)
Same as "Current Behavior"
4.ExpandedElsewhere on PageVE toolbar wide as content
Screen Shot 2022-01-12 at 6.40.27 PM.png (998×1 px, 361 KB)
TBD

Done

  • The Desired behavior is documented for each of the rows listed within the ===Cases section above

Event Timeline

ppelberg added a project: VisualEditor.
ppelberg moved this task from To Triage to Triaged on the VisualEditor board.

There's a separate-ish issue: collapsing/expanding the sidebar after switching to edit mode won't notify the toolbar that it needs to redraw, so the width winds up being incorrect. (Covering the sidebar / being misaligned.)

This comment was removed by DLynch.

@ppelberg I'm not sure what the screenshots in the description are being used for but just to note: "VE toolbar wide as page" only occurs when the browser window is narrow (~1,000px or less).

in case these are helpful here are some high level options for the sticky VE toolbar/header:

1. Toolbar/header container is full-width, but toolbar is contained to article content width

wider windownarrower window
image.png (1×3 px, 1 MB)
image.png (1×2 px, 1 MB)

2. Toolbar/header is full-width

wider windownarrower window
image.png (1×3 px, 1 MB)
image.png (1×2 px, 1 MB)

3. Toolbar/header is contained to article content width
(this is what's currently happening)

wider windownarrower window
Screen Shot 2022-02-02 at 2.25.38 PM.png (720×1 px, 293 KB)
Screen Shot 2022-02-02 at 2.25.50 PM.png (719×1 px, 285 KB)

depending on what you all are thinking it could also be worth considering how the table of contents (or a different menu in the sidebar) would affect this, for example:

option 1option 2option 3
image.png (1×2 px, 1 MB)
image.png (1×2 px, 1 MB)
image.png (1×2 px, 1 MB)

I think the problems with options 1/2 are what happens at the top of the page, and what happens when you transition from the top of the page to/from the middle of the page.

The specific awkward transition between read and edit at the moment, incidentally, is when you're scrolled down enough that you can't see the sidebar, and use the sticky header's edit button or a section edit link to enter VE. It results in the full-width sticky header fading out and a partial-width VE toolbar fading in to replace it, which feels awkward. (But might be unavoidable given all the possible states.)

The specific awkward transition between read and edit at the moment, incidentally, is when you're scrolled down enough that you can't see the sidebar, and use the sticky header's edit button or a section edit link to enter VE. It results in the full-width sticky header fading out and a partial-width VE toolbar fading in to replace it, which feels awkward. (But might be unavoidable given all the possible states.)

this sketch, which I posted above (T299113#7672103), was intended to resolve that awkwardness to some extent:

image.png (1×3 px, 1 MB)