Page MenuHomePhabricator

Use consistent 'edit' icon across web products
Closed, ResolvedPublic

Description

Edit icon

image.png (86×158 px, 2 KB)
after T177432 has made it to

  • OOUI
  • VisualEditor
  • Wikitext Editor 2017 &
  • Wikitext Editor 2010

Expected result

It's currently missing on

  • MinervaNeue
  • WikiBase
  • Translate (ignored, see below)
  • CX version 1 (ignored, see below)

and needs to be amended to the new icon


WikiBase's state as of this task:

image.png (174×530 px, 14 KB)

image.png (276×314 px, 16 KB)

MinervaNeue's state as of this task:

BeforeAfter
image.png (956×2 px, 560 KB)
image.png (900×2 px, 495 KB)

QA steps

Explore the mobile interface of mobile. Where there are edit icons (talk page, article page) ensure they match the screenshot above and do not look out of place compared to other icons

testing environment: https://en.wikipedia.beta.wmflabs.org/

Event Timeline

Volker_E triaged this task as Medium priority.Oct 16 2018, 4:16 PM
Volker_E created this task.
Volker_E added a project: WMDE-Design.
Volker_E updated the task description. (Show Details)
Volker_E edited subscribers, added: RHo; removed: Vibhabamba, violetto, Jaredzimmerman-WMF.

Change 467731 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Wikibase@master] Replace custom edit icon by standard one

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

Change 468083 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/skins/MinervaNeue@master] Update 'edit' icon to standard

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

So, the solid one is the wrong one? I am seeing two edit icons though for section editing when I switch to MinervaNeue>desktop. Is that a regression?

Screen Shot 2018-10-17 at 3.23.43 PM.png (696×1 px, 68 KB)

Change 468083 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Update 'edit' icon to standard

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

@Ryasmeen Patch isn't quite on beta cluster yet! Will assign you and add to Audiences-QA as soon as it is. Sorry for the confusion!

You should be only seeing one icon though... when I visit https://en.m.wikipedia.beta.wmflabs.org/wiki/User:RYasmeen_(WMF)/sandbox I'm not seeing 2 icons.

@Jdlrobson: So, that happens when I click on the link "Desktop" at the bottom of that page and have MinervaNeue set.

Jdlrobson added a project: Product-QA.

this is on beta cluster now.

this is on beta cluster now.

yeah, I see the solid edit icon now.

Volker_E updated the task description. (Show Details)

Thanks @Ryasmeen!
Now for the remaining Wikibase parts…

Looks ok on most of the edit icons I could find. It does look like the Language edit button is still incorrect.

Screen Shot 2018-10-18 at 2.09.32 PM.png (194×438 px, 8 KB)

Screen Shot 2018-10-18 at 2.10.06 PM.png (116×1 px, 16 KB)

Screen Shot 2018-10-18 at 2.11.26 PM.png (320×2 px, 81 KB)

Language edits

Screen Shot 2018-10-18 at 2.07.19 PM.png (674×290 px, 48 KB)

@ABorbaWMF Thanks, yes. Language “Add links” link is part of extension WikiBase and not yet merged…

@Volker_E on mobile, the edit icon seems to conflict a little with the toggle indicators and language icons (which are less blocky). It also seems like it has alignment issues/height issue compared to watch icon. Also arrow indicator is black not gray.

Is that just because I'm not a designer?

Screen Shot 2018-10-18 at 5.01.28 PM.png (392×388 px, 34 KB)

@Jdlrobson Identifying several issues from your comment:

  1. First issue (blocky) is foremost a context-specific, if you feel strongly about it, you should raise it as separate task as these icons have been all designed with our icon guidelines in mind.
  2. Toggle indicator is an indicator and not an icon and doesn't need to be as strong.
  3. To the watch icon, apart from context, it might be that the watch star icon wasn't updated after T177432, although I remember that it has been.
  4. The coloring is a separate issue as well, I think that mobile has various issues here, see
    image.png (108×344 px, 5 KB)
    for example. There should be a clear pattern to follow when an icon is an active element, it's selected, it's only informative, it's disabled…?!

Change 467731 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Replace custom edit icon by standard one

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

@Volker_E we're happy our side so passing back to you to tackle the Wikibase sign off steps.

Turns out, there's a ton of icons of wikibase-toolbar, that are better tackled in a task on its own: T209259: Wikibase toolbar features outdated icons

Extension:Translate ('action-edit.svg) is ignored for the time being, as it is outdated on various levels of UI-Standardization and updating the edit icon alone doesn't make sense.

Extension:ContentTranslation (v1; 'edit.svg') is ignored, it's only accessible to people who have already started a translation now, as CX2 relies on OOUI and will be archived in the mid-future (current approximation: 1 year).