Page MenuHomePhabricator

Update article actions icons to match wikimedia styleguide
Closed, ResolvedPublic2 Estimated Story Points

Assigned To
Authored By
Nirzar
Aug 24 2017, 9:36 PM
Referenced Files
F9884360: edit-locked.svg
Sep 28 2017, 10:59 PM
F9880989: editLocked.svg
Sep 28 2017, 6:34 PM
F9488860: actionsss.png
Sep 12 2017, 8:47 PM
F9364952: watchstar.svg
Sep 7 2017, 12:25 AM
F9364953: watchstar-selected.svg
Sep 7 2017, 12:25 AM
F9364956: areas.png
Sep 7 2017, 12:25 AM
F9364949: edit.svg
Sep 7 2017, 12:25 AM
F9364951: language-selection.svg
Sep 7 2017, 12:25 AM

Description

The article actions on Minerva use old actions. We have recently updated Navigation drawer and header icons to match the Wikimedia Stylguide. The article action icons are still old and wrong color.

Right now

image.png (504×752 px, 46 KB)

There are three article actions right now

  1. Change language (on left)
  2. Add to watchlist
  3. Edit

We're about to add another article action

  1. Download article T163472

Before we do T163472, I would like to update the icons.

Here's how the new icons will look like

actionsss.png (1×750 px, 184 KB)

Assets

  1. Edit pencil

Note: We don't have Pencil Locked icon like on apps. we just don't show the pencil.

seems like we do use locked edit pencil on web - here it is

  1. Language selection

  1. Watchstar

  1. Watchstar selected (filled green)

Icons are optically optimized for special use-case of article actions and pixel fitted.

Developer notes

  • Replace existing SVGs
  • POSTPONED Make sure the tap areas are consistent (refer the mock above, yellow area is tap area)
  • QA the change

Q/A

Visit some pages on https://en.m.wikipedia.beta.wmflabs.org while logged in / out and verify that the action icons, i.e. language, watchstar, and pencil, are different from the ones in production. The edit pencil should rarely be shown as locked.

Visit https://en.m.wikipedia.beta.wmflabs.org/wiki/Selenium_protected_test_2 and confirm the edit pencil has a lock on it and when clicked shows a notification.

Event Timeline

ovasileva set the point value for this task to 3.Sep 12 2017, 4:45 PM

A recent conversation between @Nirzar and I:

17:56:25 <phuedx> the horizontal alignment part might be a little tricky because of pre-existing styles
17:56:36 <phuedx> it might be a small to or it might be a three
17:57:20 <nzr> "sir, your flux capacitor is broken"
17:57:29 <nzr> haha jk jk.. yeah I was just curious
17:57:40 <phuedx> i'll add a comment ;)
17:58:08 <nzr> i think the alignment doesn't need change? our existing alignment is fine?
17:59:18 <phuedx> and the tap areas?
18:00:09 <phuedx> nzr: tap areas and spacing between edit and watch look different from the mocks
18:01:29 <nzr> we do have large tap areas... actually should i remove the tap area requirement?
18:01:34 <nzr> it will be easier to just change the svg

I removed the tap area requirement.
this card is just about replacing the SVGs now.

can we re-estimate?

Jhernandez changed the point value for this task from 3 to 2.Sep 13 2017, 4:32 PM
Jdlrobson moved this task from To Do to Doing on the Readers-Web-Kanbanana-Board-Old board.

Seems like the most actionable task in upcoming, so I'll work on this today.

@Nirzar I need the "edit locked icon" as well.
Current version looks like this:

Change 381281 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/MinervaNeue@master] Update SVGs for page actions

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

Nirzar updated the task description. (Show Details)

@Jdlrobson the description said we don't use locked pencil icon, instead we use opacity to the pencil. but anyways, if we do, i updated the task description with the SVG asset.
thank you for flagging

Thanks!

Okay, I see where the confusion has come from.
Looks like there was a regression..
https://en.m.wikipedia.beta.wmflabs.org/wiki/Selenium_protected_test_2 should be showing the edit locked icon but it looks like that was broken by a recent change when editing enabled non-JS editing. My change also restores this behaviour (an alternative solution would be to throw the icon away and all the code relating to it)

Change 381281 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Update SVGs for page actions and restore locked edit icon behavior

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

Looks good on beta. Tried on a few browsers.

Macro votecat: looks  good

guessing this will go out on Thurs 10/5