Page MenuHomePhabricator

VE Template Dialog: Parameter search and hide/show button should be sticky
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

From usability testing, we found that the discoverability of the search bar was an issue. People scrolled past it and then didn't realize that there was a search. We want to make it sticky to increase the discoverability but also the ease of use, especially for templates with a lot of parameters.

For reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning

Requirements

  • For single templates only, make the parameter search and hide/show button sticky in the sidebar, so that as users scroll through the parameter list they remain visible at the top.
  • Background for sticky elements should be Base100 (#fff)
Nice to haves

If this somehow becomes an easy add on, then include this. Otherwise, it would be a follow-up ticket.

  • Also implement for multi-part, but when scrolling and another template appears, then it pushes the previously sticky header out of the way and replaces it. In these cases, the template name should also remain sticky. Open question: if we do this in the future, but hide template names now, will it be possible to show them for this use case?

Mocks

DesktopMobile
Sticky search - Desktop - Simple.png (666×900 px, 62 KB)
Mobile - Simple.png (568×320 px, 19 KB)

Event Timeline

ECohen_WMDE updated the task description. (Show Details)
ECohen_WMDE set the point value for this task to 5.

@awight FYI - the styling of the header when it's sticky and the parameters are scrolling behind it might get still slightly adjusted. Will aim to finalize this by the end of the week. If this affects the implementation, then maybe we should quickly talk about the options I'm considering now? If you can get started without this, then go ahead and I'll update the ticket when finalized. Sorry I might have been a bit too speedy in putting it in ready for pickup

The 'sticky-ness' should also include the button added in T298259: Add button to sidebar to hide/show unused fields, so I'm not sure if it needs to be dependent on that ticket (wasn't sure how to sub/parent link the tickets correctly)

This comment was removed by awight.

@ECohen_WMDE Can we hide the template name entirely in the single-template transclusion case? It already appears in the window title and in the content pane. That allows us to do everything we need from a simple CSS rule (I think).

Otherwise, we'll need some clever logic to refresh the DOM structure when switching between single- and multi-template transclusion.

Never mind, I have an idea: I'll create the DOM to do both variations of stickiness, and the CSS can switch between the two without involving JS logic.

Change 753475 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] Fix right margin around sidebar search widget

https://gerrit.wikimedia.org/r/753475

Change 753476 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] Make sidebar search field sticky during scroll

https://gerrit.wikimedia.org/r/753476

@ECohen_WMDE Can we hide the template name entirely in the single-template transclusion case?

This question is back on the table. I can do either single- or multi-template transclusions as specified, but if we need to toggle between these modes on the fly, the DOM must be rewritten to accomplish the effect we want. Instead, if the template header is hidden in single-template mode, everything is easy.

Change 753484 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] [WIP] Sticky sidebar headers for multi-template transclusions

https://gerrit.wikimedia.org/r/753484

The single-template solution is ready for code review, but we're having a short chat about styling tomorrow so I'll keep this in "doing" for the moment.

After discussion, we've decided to hide the header in single-transclusion mode. This allows for a consistent DOM structure between both modes.

Change 753693 had a related patch set uploaded (by Awight; author: Awight):

[mediawiki/extensions/VisualEditor@master] Hide template header in single-transclusion mode

https://gerrit.wikimedia.org/r/753693

Change 753484 abandoned by Awight:

[mediawiki/extensions/VisualEditor@master] [WIP] Sticky sidebar headers for multi-template transclusions

Reason:

squashed with parent

https://gerrit.wikimedia.org/r/753484

Change 753475 abandoned by Awight:

[mediawiki/extensions/VisualEditor@master] Fix right margin around sidebar search widget

Reason:

squashed with the dependent patch, Ib050e30a50ef965c1

https://gerrit.wikimedia.org/r/753475

awight moved this task from Doing to Tech Review on the WMDE-TechWish-Sprint-2022-01-05 board.
awight changed the point value for this task from 5 to 3.

Change 753693 abandoned by Awight:

[mediawiki/extensions/VisualEditor@master] Hide template header in single-transclusion mode

Reason:

squashing

https://gerrit.wikimedia.org/r/753693

Change 753476 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Make sidebar header and search field sticky during scroll

https://gerrit.wikimedia.org/r/753476

I found this edge case:

Peek 2022-01-19 14-13.gif (555×1 px, 203 KB)

When not all parameters are in view, it looks like the hide/show fields button is not working properly, but that is only because the view is collapsed.

Should we do something about that, @ECohen_WMDE or is this edge casey enough?

@lilients_WMDE Yes, I see how that could be confusing, but would leave it for now. If we want to make adjustments in the future that might improve this situation, I'd create follow-up tickets.

thiemowmde moved this task from Demo to Done on the WMDE-TechWish-Sprint-2022-01-19 board.