Page MenuHomePhabricator

Expand button for compact language links features wrong colored icon
Closed, ResolvedPublic

Description

The button with class mw-interlanguage-selector features an SVG with color #707070, but should be Base10 #202122 to be in alignment with button text.

image.png (60×168 px, 3 KB)

Exemplary button at article https://en.wikipedia.org/wiki/Saint_Eustace

Proposal

Bring it closer to DSG buttons by

  • updating the language icon to be crispier standard icon, not being resized twice by viewport and background-size application
  • and by applying a #54595d fill instead of #72777d
  • amending the padding (still non-standard),
  • adding similar margin to top as underneath the portlet headline to not make "Edit links" link stick on the button

Refraining from changing it further, as the current language list and Vector sidebar doesn't allow a bolder, bigger button.

BeforeAfter
image.png (580×348 px, 29 KB)
image.png (582×328 px, 29 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Nikerabbit renamed this task from Interlanguage Selector button features wrong colored icon to Expand button for compact language links features wrong colored icon.Jul 11 2017, 8:48 AM

Was this addressed as part of T178867?

@Volker_E, @Pginer-WMF, can you please verify?

@Amire80 It does feature a color palette color (#72777d) but not the right button color as it should use no internal color (SVGs default is black) and get modified by CSS through opacity setting similar to the icons in OOUI's buttons.
As we've just refined and unified icons in T177432, we might need to update ULS icons anyways.

Ok, so the proposed change is to use the standard language icon from the icon repo (which uses pure black, #000) and adjust opacity to make it show as #222. Is that right?

Pginer-WMF triaged this task as Medium priority.Mar 27 2018, 7:35 AM
Pginer-WMF moved this task from Backlog to Maintenance backlog on the Language-2018-Jan-Mar board.
Volker_E updated the task description. (Show Details)

By looking again at this, it's a non-standard-button that is missing:

  • correct font-weight
  • correct font-size; being in px is a cross-theme and possible accessibility issue
  • correct icon color
  • correct padding

In order to bring it at least closer (and update the language icon to be crispier, not being resized twice by viewport and background-size application), I'll update the icon to standard icon and apply a #54595d fill instead of #72777d.
We'll slightly amend the padding (still non-standard), and add similar margin to top as underneath the portlet headline to not make Edit links link stick on the button.

BeforeAfter
image.png (580×348 px, 29 KB)
image.png (582×328 px, 29 KB)

Change 638112 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/UniversalLanguageSelector@master] Amend compact links icon to use latest WikimediaUI version

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

Change 638112 merged by jenkins-bot:
[mediawiki/extensions/UniversalLanguageSelector@master] Amend compact links icon to use latest WikimediaUI version

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

Volker_E claimed this task.
Volker_E updated the task description. (Show Details)
Volker_E removed a project: Patch-For-Review.