Page MenuHomePhabricator

User links, Skins: Provide generalized way to add icons to user links dropdown menu"
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

In T276561: User links: Logged-in user links menu treatment without icons (for anonymous users no change) we are creating the user links menu for logged-in users, to achieve the goals outlined in T266536: [EPIC] Consolidate user links into a single menu. This task will add icons to the links for easier visual recognition

User case

As a user, I want icons associated with each item on the user links menu, so that I can visually recognize the item quicker

Acceptance criteria

  • Add icons to user links menu for anonymous users
  • Add icons to user links menu for logged in users

Design

image.png (1×1 px, 463 KB)

Developer notes

Prior art:

QA steps

Screen Shot 2021-06-08 at 11.06.39 AM.png (1×3 px, 642 KB)

QA Results - Beta

ACStatusDetails
1T276562#7174003

Event Timeline

ovasileva raised the priority of this task from Medium to High.May 3 2021, 1:41 PM

I explored a core option but I couldn't find one that made sense given the current state, and that didn't tie us into using mw-ui-icon everywhere. My recommendation here is thus that we should use the SkinTemplateNavigation hook and set the link-class property on all relevant items to include mw-ui-icon

diff --git a/includes/Hooks.php b/includes/Hooks.php
index b2f5818d..11d08fd6 100644
--- a/includes/Hooks.php
+++ b/includes/Hooks.php
@@ -96,6 +96,10 @@ class Hooks {
 		return $item;
 	}
 
+	private static function getIconFromKey( $key ) {
+		return 'wikimedia-language';
+	}
+
 	/**
 	 * Upgrades Vector's watch action to a watchstar.
 	 *
@@ -121,6 +125,13 @@ class Hooks {
 						// Remove user page from personal menu dropdown for logged in users.
 						unset( $content_navigation['user-menu']['userpage'] );
 					}
+
+					$userMenu = $content_navigation['user-menu'];
+					foreach ( $userMenu as $key => $value ) {
+						$linkClass = $content_navigation['user-menu'][$key]['link-class'] ?? '';
+						$content_navigation['user-menu'][$key]['link-class'] = $linkClass .
+							' mw-ui-icon mw-ui-icon-before mw-ui-icon-' . self::getIconFromKey( $key );
+					}
 				} else {
 					// Remove user page from personal toolbar since it will be inside the personal menu for logged in
 					// users when the feature flag is disabled.

A quick attempt at this proved its a viable option although I was having an issue with the talk page item for unknown reasons (which might be due to some core bug) and it's likely going to require some styling changes, including more hacks for mw-ui-icon sizing:

Screen Shot 2021-05-07 at 2.31.18 PM.png (474×504 px, 37 KB)

What do we need to achieve technically here?
Ability to add icons and to provide the correct styles, mostly display, sizing, margins, vertical alignment. Anything else?

hi @alexhollender - some Qs about icons:

  • For "Talk" links in the new personal menu (which is not included in this ticket's description's screenshot), which icon should be used? Based on what icons are available in https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=desktop and on https://phabricator.wikimedia.org/T276566, looks like "userTalk" is the one?
  • Would you happen to know which extension corresponds to "Uploaded media"? I found several after a quick search but not sure which one applies - should that icon apply to any media upload extension? >>> nvm - we figured out it is added under Contributions as part of enabling Content Translation feature.
  • Same question as above for "Translations" >>> nvm - we figured out it is added under Contributions as part of enabling Content Translation feature.
  • Confirming that any Gadget does not need an associated icon?

Change 698065 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Prefix user links menu items with icons

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

Change 698066 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/extensions/SandboxLink@master] Prefix SandboxLink with icon for modern Vector.

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

hi @alexhollender - some Qs about icons:

ah whoops, just updated the screenshot and yup, it's the userTalk one

  • Confirming that any Gadget does not need an associated icon?

yes that's correct, any icons will have to be provided by the gadget itself

cjming removed cjming as the assignee of this task.Jun 4 2021, 5:52 PM
cjming added a subscriber: cjming.

Change 698065 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Prefix user links menu items with icons

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

Change 698066 merged by jenkins-bot:

[mediawiki/extensions/SandboxLink@master] Add icon to Sandbox link.

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

cjming updated the task description. (Show Details)
Edtadros added a subscriber: Edtadros.

Test Result - Beta

Status: ❓ Need more info
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Go to the beta cluster i.e. https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein
❓ AC1: For both logged in/out states, you should see the icons prefixed to the new user menu

Logged InLogged Out
Screen Shot 2021-06-21 at 9.41.47 PM.png (490×1 px, 149 KB)
Screen Shot 2021-06-21 at 9.42.18 PM.png (490×1 px, 118 KB)

@cjming For the logged out case, there is no icon for "Log in". Is this as designed/expected? I ask because in mobile there is an icon:

Screen Shot 2021-06-21 at 9.43.15 PM.png (50×115 px, 2 KB)

hi @Edtadros - huh, it was there previously - something must have changed recently with how that link is built. I'll take a look. Thanks for the catch.

cjming claimed this task.

Change 700936 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Add icon prefix to login link

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

Change 700936 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add icon prefix to login link

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Go to the beta cluster i.e. https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein
✅ AC1: For both logged in/out states, you should see the icons prefixed to the new user menu

Screen Shot 2021-06-23 at 4.37.05 PM.png (429×1 px, 108 KB)

Screen Shot 2021-06-23 at 4.36.42 PM.png (429×1 px, 102 KB)

@Jdlrobson / @cjming, this is unrelated to the prefixed icons. The user menu and user talk page get awkwardly shifted lower and to the left at around 1225px.

@Jdlrobson / @cjming, this is unrelated to the prefixed icons. The user menu and user talk page get awkwardly shifted lower and to the left at around 1225px.

This can be ignored. This is being dealt with in another ticket: T276566

User Links will be tested in Prod when the feature is turned on.