Maniphest T209259

Wikibase toolbar features outdated icons
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Volker_E
	Nov 12 2018, 6:19 AM

Description

Wikibase (among it's toolbar labelled source) currently features outdated icons back from before T177432
Let's standardize gently.

While the old canvas was 20x20px the icons themselves took up an inconsistently smaller amount of space. That was a.o. one of the reasons for T117432.

Some of those in action:

Success criteria

Update pre-OOUI help icon to be replaced by 'helpNotice' icon – https://gerrit.wikimedia.org/r/483124
Update icons (all current ones from OOUI before T177432) to latest – https://gerrit.wikimedia.org/r/473155
- Amend background-size so the icon size remains about the same (~16 x 16 px)
- Follow icon opacity rule on active elements from WikimediaUI Base and OOUI.
Update WikibaseLexeme dependent icon paths

Details

Subject	Repo	Branch	Lines +/-
Remove oojs-ui/ icons	mediawiki/extensions/Wikibase	master	+0 -43
Replace icon path and update icons accordingly to Wikibase	mediawiki/extensions/WikibaseLexeme	master	+6 -6
Update for new Wikibase icon location	mediawiki/extensions/WikibaseLexeme	master	+1 -1
Update outdated icons with latest standard ones	mediawiki/extensions/Wikibase	master	+54 -16
Clean up CSS comments	mediawiki/extensions/Wikibase	master	+6 -15
Update help icon with the new one	mediawiki/extensions/Wikibase	master	+16 -14

Customize query in gerrit

Related Objects
Search...

Status	Assigned	Task
Open	None	T55733 Use the same icons to represent the same things (tracking)
Resolved	Volker_E	T207190 Use consistent 'edit' icon across web products
Resolved	Volker_E	T209259 Wikibase toolbar features outdated icons

Event Timeline

Volker_E triaged this task as Medium priority.Nov 12 2018, 6:19 AM

Volker_E created this task.

Change 473155 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Wikibase@master] Update outdated icons with latest standard ones

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

gerritbot added a project: Patch-For-Review.Nov 13 2018, 6:10 AM

Addshore moved this task from incoming to in progress on the Wikidata board.Nov 13 2018, 3:33 PM

@Jan_Dittrich While I'm working at this, I'd also suggest to replace the help icon seen in the first screenshot with 'helpNotice' of OOUI – asking as it hasn't been standardized like the 5 other icons before.

Volker_E moved this task from Unsorted to Icons standardization on the UI-Standardization board.Nov 14 2018, 5:24 AM

@Jan_Dittrich @Volker_E I pulled https://gerrit.wikimedia.org/r/473155.

I checked the look of the item page with Jan, we noted that the pencil icon was changed which is fine. In the issue description you also mention Save and Cancel icons, seems that they have not changed. Is this correct?

Save/Cancel

Edit

Lydia_Pintscher removed a project: wikiba.se website.Dec 19 2018, 11:18 AM

Hi @Greta_Doci_WMDE, sorry for not replying for so long.

save and cancel do indeed seem like the correct icons. Is the background-size that @Volker_E mentioned correct? I'm not sure what was meant by that.

Another point: I would suggest also updating the help icon to OOUI. I'm not sure why that wasn't part of the task description. I would use "helpNotice" in this case otherwise it'll look like cancel has a question mark behind it

• Jan_Dittrich updated the task description. (Show Details)Jan 8 2019, 10:19 AM

Is the background-size that @Volker_E mentioned correct? I'm not sure what was meant by that.

Yes, 'background-size' is 16X16

Another point: I would suggest also updating the help icon to OOUI. I'm not sure why that wasn't part of the task description. I would use "helpNotice" in this case otherwise it'll look like cancel has a question mark behind it

+1, It looks a way better if we use either help

or helpNotice icon

This was is also better because it follows the same design style.
I would also suggest to change the position of the help icon for the same reason that Charlie mention, it look like cancel has a question mark . It can be on the right side of the language section:

or maybe the design team have better ideas.

@Greta_Doci_WMDE

since the help icon is not an overall icon but used with every statement etc. it should stay with the other icons. We don't seem to have an overall help icon on the page that is visible at all times. If we need something like that is a different topic.

I'm leaning towards using helpNotice but I am not sure of the use cases for it. @Volker_E would it be appropriate to use helpNotice here? I couldn't find any information on the use cases of icons in the documentation.

@Charlie_WMDE Indeed, 'helpNotice' is the best choice here. 'helpNotice' is used where a focus on interactive area of the help element is useful, while 'help' is working well in a toolbar or framed button.

Change 483123 had a related patch set uploaded (by Greta WMDE; owner: Greta Doçi):
[mediawiki/extensions/Wikibase@master] Merge branch 'master' of ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Wikibase into review/volkere/replace-wbtoolbar-icons-with-standard-T209259

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

Change 483124 had a related patch set uploaded (by Greta WMDE; owner: Greta Doçi):
[mediawiki/extensions/Wikibase@master] Update help-icon with the new one. -Also hover was removed since there was no icon for it. -width and height was changed according to the new icon size.

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

Change 483123 abandoned by Greta WMDE:
Merge branch 'master' of ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Wikibase into review/volkere/replace-wbtoolbar-icons-with-standard-T209259

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

@Charlie_WMDE @Volker_E, I changed the help icon according to your suggestions. I removed the hover, because as I understood the new versions of icons have no hover. But, if I missed something, let me know and I add that back.
Also, I changed the width and height according to the new icon size.

That's a proposal with amended icon, size, background-size, margin and opacity:

Thank you for @Volker_E !

@Greta_Doci_WMDE does that help you to finish the task?

@Charlie_WMDE, it is already finished by @Volker_E, he also uploaded the patch with the new changes :)

Volker_E mentioned this in T207190: Use consistent 'edit' icon across web products.Jan 11 2019, 9:15 PM

In T209259#4753319, @Greta_Doci_WMDE wrote:

@Jan_Dittrich @Volker_E I pulled https://gerrit.wikimedia.org/r/473155.

I checked the look of the item page with Jan, we noted that the pencil icon was changed which is fine. In the issue description you also mention Save and Cancel icons, seems that they have not changed. Is this correct?

Save/Cancel
Edit

They have changed and it's visible in your screenshots vs the task description ones. The 'tear' on the checkmark top right path end and bottom left to top right path of the 'close' icon have been removed.

Volker_E updated the task description. (Show Details)Jan 12 2019, 1:50 AM

Change 483124 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Update help icon with the new one

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

ReleaseTaggerBot added a project: MW-1.33-notes (1.33.0-wmf.14; 2019-01-22).Jan 21 2019, 7:00 PM

Volker_E updated the task description. (Show Details)Jan 22 2019, 4:19 AM

Volker_E updated the task description. (Show Details)

Volker_E updated the task description. (Show Details)Jan 22 2019, 5:47 PM

Change 485991 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/WikibaseLexeme@master] Replace icon path and update icons accordingly to Wikibase

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

Diffusion mentioned this in rEWLE49bbd01c09a7: Replace icon path and update icons accordingly to Wikibase.Jan 23 2019, 1:09 AM

Change 490358 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: VolkerE):
[mediawiki/extensions/Wikibase@master] Clean up CSS comments

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

Change 490359 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/WikibaseLexeme@master] Update for new Wikibase icon location

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

Change 490360 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: VolkerE):
[mediawiki/extensions/Wikibase@master] Remove oojs-ui/ icons

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

Lucas_Werkmeister_WMDE mentioned this in rEWLEf0f56fc3facd: Update for new Wikibase icon location.Feb 13 2019, 4:35 PM

Change 490358 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Clean up CSS comments

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

ReleaseTaggerBot edited projects, added MW-1.33-notes (1.33.0-wmf.18; 2019-02-19); removed MW-1.33-notes (1.33.0-wmf.14; 2019-01-22).Feb 13 2019, 7:00 PM

Change 473155 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Update outdated icons with latest standard ones

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

Change 490359 abandoned by Lucas Werkmeister (WMDE):
Update for new Wikibase icon location

Reason:
I forgot this change already existed as I556d9a0b64.

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

Addshore mentioned this in T215393: Add edit links for “identifying information” section and “ShExC” section.Feb 22 2019, 2:32 PM

Diffusion mentioned this in rEWLEd4db24853b86: Replace icon path and update icons accordingly to Wikibase.Mar 4 2019, 7:07 PM

Is there anything left to do here now? I'm sorry I get a bit lost in the patches.

@Lydia_Pintscher Due to the path dependency someone still needs to review and merge WikibaseLexeme patch provided at https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/WikibaseLexeme/+/485991/

Thanks!
@Lucas_Werkmeister_WMDE you already gave that patch a +2 before a rebase. Maybe you want to re-add your +2.

Excellent, thanks @Lucas_Werkmeister_WMDE!

Change 485991 merged by jenkins-bot:
[mediawiki/extensions/WikibaseLexeme@master] Replace icon path and update icons accordingly to Wikibase

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

ReleaseTaggerBot edited projects, added MW-1.33-notes (1.33.0-wmf.22; 2019-03-19); removed MW-1.33-notes (1.33.0-wmf.18; 2019-02-19).Mar 17 2019, 12:03 AM

jijiki mentioned this in rEWLE5fe187c1b99b: Replace icon path and update icons accordingly to Wikibase.Mar 18 2019, 4:36 PM

That's successfully resolved!

Change 490360 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Remove oojs-ui/ icons

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.22; 2019-09-10).Sep 4 2019, 12:00 AM

	F27834338: image.png
	Jan 9 2019, 5:56 PM

	F27821278: image.png
	Jan 8 2019, 12:19 PM

	F27821287: image.png
	Jan 8 2019, 12:19 PM

	F27821374: image.png
	Jan 8 2019, 12:19 PM

Wikibase toolbar features outdated iconsClosed, ResolvedPublicActions