OOjs UI: Responsive VE toolbar
Open, LowPublic

Description

VE toolbar wraps and doubles in the height under 960px window.

We can solve this by making toolbar responsive in four stages. following are the progressions

  • All items (even the ones that currently don't) with icon and label
  • All items with icon only
  • Formatting collapsed inside format Icon
  • And icons only, not dropdown indicators

on smaller screen sizes we can

  • Collapse formatting options into one single item
  • Change "Save page" to "Save"
  • Hide table menus until you are editing a table.

Mockups of reduction.

Nirzar created this task.Mar 10 2015, 8:33 PM
Nirzar updated the task description. (Show Details)
Nirzar raised the priority of this task from to Needs Triage.
Nirzar added projects: OOjs-UI, VisualEditor.
Nirzar added a subscriber: Nirzar.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 10 2015, 8:33 PM
Nirzar updated the task description. (Show Details)Mar 10 2015, 8:35 PM
Nirzar set Security to None.

I quite like these mockups.

For the record, https://gerrit.wikimedia.org/r/193282 just implemented a very simple responsiveness scheme, where the toolbar is just squished together a bit on narrow screens (saving ~150px of space). It's not deployed anywhere yet, but hopefully soon will be.

Wide (normal):


Narrow:

Isn't this just a dupe of T52227: OOjs UI: Toolbar should collapse items rather than span multiple lines when the window is narrow (responsive layout)?

I think that bug mostly turned into "Make the toolbar narrower when the window is narrow", rather than what the title says, and that's what most of the work there focused on. Let's close that one and continue here from a blank slate. :)

Neil_P._Quinn_WMF triaged this task as Low priority.May 12 2015, 10:58 PM

If we can come up with abbreviations for Paragraph, Heading X, Blockquote & Pre-formatted we can have a narrow version of the formatting tool (it can show the full titles when expanded, we just need the abbreviated ones for context)

If we can come up with abbreviations

How short? I think we can do single-character for many.

for Paragraph,

"⁋"?

Heading X,

"§"

Blockquote

"❝❞"

& Pre-formatted

"#"

we can have a narrow version of the formatting tool (it can show the full titles when expanded, we just need the abbreviated ones for context)

That'd be nice.

That depends on how well those sorts of symbols localise. I was thinking we leave it up to translators, but <5 chars ish, so for en maybe:

"⁋/P/Para", "H1", ..., "H6", "Quote", "Pre", but I don't know about localisation

Elitre added a subscriber: Elitre.Apr 6 2016, 7:23 AM

Change 300049 had a related patch set uploaded (by Esanders):
Give tool's a short title property and use them in MenuGroups

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

"⁋/P/Para", "H1", ..., "H6", "Quote", "Pre", but I don't know about localisation

Actually H1-H6 won't work as we call them "Page Title, Heading, Sub-heading 1..4"

Volker_E moved this task from Backlog to Next-up on the OOjs-UI board.Apr 7 2017, 12:41 AM

Change 346943 had a related patch set uploaded (by VolkerE):
[oojs/ui@master] MediaWiki theme: Add separator when toolbar items break on narrow

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

Change 346943 is caring about a minor issue:

BeforeAfter

for issues with that.

@Jdforrester-WMF Nice (bad) catch, but my patch is still a step forward here, the problem shown in your video is visible in current master.

for issues with that.

.oo-ui-toolbar-narrow kicks in too late.

Change 346943 merged by jenkins-bot:
[oojs/ui@master] MediaWiki theme: Add separator when toolbar items break on narrow

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

Toolbar candidates for removal on smaller viewports:

  • “Cite”
  • “Special character”
  • “Help”

Removal of min-width for “Paragraph” PopupToolGroup