OOjs UI: Make the toolbar narrower when the window is narrow (responsive layout)
Closed, ResolvedPublic

Description

When the browser's window is narrow (or at high zoom), toolbar buttons span several lines.

Current screenshot using Vector skin:

bzimport added a project: OOjs-UI.Via ConduitNov 22 2014, 2:06 AM
bzimport set Reference to bz50227.
gpaumier created this task.Via LegacyJun 26 2013, 1:30 PM
TheDJ added a comment.Via ConduitJun 26 2013, 6:24 PM

This can be fixed by changing the background image of .ve-ui-toolbar-bar to specify background-size: auto 100%; That does however affect the gradient in 1 row mode (size the background image is 2 rows high currently). So the background image might have to be regenerated for this.

Ryasmeen added a comment.Via ConduitNov 11 2013, 10:20 PM

Right now, when the browser is resized to narrow window OR at high zoom,all the toolbar buttons have a background and the contents of page does not show up behind the toolbar .But, the buttons on the first line is now overlapping with the Edit/Edit-beta buttons before user scrolls down the article.

Tested on MAC OS X 10.8.5 using firefox 20 and chrome 26.0.1410.65 on page:
https://en.wikipedia.org/w/index.php?title=World_War_II&veaction=edit

See the screenshots attached.

Ryasmeen added a comment.Via ConduitNov 11 2013, 10:21 PM

Created attachment 13767
all buttons having background and content not showing up

Attached:

Ryasmeen added a comment.Via ConduitNov 11 2013, 10:22 PM

Created attachment 13768
Toolbar buttons overlapping with Edit/Edit-beta button

Attached:

Jdforrester-WMF added a comment.Via ConduitOct 31 2014, 10:59 PM

Marking as depending on bug 72159 because presumably we'd want to push groups into the catch-all group or something?

Jdforrester-WMF added a comment.Via ConduitOct 31 2014, 10:59 PM
  • Bug 70928 has been marked as a duplicate of this bug. ***
Jdforrester-WMF moved this task to Next-up on the OOjs-UI workboard.Via WebDec 2 2014, 12:35 AM
Prtksxna added a subscriber: Prtksxna.Via WebDec 2 2014, 4:08 PM
matmarex added a subscriber: matmarex.Via WebFeb 27 2015, 7:49 PM

Something like https://gerrit.wikimedia.org/r/#/c/193282/ could possibly help here.

matmarex edited the task description. (Show Details)Via WebMon, Mar 2, 9:07 PM
matmarex added a comment.Via WebMon, Mar 2, 9:12 PM

So the idea is that:

  • When there is too little space, we should tighten the whitespace a bit (https://gerrit.wikimedia.org/r/#/c/193282/).
  • When that doesn't help, all of the items that don't fit should be stuffed into a long dropdown list inserted at the end of the toolbar.

If this is a Q3 blocker, then I assume it should not depend on T74159: OOjs UI: Toolbar groups should support sub-groups as items, and therefore the dropdown would just include all of the tools in one list rather than putting it in a hierarchical menu? At least until someone implements T74159, that is.

matmarex claimed this task.Via WebMon, Mar 2, 9:13 PM

I am not sure if the latter, without hierarchical menus, would actually be beneficial; but we can implement the former easily (in fact I have already done it).

gerritbot added a subscriber: gerritbot.

Change 193282 had a related patch set uploaded (by Bartosz Dziewoński):
Tighten toolbar whitespace on narrow displays

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

gerritbot added a project: Patch-For-Review.Via ConduitMon, Mar 2, 9:14 PM
Jaredzimmerman-WMF edited subscribers, added: KHammerstein; removed: gerritbot.Via WebMon, Mar 2, 9:14 PM
Jaredzimmerman-WMF added a subscriber: Nirzar.
Jaredzimmerman-WMF added a comment.Via WebMon, Mar 2, 9:18 PM

@KHammerstein & @Nirzar did you have a expanded version and compact version that we could use to show the extremes of how this should work, I assume we should leverage the usage and frequency information we found from the toolbar user testing to define the control collapse order.

matmarex added a comment.Via WebMon, Mar 2, 9:43 PM

From task summary:

all the buttons except those displayed on the last line are lacking a background

This affected only the Apex theme, and seems to have been fixed in the meantime – the gradient is correctly being stretched now.

matmarex edited the task description. (Show Details)Via WebMon, Mar 2, 9:43 PM
matmarex added a comment.Via WebMon, Mar 2, 9:51 PM

@KHammerstein & @Nirzar did you have a expanded version and compact version that we could use to show the extremes of how this should work, I assume we should leverage the usage and frequency information we found from the toolbar user testing to define the control collapse order.

Other editors that implement this behavior just fold items from the end of the toolbar; I think that will be the least surprising for users. Perhaps we should place the most frequently used items at the beginning?

matmarex added a comment.Via WebMon, Mar 2, 9:56 PM

Here are screenshot of the whitespace tightening I'm working on above. I have not implemented it for MediaWiki theme yet, but it's going to look pretty much the same, sans the gradients and shadows.

"Wide" configuration:


"Narrow" configuration:

Jdforrester-WMF moved this task to Polish on the VisualEditor 2014/15 Q3 blockers workboard.Via WebWed, Mar 4, 4:19 PM
Jdforrester-WMF set Story Points to 8.Via WebWed, Mar 4, 5:15 PM
matmarex added a project: Patch-For-Review.Via WebThu, Mar 5, 11:53 PM
Jdforrester-WMF added a comment.Via WebThu, Mar 5, 11:57 PM

How much actual space does this save for VE-MW?

matmarex added a comment.Via WebSat, Mar 7, 4:39 PM

Wide:

Narrow:

(It mostly cooperates with Vector's narrow display styles, as you can see.)

Jdforrester-WMF added a comment.Via WebSat, Mar 7, 4:51 PM

Is there a particular reason we don't make the narrower styling the default?

matmarex added a comment.Via WebSat, Mar 7, 5:11 PM

Yeah, the wide one looks better. Especially in the MediaWiki theme, where there are no separators or frames on the buttons and therefore we're forced to separate them with whitespace. (Apex has frames on hover, at least.)

Jdforrester-WMF added a comment.Via WebSat, Mar 7, 5:11 PM

Fair.

gerritbot added a comment.Via ConduitSat, Mar 7, 6:15 PM

Change 195047 had a related patch set uploaded (by Bartosz Dziewoński):
ve.ui.Toolbar: Fix up onWindowResize to call parent method

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

gerritbot added a comment.Via ConduitSat, Mar 7, 6:15 PM

Change 195049 had a related patch set uploaded (by Bartosz Dziewoński):
ve.init.mw.ViewPageTarget: Recalculate toolbar sizes when adding "Save" button

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

gerritbot added a comment.Via ConduitTue, Mar 10, 5:32 PM

Change 193282 merged by jenkins-bot:
Toolbar: Tighten whitespace on narrow displays

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

Nirzar added a comment.EditedVia WebTue, Mar 10, 8:35 PM

We can solve this problem by making VE toolbar responsive - here are more details about it with mockups

for reference

gerritbot added a comment.Via ConduitTue, Mar 10, 9:48 PM

Change 195049 merged by jenkins-bot:
ve.init.mw.ViewPageTarget: Recalculate toolbar sizes when adding "Save" button

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

Jdforrester-WMF changed the title from "OOjs UI: Toolbar should collapse items rather than span multiple lines when the window is narrow" to "OOjs UI: Toolbar should collapse items rather than span multiple lines when the window is narrow (responsive layout)".Via WebWed, Mar 11, 4:51 PM
Jdforrester-WMF removed Story Points.
matmarex added a comment.Via WebThu, Mar 12, 2:42 PM

Okay, so I this bug mostly turned into "Make the toolbar narrower when the window is narrow", rather than what the current title says ("Toolbar should collapse items rather than span multiple lines when the window is narrow (responsive layout)"). Let's rename and close it, and continue with making the responsive behavior better on T92315.

matmarex changed the title from "OOjs UI: Toolbar should collapse items rather than span multiple lines when the window is narrow (responsive layout)" to "OOjs UI: Make the toolbar narrower when the window is narrow (responsive layout)".Via WebThu, Mar 12, 2:42 PM
matmarex closed this task as "Resolved".Via WebThu, Mar 12, 2:44 PM
gerritbot added a comment.Via ConduitThu, Mar 12, 7:49 PM

Change 196305 had a related patch set uploaded (by Jforrester):
Update OOjs UI to v0.9.1

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

gerritbot added a project: Patch-For-Review.Via ConduitThu, Mar 12, 7:49 PM

Change 195047 abandoned by Jforrester:
ve.ui.Toolbar: Fix up onWindowResize to call parent method

Reason:
Squashed into I936ea56e1c.

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

gerritbot added a comment.Via ConduitThu, Mar 12, 8:06 PM

Change 196305 merged by jenkins-bot:
Update OOjs UI to v0.9.1

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

Jdforrester-WMF moved this task to Done on the VisualEditor 2014/15 Q3 blockers workboard.Via WebWed, Mar 18, 12:22 AM
Jdforrester-WMF moved this task to Done on the OOjs-UI workboard.Via WebThu, Mar 26, 8:56 PM

Add Comment

Column Prototype
This is a very early prototype of a persistent column. It is not expected to work yet, and leaving it open will activate other new features which will break things. Press "\" (backslash) on your keyboard to close it now.