Page MenuHomePhabricator

Change external link icon to SVG
Closed, ResolvedPublic

Description

When changing the link color for dark and black theme we should also change the color of the external link icon. To match development for other icons we should move to using SVGs instead of PNGs.

Event Timeline

LGoto triaged this task as Medium priority.Apr 28 2020, 3:35 PM

Change 593611 had a related patch set uploaded (by BearND; owner: BearND):
[mediawiki/services/mobileapps@master] Move external link icon from base CSS to PCS CSS

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

@bearND thanks for this ticket, just updated with an SVG of the external link icon

Hi @bearND it's from a different repository but should be the same, sorry! Feel free to use the one from https://design.wikimedia.org/style-guide/resources/WikimediaUI-icons-SVGs.zip

@cmadeo I think there might be a slight margin difference. Other than that it looks the same. I've updated the apps-ui instance with the icon change to the SVG from the style guide.

  • Default: (no fill color)
    Screen Shot 2020-05-05 at 5.04.08 PM.png (112×407 px, 13 KB)
  • Sepia: (fill color: #222)
    Screen Shot 2020-05-05 at 5.06.52 PM.png (105×407 px, 13 KB)
  • Dark: (fill color: #c8ccd1)
    Screen Shot 2020-05-05 at 5.07.20 PM.png (111×411 px, 14 KB)
  • Black: (fill color: #c8ccd1)
    Screen Shot 2020-05-05 at 5.07.42 PM.png (117×418 px, 13 KB)

Or should the last to be #69f?

Hi @bearND sorry to be so late with this response! On web we style the External link icon as the same color as the active link color, could we do the same here? (see the info box for this article as an example: https://en.wikipedia.org/wiki/Wikipedia)

@cmadeo I've update the fill colors, see the links below. This just covers the base state not the visited state. It's tricky to have many permutations of fill color with the background-image URLs in plain CSS. Once we switch to LESS this could be easier todo. It should be easier now with SVGs vs PNGs, though.

  • Default: (fill color: #36c)
    Screen Shot 2020-05-12 at 2.04.41 PM.png (97×394 px, 19 KB)
  • Sepia: (fill color: #36c)
    Screen Shot 2020-05-12 at 2.05.20 PM.png (110×405 px, 13 KB)
  • Dark: (fill color: #69f)
    Screen Shot 2020-05-12 at 2.05.28 PM.png (104×404 px, 13 KB)
  • Black: (fill color: #69f)
    Screen Shot 2020-05-12 at 2.05.36 PM.png (110×400 px, 13 KB)

@bearND thanks so much! This looks great. It looks like even on web we maintain the active color for the external link icon even when the link color is visited.

Change 593611 merged by jenkins-bot:
[mediawiki/services/mobileapps@master] Move external link icon from base CSS to PCS CSS

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

Deployed code and purged styles in Varnish.