Page MenuHomePhabricator

Support icons changing color on hover in MediaWiki's use of OOUI
Closed, ResolvedPublic

Description

As @Pginer-WMF points out at T97312#1251613, having icons always be colored makes for a pretty busy appearance when you have a list of tools with various flags. It would be more appropriate for the icons to only be colored on hover. However, this isn't currently supported by ResourceLoaderImageModule or current OOUI icon styles without using JS to add a class on hover.

Event Timeline

Catrope created this task.May 1 2015, 6:19 PM
Catrope raised the priority of this task from to Needs Triage.
Catrope updated the task description. (Show Details)
Catrope added subscribers: Catrope, Pginer-WMF.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 1 2015, 6:19 PM

Any implementation ideas? The only halfway sensible solution I see is to generate small image sprites with all variants in them, and choose the right one with background-position. (Or put the right CSS rules for :hover etc. into the selectors in icon packs' definition, but that's eww.)

I was thinking the latter: come up with some facility to generate rules like .oo-ui-icon-foo.oo-ui-image-destructive, .oo-ui-icon-foo.oo-ui-image-destructive-hover:hover { ... }

Maybe in MW core's RLIM config, we could have something like 'selectorWithVariant' => '.oo-ui-image-{variant} .oo-ui-icon-{name}, .oo-ui-image-{variant}.oo-ui-icon-{name}, .oo-ui-image-{variant}-hover .oo-ui-icon-{name}:hover, .oo-ui-image-{variant}-hover.oo-ui-icon-{name}:hover, [MW UI stuff]'

Jdforrester-WMF triaged this task as Normal priority.May 4 2015, 6:09 PM

Change 210688 had a related patch set uploaded (by Catrope):
Support changing icon variants on hover

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

I ended up with .mw-ui-hovericon:hover .mw-ui-icon-{name}-{variant}-hover:before, .mw-ui-hovericon.mw-ui-icon-{name}-{variant}-hover:hover:before. This allows you to trigger the icon change on hovering an ancestor of the icon. By themselves the -hover classes only display the icon when hovered, so in practice, you'll probably want to apply both the mw-ui-icon-name and the mw-ui-icon-name-variant-hover classes, like <div class="mw-ui-hovericon"><span class="mw-ui-icon-remove mw-ui-icon-remove-destructive-hover"></span> Remove</div>. This causes the icon to be the normal icon unless the div is hovered, then it's destructive.

How much complication does this add to the rendered page? If it's a great amount, would it be worth considering alternatives, such as: Only change the color of the text, and leave the icons alone. (?)

Nah, the changes to the rendered page are pretty simple. All you have to do is:

  • Change mw-ui-icon-remove-destructive to mw-ui-icon-remove mw-ui-icon-remove-destructive-hover
  • Add class="mw-ui-hovericon" to the parent of the icon

I have in fact already submitted a patch to Flow that does this: https://gerrit.wikimedia.org/r/#/c/210690/

Change 210688 merged by jenkins-bot:
Support changing icon variants on hover

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

Jdforrester-WMF closed this task as Resolved.May 30 2015, 7:30 PM
Jdforrester-WMF assigned this task to Catrope.
Jdforrester-WMF set Security to None.
Jdforrester-WMF moved this task from Backlog to Reviewing on the OOUI board.May 31 2015, 11:04 PM

I see how this solves the problem for mw-ui-icons in core but I don't understand how OOjs UI widgets (in isolation from mediawiki core) like the one in T88622 can start using this.

Catrope reopened this task as Open.Jun 5 2015, 5:26 PM

I see how this solves the problem for mw-ui-icons in core but I don't understand how OOjs UI widgets (in isolation from mediawiki core) like the one in T88622 can start using this.

They can't, which is why this task shouldn't have been closed.

This MediaWiki-ResourceLoader enhancement has been fixed; I'm not sure we accepted it as an OOUI one, did we?

Jdforrester-WMF changed the task status from Open to Stalled.Jul 22 2015, 11:46 PM
Jdforrester-WMF renamed this task from Support icons changing color on hover to Support icons changing color on hover in MediaWiki's use of OOUI.Aug 7 2015, 6:26 PM
Jdforrester-WMF closed this task as Resolved.