Page MenuHomePhabricator

OOUI: Responsive VE toolbar
Open, LowPublic

Assigned To
None
Authored By
Nirzar
Mar 10 2015, 8:33 PM
Referenced Files
F7350906: OOjs-UI-346943,1-issues.webm
Apr 7 2017, 6:25 PM
F7333260: T92315 Toolbar narrow _after - OOjs UI Demos 2017-04-06.png
Apr 7 2017, 5:43 AM
F58299: pasted_file
Mar 10 2015, 8:55 PM
F58305: pasted_file
Mar 10 2015, 8:55 PM
F73591: 2-ve-toolbar-small.png
Mar 10 2015, 8:35 PM
F73586: 1-ve-toolbar-full.png
Mar 10 2015, 8:35 PM
F73589: 4-ve-toolbar-tiny.png
Mar 10 2015, 8:35 PM
Tokens
"Like" token, awarded by Lens0021.

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" For i18n reasons not useful
  • Hide table menus until you are editing a table.

Mockups of reduction.

1-ve-toolbar-full.png (1×2 px, 884 KB)

2-ve-toolbar-small.png (1×2 px, 778 KB)

3-ve-toolbar-smaller.png (1×1 px, 678 KB)

4-ve-toolbar-tiny.png (1×1 px, 675 KB)

Event Timeline

Nirzar raised the priority of this task from to Needs Triage.
Nirzar updated the task description. (Show Details)
Nirzar added projects: OOUI, VisualEditor.
Nirzar added a subscriber: Nirzar.

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):

pasted_file (256×1 px, 57 KB)

Narrow:
pasted_file (249×970 px, 55 KB)

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. :)

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

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"

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
T92315 Toolbar narrow _before - OOjs UI Demos 2017-04-06.png (239×563 px, 17 KB)
T92315 Toolbar narrow _after - OOjs UI Demos 2017-04-06.png (227×571 px, 17 KB)

@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

Volker_E renamed this task from OOjs UI: Responsive VE toolbar to OOUI: Responsive VE toolbar.Jan 6 2018, 7:35 AM

Change 793830 had a related patch set uploaded (by Esanders; author: Esanders):

[oojs/ui@master] Add 'narrowConfig' support to Tool and PopupToolGroup

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

Change 793844 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/extensions/VisualEditor@master] Add narrowConfig for 'Insert' and 'Publish changes'

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

With the above demo, the toolbar doesn't start wrapping until a window size below 892px, before it would wrap below 1015px. (Number will vary slightly with interface language and system font)

Change "Save page" to "Save" For i18n reasons not useful

This should be left in. We already have short labels for exactly this reason which we already use in the mobile dialog.

Change 793830 merged by jenkins-bot:

[oojs/ui@master] Add 'narrowConfig' support to Tool and PopupToolGroup

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