OOUI: Responsive VE toolbar
Open, LowPublic
Actions

Assigned To

None

Authored By

	• Nirzar
	Mar 10 2015, 8:33 PM

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.

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

Details

Subject	Repo	Branch	Lines +/-
Update VE core submodule to master (10005c50d)	mediawiki/extensions/VisualEditor	master	+1 -1
ve.init.Target: Remove separate actions toolbar	VisualEditor/VisualEditor	master	+13 -24
Add narrowConfig for 'Insert' and 'Publish changes'	mediawiki/extensions/VisualEditor	master	+24 -19
Update OOUI to v0.44.1	mediawiki/core	master	+1 K -822
Add 'narrowConfig' support to Tool and PopupToolGroup	oojs/ui	master	+151 -15
MediaWiki theme: Add separator when toolbar items break on narrow	oojs/ui	master	+11 -0
[WIP] Give tools a short title property and use them in MenuGroups	oojs/ui	master	+47 -11

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Declined		None	T90299 Move media to top level icon on toolbar
Open		None	T101995 Improvements to the toolbar system
Duplicate		None	T95233 Most of the VE editing toolbar buttons are unlabeled icons (albeit with tooltips), which can reduce usability
Open		None	T175953 OOUI: Support Responsive Toolbars
Open		None	T92315 OOUI: Responsive VE toolbar
Open	Feature	None	T74159 OOUI: Toolbar groups should support sub-groups as items (hierarchical, nested menus)
Resolved		matmarex	T90815 Implement a way to nest toolbar groups without implementing nesting of toolbar groups

Event Timeline

• Nirzar created this task.Mar 10 2015, 8:33 PM

• Nirzar raised the priority of this task from to Needs Triage.

• Nirzar updated the task description. (Show Details)

• Nirzar added projects: OOUI, VisualEditor.

• Nirzar subscribed.

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:

• Jaredzimmerman-WMF added subscribers: • Jaredzimmerman-WMF, • KHammerstein.Mar 10 2015, 11:09 PM

Negative24 subscribed.Mar 11 2015, 1:26 AM

Isn't this just a dupe of T52227: OOjs UI: Make the toolbar narrower when the window is narrow (responsive layout)?

In T92315#1109859, @Jdforrester-WMF wrote:

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

matmarex added a parent task: T90299: Move media to top level icon on toolbar.Mar 12 2015, 2:43 PM

matmarex added a subtask: T74159: OOUI: Toolbar groups should support sub-groups as items (hierarchical, nested menus).

matmarex mentioned this in T95233: Most of the VE editing toolbar buttons are unlabeled icons (albeit with tooltips), which can reduce usability.Apr 6 2015, 9:25 PM

nshahquinn-wmf triaged this task as Low priority.May 12 2015, 10:58 PM

nshahquinn-wmf subscribed.

Jdforrester-WMF added a parent task: T101995: Improvements to the toolbar system.Jun 10 2015, 2:53 PM

Jdforrester-WMF moved this task from To Triage to Freezer on the VisualEditor board.Jun 18 2015, 1:06 AM

Jdforrester-WMF mentioned this in T108520: Allow toolbars to stretch to fill their width.Aug 10 2015, 10:54 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)

In T92315#1531839, @Esanders wrote:

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

Jdforrester-WMF added a parent task: T95233: Most of the VE editing toolbar buttons are unlabeled icons (albeit with tooltips), which can reduce usability.Mar 29 2016, 1:52 AM

• Elitre subscribed.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

gerritbot added a project: Patch-For-Review.Jul 20 2016, 3:53 PM

In T92315#1532095, @Esanders wrote:

"⁋/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 OOUI 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:

Before	After

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.

In T92315#3164431, @Jdforrester-WMF wrote:

for issues with that.

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

Jdforrester-WMF merged a task: T162490: VE toolbar: Generic narrow-width/mobile support.Apr 7 2017, 8:43 PM

Jdforrester-WMF added a subscriber: Isarra.

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

Volker_E removed a project: Patch-For-Review.Apr 12 2017, 5:38 PM

Volker_E removed subscribers: gerritbot, • KHammerstein, • Jaredzimmerman-WMF.

Volker_E mentioned this in T175953: OOUI: Support Responsive Toolbars.Sep 14 2017, 7:43 PM

Volker_E updated the task description. (Show Details)Sep 14 2017, 7:55 PM

Volker_E added a parent task: T175953: OOUI: Support Responsive Toolbars.

Toolbar candidates for removal on smaller viewports:

“Cite”
“Special character”
“Help”

Removal of min-width for “Paragraph” PopupToolGroup

matmarex unsubscribed.Nov 2 2017, 6:45 PM

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

nshahquinn-wmf unsubscribed.Jan 9 2018, 9:10 PM

Volker_E moved this task from Next-up to Backlog on the OOUI board.Feb 2 2018, 1:50 AM

Esanders merged a task: T95233: Most of the VE editing toolbar buttons are unlabeled icons (albeit with tooltips), which can reduce usability.Apr 2 2019, 2:20 PM

Esanders added subscribers: Dreamyshade, Quiddity, Ricordisamoa and 4 others.

Lens0021 subscribed.Jul 17 2021, 5:40 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

gerritbot added a project: Patch-For-Review.May 20 2022, 4:27 PM

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

Test wiki created on Patch demo by ESanders (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/deae6d0f48/w/

Also created an OOUI Demos page:
https://patchdemo.wmflabs.org/wikis/deae6d0f48/w/build/ooui/demos

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)

Lens0021 awarded a token.May 20 2022, 5:51 PM

• Elitre unsubscribed.May 22 2022, 11:54 AM

Volker_E updated the task description. (Show Details)May 24 2022, 8:25 PM

Volker_E removed a subscriber: • aripstra.

~~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

Change 813630 had a related patch set uploaded (by Jforrester; author: Jforrester):

[mediawiki/core@master] Update OOUI to v0.44.1

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

Change 813630 merged by jenkins-bot:

[mediawiki/core@master] Update OOUI to v0.44.1

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

Dreamyshade unsubscribed.Jul 13 2022, 4:10 PM

Change 793844 merged by jenkins-bot:

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

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

Change 908638 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[VisualEditor/VisualEditor@master] ve.init.Target: Remove separate actions toolbar

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

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.5; 2023-04-17).Apr 13 2023, 11:00 PM

Change 908638 merged by jenkins-bot:

[VisualEditor/VisualEditor@master] ve.init.Target: Remove separate actions toolbar

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

Change 909734 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (10005c50d)

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

Change 909734 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Update VE core submodule to master (10005c50d)

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

ReleaseTaggerBot edited projects, added MW-1.41-notes (1.41.0-wmf.9; 2023-05-15); removed MW-1.41-notes (1.41.0-wmf.5; 2023-04-17).May 15 2023, 3:01 PM

Test wiki on Patch demo by ESanders (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmflabs.org/wikis/deae6d0f48/w/~~

	F7333236: T92315 Toolbar narrow _before - OOjs UI Demos 2017-04-06.png
	Apr 7 2017, 5:43 AM

	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

OOUI: Responsive VE toolbarOpen, LowPublicActions

Description

Details

Related ObjectsSearch...

Event Timeline

OOUI: Responsive VE toolbar
Open, LowPublic
Actions

Related Objects
Search...