AMC - display labels for toolbar actions on larger screens
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	• alexhollender_WMF
	Jun 25 2019, 6:51 PM

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 toolbar	user 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.

Test on mobile device:
Can you see the icons?
Labels shold be hidden

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

QA Results

AC	Status	Details
1	✅	T226562#5669265
2	✅	T226562#5669265

Details

Subject	Repo	Branch	Lines +/-
Make label for the PDF button in the page-actions menu appear on desktop size	mediawiki/skins/MinervaNeue	master	+1 -1
[toolbar] show page action labels on wide screens	mediawiki/skins/MinervaNeue	master	+20 -5
Fix page-action menu labels for non-amc mode Followup to 77a1424e4e	mediawiki/skins/MinervaNeue	master	+0 -1
Shorten labels for page-actions menu items	mediawiki/skins/MinervaNeue	master	+6 -4
Show labels in page-actions menu on desktop widths	mediawiki/skins/MinervaNeue	master	+52 -9
Reflect terser labers	mediawiki/skins/MinervaNeue	master	+2 -2
[toolbar] [watchstar] use terser labels	mediawiki/extensions/MobileFrontend	master	+5 -5

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		ovasileva	T226562 AMC - display labels for toolbar actions on larger screens
Resolved		• alexhollender_WMF	T229440 [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency
Resolved		• alexhollender_WMF	T231613 Replace 24x24px SVGs in MF/Minerva
Resolved		ovasileva	T230033 [ICONS] Increase touch targets from 40x40 to 44x44
Resolved		ovasileva	T230232 Site header doesn't fit on screen in advanced contributors mode
Resolved		ovasileva	T229447 Reduce spacing of icons in mobile header
Resolved		ovasileva	T231683 Remove concept of "large" icon in MF/Minerva
Resolved		ovasileva	T232011 [regression wmf.21-minor] Notification icon overflows viewport
Resolved	BUG REPORT	ovasileva	T232798 [Regression] ICONS "Close" text appears below close icon when loading editor overlay
Duplicate		None	T232799 Regression: ICONS: Loading label is visible when clicking edit icon
Resolved	BUG REPORT	ovasileva	T232801 Flush section heading arrow icon to left of screen
Resolved		ovasileva	T232792 [Regression] ICONS: Not compatible with truncated text (last modified and logout button)
Resolved		ovasileva	T232800 Regression: ICONS - last modified bar background doesn't cover entire element
Resolved		ovasileva	T232943 Logout button on mobile web misaligned
Resolved		ovasileva	T233046 ICONS: tap/active state remains after tapping button
Resolved		ovasileva	T233050 ICONS menu alignment and list item spacing
Resolved		ovasileva	T232837 Use mw-ui-icon-flush- classes on various icons to fix alignment: search within pages and block drawer icons
Resolved		ovasileva	T233151 Remove mobile diff page drawer margin
Resolved		ovasileva	T233152 [ICONS] reference drawer icon and alignment
Resolved		ovasileva	T233156 [ICONS] clear search icon alignment
Duplicate		• alexhollender_WMF	T233157 [ICONS] search within page button alignment
Resolved		ovasileva	T233166 [ICONS] logout icon horizontal centering
Resolved		ovasileva	T233167 [ICON] language label in overflow menu should look disabled matching icon (AMC user pages)
Resolved		• alexhollender_WMF	T233171 [ICONS] editor-loading header
Resolved		ovasileva	T233172 [ICONS] last edited element alignment
Resolved		Esanders	T237019 Spacing between icons and labels is too large in tablet mode

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

ovasileva moved this task from Needs Analysis to Ready for Development on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Aug 26 2019, 3:32 PM

phuedx awarded a token.Aug 27 2019, 4:10 PM

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

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".

• Niedzielski claimed this task.Aug 29 2019, 3:17 PM

• Niedzielski moved this task from Ready for Development to Doing on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.

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

gerritbot added a project: Patch-For-Review.Aug 29 2019, 6:39 PM

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:

localhost_8181_wiki_Foo_debug=true (1).png (1×2 px, 184 KB)

localhost_8181_wiki_User_Stephen (3).png (1×2 px, 155 KB)

Less than minimum is just like before:

localhost_8181_wiki_Foo_debug=true (2).png (1×1 px, 158 KB)

localhost_8181_wiki_User_Stephen (2).png (1×1 px, 129 KB)

@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

Jdlrobson moved this task from Doing to Blocked on Others on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Aug 29 2019, 8:30 PM

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.21; 2019-09-03).Aug 29 2019, 9:00 PM

Blocked on T229440

Jdlrobson removed a parent task: T229440: [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency.Aug 30 2019, 5:41 PM

Jdlrobson added a subtask: T229440: [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency.

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

Restricted Repository Identity mentioned this in rSKIN90df5aedf302: Update git submodules.Sep 3 2019, 7:49 PM

ReleaseTaggerBot edited projects, added MW-1.34-notes (1.34.0-wmf.22; 2019-09-10); removed MW-1.34-notes (1.34.0-wmf.21; 2019-09-03).Sep 3 2019, 8:00 PM

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

ovasileva edited projects, added Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1); removed Web-Team-Backlog.Sep 17 2019, 9:44 AM

ovasileva moved this task from Blocked on Others to Upcoming on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.

ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 18 2019, 5:21 PM

ovasileva moved this task from Ready for Development to Blocked on Others on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 18 2019, 5:24 PM

Jdlrobson moved this task from Blocked on Others to Needs Analysis on the Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1) board.Sep 27 2019, 12:21 AM

MBinder_WMF edited projects, added Web-Team-Backlog (Kanbanana-2019-20-Q2); removed Web-Team-Backlog (Readers-Web-Kanbanana-2019-20-Q1).Sep 30 2019, 5:20 PM

ovasileva moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 2 2019, 5:09 PM

ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 7 2019, 2:33 PM

Jdrewniak moved this task from Ready for Development to Doing on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 15 2019, 10:14 AM

Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptOct 15 2019, 10:14 AM

Jdrewniak claimed this task.Oct 15 2019, 1:12 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 truncated	labels 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?

ovasileva closed subtask T229440: [EPIC] Refactor icon sizing in MF/Minerva to achieve consistency as Resolved.Oct 21 2019, 10:23 AM

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.Oct 23 2019, 5:09 PM

Jdrewniak moved this task from Doing to Needs Code Review on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.

Jdrewniak changed the subtype of this task from "Spike" to "Task".

Looks great to me, but need to run this by @alexhollender

Screenshot 2019-10-23 at 12.19.44 PM.png (451×1 px, 122 KB)

Jdlrobson reassigned this task from Jdrewniak to • alexhollender_WMF.Oct 23 2019, 7:20 PM

Jdlrobson added a subscriber: Jdrewniak.

@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

ReleaseTaggerBot added a project: MW-1.35-notes (1.35.0-wmf.4; 2019-10-29).Oct 28 2019, 9:00 PM

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.


before	after fix

Jdrewniak moved this task from Needs QA to Needs Code Review on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 29 2019, 11:14 AM

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

Jdlrobson moved this task from Needs Code Review to Needs Design Review on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Oct 29 2019, 6:08 PM

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.5; 2019-11-05); removed MW-1.35-notes (1.35.0-wmf.4; 2019-10-29).Oct 29 2019, 7:01 PM

What about the download link on Chrome?

In T226562#5617177, @Jdlrobson wrote:

What about the download link on Chrome?

That should also have a label

Jdrewniak claimed this task.Oct 30 2019, 5:09 PM

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

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Nov 4 2019, 6:05 PM

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

Screenshot 2019-11-05 at 10.46.57 AM.png (332×1 px, 69 KB)

@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

Jdlrobson moved this task from Doing to Needs Design Review on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.Nov 5 2019, 6:55 PM

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

ReleaseTaggerBot edited projects, added MW-1.35-notes (1.35.0-wmf.8; 2019-11-26); removed MW-1.35-notes (1.35.0-wmf.5; 2019-11-05).Nov 5 2019, 8:00 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.

Jdlrobson assigned this task to Edtadros.Nov 12 2019, 6:07 PM

ovasileva set the point value for this task to 3.Nov 12 2019, 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

Screen Shot 2019-11-16 at 7.16.48 PM.png (2×1 px, 909 KB)

Screen Shot 2019-11-16 at 7.16.57 PM.png (2×2 px, 1019 KB)

Edtadros reassigned this task from Edtadros to ovasileva.Nov 17 2019, 3:23 AM

Edtadros updated the task description. (Show Details)

Edtadros moved this task from Needs QA to Ready for Signoff on the Web-Team-Backlog (Kanbanana-2019-20-Q2) board.

Edtadros subscribed.

Whoo! Looks great - resolving

Possibly caused T239177 ?

ovasileva closed subtask T237019: Spacing between icons and labels is too large in tablet mode as Resolved.Feb 27 2020, 11:10 AM

	F31095128: Screen Shot 2019-11-16 at 7.16.57 PM.png
	Nov 17 2019, 3:22 AM

	F31095129: Screen Shot 2019-11-16 at 7.16.48 PM.png
	Nov 17 2019, 3:22 AM

	F31012244: Screenshot 2019-11-05 at 10.46.57 AM.png
	Nov 5 2019, 6:48 PM

	F30917824: Screenshot 2019-10-29 at 12.49.34 PM.png
	Oct 29 2019, 7:50 PM

	F30916099: Screen Shot 2019-10-29 at 12.11.03.png
	Oct 29 2019, 11:14 AM

	F30916097: Screen Shot 2019-10-29 at 12.11.33.png
	Oct 29 2019, 11:14 AM

AMC - display labels for toolbar actions on larger screensClosed, ResolvedPublic3 Estimated Story PointsActions

Description

Description

Design

Developer notes

QA steps

QA Results

Details

Related ObjectsSearch...

Event Timeline

Test Result

QA steps

AMC - display labels for toolbar actions on larger screens
Closed, ResolvedPublic3 Estimated Story Points
Actions

Related Objects
Search...