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.
Description
Description
Details
Details
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Support changing icon variants on hover | mediawiki/core | master | +15 -15 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | • Prtksxna | T88622 ButtonWidget (frameless…) to be styled like quiet buttons/normal anchors | |||
| Resolved | Catrope | T97816 Support icons changing color on hover in MediaWiki's use of OOUI |
Event Timeline
Comment Actions
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.)
Comment Actions
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]'
Comment Actions
Change 210688 had a related patch set uploaded (by Catrope):
Support changing icon variants on hover
Comment Actions
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.
Comment Actions
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. (?)
Comment Actions
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/
Comment Actions
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.
Comment Actions
This MediaWiki-ResourceLoader enhancement has been fixed; I'm not sure we accepted it as an OOUI one, did we?