Page MenuHomePhabricator

A17. Replace icon font with OOjs UI icons
Closed, ResolvedPublic

Event Timeline

Catrope created this task.Apr 27 2015, 5:35 PM
Catrope claimed this task.
Catrope raised the priority of this task from to Needs Triage.
Catrope updated the task description. (Show Details)
Catrope added a subscriber: Catrope.
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptApr 27 2015, 5:35 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Mattflaschen-WMF triaged this task as Normal priority.Apr 27 2015, 5:44 PM
Catrope removed Catrope as the assignee of this task.Apr 27 2015, 10:36 PM

Change 207154 had a related patch set uploaded (by Mooeypoo):
[wip] Convert Flow icons to ooui icons

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

@Pginer-WMF, the current patch involves changing some icons that are currently only colored on hover to being colored all the time, so you may want to take a look.

Change 207682 had a related patch set uploaded (by Mooeypoo):
Adding variants to several icons

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

Change 207682 merged by jenkins-bot:
MediaWiki theme: Adding variants to several icons

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

Change 207892 had a related patch set uploaded (by Mooeypoo):
Add 'destructive' variant to block icon

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

Change 207892 merged by jenkins-bot:
MediaWiki theme: Add 'destructive' variant to block icon

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

With the changes in the patchset we are presenting icons in several colors at the same time which may be too distracting:

If I understand the original design intent correctly (@violetto may want to add more details), the goal was to present the user a list of options and provide some additional feedback for users about the specific action they are going to take. For example, If I want to delete a topic, the action label (icon and text) will turn red to reinforce the idea that data will be destroyed.

By moving these information upfront, we are communicating information even for actions users may not be interested. I don't see a reason to increase the level of prominence for that information.

If we are really not able to change colors, I'd go with making icons and labels grey instead of setting a fixed color for the icons. However, I wonder, are we really not able to support icons in multiple colors? Some thoughts about that:

  • When reading about the change I was wondering why is this change proposed in the first place, I'd would expect the this Phabricator ticket to contain more details about that (maybe the discussion is elsewhere and I missed it).
  • I can imagine a preference for the use of SVGs instead of webfonts (a lot has been writen on the internet about pros and cons of each approach), but are there any plans to support multiple color icons with the option that SVG provides (multiple assets, embedded SVGs modified through CSS, using Less to replace colors in URL-encoded SVGs)? Here is a quick example of the later, but I'm not sure how much effort would require for ResourceLoader to be able to support something like that. Is there a Phabricator ticket to discuss this?
  • I can imagine a preference for the use of SVGs instead of webfonts

We want to use the icon set that's already in OOUI, rather than maintaining our own set of icons separately; we want to use the same technology as everyone else; and SVGs are data-URI-embeddable whereas icon fonts are not, which enabled us to write a ResourceLoader integration for them.

And then there's things like this :(

but I'm not sure how much effort would require for ResourceLoader to be able to support something like that. Is there a Phabricator ticket to discuss this?

It shouldn't be too difficult to support this in OOUI / RLImageModule. We already support changing icon colors based on CSS classes, that's what we currently use, right now you just can't do it on hover without using JS. I'll file a task.

  • I can imagine a preference for the use of SVGs instead of webfonts

We want to use the icon set that's already in OOUI, rather than maintaining our own set of icons separately; we want to use the same technology as everyone else; and SVGs are data-URI-embeddable whereas icon fonts are not, which enabled us to write a ResourceLoader integration for them.

We also had a big meeting about this and explicitly decided to use SVG for web. (There are definitely advantages to web fonts as well, but it was decided to use SVG for some of the reasons Roan states). The web font advantages are not compelling enough to re-decide this.

And then there's things like this :(

This is the first I've heard of this. Where is that happening and why?

In T97312#1253072, @Mattflaschen wrote:

And then there's things like this :(

This is the first I've heard of this. Where is that happening and why?

On my localhost (but not on beta labs or production web sites), and only in Firefox, not in Chrome. No idea why.

In T97312#1253072, @Mattflaschen wrote:

And then there's things like this :(

This is the first I've heard of this. Where is that happening and why?

On my localhost (but not on beta labs or production web sites), and only in Firefox, not in Chrome. No idea why.

Actually I just got it on beta labs too, in Chrome :(

DannyH renamed this task from Replace icon font with OOjs UI icons to A17. Replace icon font with OOjs UI icons.May 6 2015, 8:43 PM

Change 207154 merged by jenkins-bot:
Convert Flow icons to ooui icons

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

And then there's things like this :(

Hit it on MediaWiki.org and filed T99873: Wrong star icons.

DannyH closed this task as Resolved.Jun 2 2015, 12:49 AM
DannyH added a subscriber: DannyH.

Change 219028 had a related patch set uploaded (by Catrope):
Remove Wikiglyph, it's unused now

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

Remove Wikiglyph, it's unused now

@Mooeypoo pointed out in gerrit that "flow-load-more" uses flow-loading which animates the gear icon from WikiFont-Glyphs. You could swap that for the "Advanced" gear icon in OOUI, or do something else (T102884: Standardize "Loading..." animation).

Remove Wikiglyph, it's unused now

@Mooeypoo pointed out in gerrit that "flow-load-more" uses flow-loading which animates the gear icon from WikiFont-Glyphs. You could swap that for the "Advanced" gear icon in OOUI, or do something else (T102884: Standardize "Loading..." animation).

I agree that we should have a global proper way to represent "Loading" state, but until we have something like that, we need to be very careful in this case. The wikiglyph in question isn't just being used as-is, it's also being rotated in CSS to produce the animation - something I am not too sure would be that easy to do to an ooui icon. We should find a solution first before we erase the behavior now, either way.

Change 219028 merged by jenkins-bot:
Remove Wikiglyph, it's unused now

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