Page MenuHomePhabricator

AMC - display labels for toolbar actions on larger screens
Open, NormalPublic3 Story Points

Description

Description

On tablet and desktop screens there is enough space to display labels next to the toolbar actions. This will help with usability.

Design

article page toolbaruser page toolbar

*note: eventually it would be great if at a certain width the alignment of the elements shifted, since it looks weird to space them equally across such a wide screen. E.g.

Developer notes

Icons with labels use mw-ui-icon-before class. Icons without use mw-ui-icon-element. We need a new class mw-ui-icon-adaptive that exhibits both characteristics depending on the resolution.

  • New class is provided inside core of Minerva as a skinStyle of mediawiki.ui.icon
  • Replace the class names for the page actions icons with the new class

This should be for both AMC and non-AMC

QA steps

Test on https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain with AMC enabled.

  1. Test on mobile device:
  2. Can you see the icons?
  3. Labels shold be hidden
  1. Test on desktop device
  2. Can you see the icons?
  3. Labels should show
  4. Labels should hide when you resize the screen

QA Results

ACStatusDetails
1T226562#5669265
2T226562#5669265

Details

Related Gerrit Patches:
mediawiki/skins/MinervaNeue : masterMake label for the PDF button in the page-actions menu appear on desktop size
mediawiki/skins/MinervaNeue : master[toolbar] show page action labels on wide screens
mediawiki/skins/MinervaNeue : masterFix page-action menu labels for non-amc mode Followup to 77a1424e4e
mediawiki/skins/MinervaNeue : masterShorten labels for page-actions menu items
mediawiki/skins/MinervaNeue : masterShow labels in page-actions menu on desktop widths
mediawiki/skins/MinervaNeue : masterReflect terser labers
mediawiki/extensions/MobileFrontend : master[toolbar] [watchstar] use terser labels

Related Objects

StatusAssignedTask
Openovasileva
Resolvedalexhollender
Resolvedalexhollender
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
DuplicateNone
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
OpenNone
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Resolvedovasileva
Duplicatealexhollender
Resolvedovasileva
Resolvedovasileva
Resolvedalexhollender
OpenNone
Openovasileva

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson updated the task description. (Show Details)
Jdlrobson added a subscriber: Niedzielski.

@ovasileva I think this is ready for estimation. @Niedzielski any gotchas regarding the overflow menus we need to watch out for?

Niedzielski added a comment.EditedAug 22 2019, 6:55 PM

I think the download button might be the only special case as it's added by JS. IIRC, the ToggleList menu entries are otherwise stock Minerva UI Icons that already include a (currently) hidden label that could be unhidden on CSS breakpoint.

Edit: Here's the ToggleListItem.mustache template where you can see the label is injected:

...
	<li class="toggle-list-item">
		<a class="toggle-list-item__anchor {{class}}" href="{{href}}">{{text}}</a>
	</li>
...

The Language icon title definition in i18n:

"mobile-frontend-language-article-heading": "Read in another language"

The key name mobile-frontend-language-article-heading comes from MobileFrontend, when Minerva&MobileFrontend was one extension. Now because those are two separate things it would be nice to clean up it.

Also, the overflow menu define title defintion:

"minerva-page-actions-language-switcher": "Languages",

We could use the same translation, but then we would have to rename the key so it doesn't say page-actions.

Maybe we can start by only showing the labels at maximum width. Another option mentioned was show the labels below the icons so there's more room for wrapping.

ovasileva renamed this task from [AMC] display labels for toolbar actions on larger screens to [SPIKE 8hrs] display labels for toolbar actions on larger screens.Aug 27 2019, 4:25 PM
ovasileva renamed this task from [SPIKE 8hrs] display labels for toolbar actions on larger screens to [SPIKE 8hrs] AMC - display labels for toolbar actions on larger screens.
ovasileva removed ovasileva as the assignee of this task.Aug 27 2019, 4:27 PM
pmiazga added a comment.EditedAug 27 2019, 4:32 PM

Also, please thing about different languages. English looks really nice, but I'm afraid that in other languages those labels can be pretty long. For example in Polish language "unwatch" would become "przestań obserwować" or "usuń z obserwowanych".

Change 533293 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/skins/MinervaNeue@master] [toolbar] show page action labels on wide screens

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

Change 533296 had a related patch set uploaded (by Niedzielski; owner: Stephen Niedzielski):
[mediawiki/extensions/MobileFrontend@master] [toolbar] [watchstar] use terser labels

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

Replace the class names for the page actions icons with the new class

I ended up taking a no-JS approach. Let's see what folks think.

I've set the minimum width to present labels at 1108px which is the desktop breakpoint (1000px) + margins. My thinking is that translators could choose terser alternatives that would fit into this width.

So here's the minimum width that would that shows labels:

Less than minimum is just like before:

@alexhollender just wondering if there is any added value in adding labels to hambuger, notifications and personal user icon (not necessarily now but maybe in future)

Change 533296 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] [toolbar] [watchstar] use terser labels

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

Change 534221 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Reflect terser labers

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

Change 534221 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Reflect terser labers

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

In kick off we agreed to push this to the backlog. We will pull it back in when T229440 is ready to QA

ovasileva claimed this task.Sep 5 2019, 4:06 PM
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptOct 15 2019, 10:14 AM
Jdrewniak added a comment.EditedOct 15 2019, 3:19 PM

Also, please thing about different languages. English looks really nice, but I'm afraid that in other languages those labels can be pretty long. For example in Polish language "unwatch" would become "przestań obserwować" or "usuń z obserwowanych".

Just to emphasize this point. I think it's inevitable that in some edge case, with some language, at some font-size, these labels will overlap. Like in Piotr's example, many languages might not have the equivalent of the "un" prefix, like in "unwatch" and the translation might be closer to something like "stop watching".

I think we can handle overflowing labels in one of two ways:

labels truncatedlabels underneath

@alexhollender any preference?

The labels in these screenshots are very long, and those are the current labels. We've already changed the "watch" label, but we still have to change the rest.

After we change the labels, we should wait a bit before making this change because it'll take some time for the translators to update the new labels.

MBinder_WMF changed the subtype of this task from "Task" to "Spike".Oct 15 2019, 5:10 PM

Change 543475 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Shorten labels for page-actions menu items

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

@Jdrewniak it's kind of difficult to say which option is better until we see how long some of the strings are. If they are rarely long enough to warrant the truncation I think that works fine, however if the majority of the time they're getting truncated we should go with the underneath approach. Perhaps we move forward with the truncation approach for now and then revisit this down the road if we see that they're often being truncated?

Change 545556 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Show labels in page-actions menu on desktop widths

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

Jdrewniak renamed this task from [SPIKE 8hrs] AMC - display labels for toolbar actions on larger screens to AMC - display labels for toolbar actions on larger screens.Wed, Oct 23, 5:09 PM
Jdrewniak changed the subtype of this task from "Spike" to "Task".
Jdlrobson added a subscriber: Jdrewniak.
alexhollender removed alexhollender as the assignee of this task.Mon, Oct 28, 7:13 PM

@Jdrewniak and I looked at this together — looks good. Any ideas how we want to do QA?

Change 543475 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Shorten labels for page-actions menu items

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

Change 545556 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Show labels in page-actions menu on desktop widths

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

Change 546903 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Fix page-action menu labels for non-amc mode Followup to 77a1424e4e

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

I made one followup patch to fix an issue in non-amc mode with the labels.

beforeafter fix

Change 546903 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Fix page-action menu labels for non-amc mode Followup to 77a1424e4e

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

What about the download link on Chrome?

What about the download link on Chrome?

That should also have a label

Change 533293 abandoned by Jdlrobson:
[toolbar] show page action labels on wide screens

Reason:
implemented in https://gerrit.wikimedia.org/r/546903

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

I'm seeing this strange behaviour in production (non-AMC). Note ellipsis on edit pencil and watch icon:

@Jdlrobson yes that issue was addressed just after the branch cut last week, so it should appear solved soon.

Change 548835 had a related patch set uploaded (by Jdrewniak; owner: Jdrewniak):
[mediawiki/skins/MinervaNeue@master] Make label for the PDF button in the page-actions menu appear on desktop size

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

Change 548835 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Make label for the PDF button in the page-actions menu appear on desktop size

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

alexhollender removed Jdrewniak as the assignee of this task.Thu, Nov 7, 8:09 PM

Checked this out and it looks good. I've added T237019 as a subtask to this and think we should address the spacing issue there.

ovasileva set the point value for this task to 3.Tue, Nov 12, 6:19 PM

Test Result

Status: ✅ PASS
OS: macOS Catalina
Browser: Chrome
Device: MBP
Emulated Device: iPad, iPad Mini, iPad Pro

Test Artifact(s):

QA steps

Test on https://en.m.wikipedia.beta.wmflabs.org/wiki/Spain with AMC enabled.

✅ AC1: Test on mobile device:
Can you see the icons?
Labels shold be hidden
The labels only show for the iPad Pro in both orientations. The iPad and iPad Mini showed the labels in landscape mode. This seems like the correct behavior.

✅ AC2 Test on desktop device
Can you see the icons?
Labels should show
Labels should hide when you resize the screen

Edtadros reassigned this task from Edtadros to ovasileva.Sun, Nov 17, 3:23 AM
Edtadros updated the task description. (Show Details)
Edtadros added a subscriber: Edtadros.