Page MenuHomePhabricator

Reconsider Flow's use of .mw-ui-hovericon (dropdown menu items that gain progressive/constructive/destructive styling on hover)
Closed, ResolvedPublic

Description

I think we should reconsider Flow's use of dropdown menu items that gain progressive/constructive/destructive styling on hover, implemented using the .mw-ui-hovericon CSS class.

Per T108086, the progressive/constructive/destructive type of action is impossible to see on mobile devices, which do not have hover. Per T108086#1529019 it is okay to always make the type visible. In case this would make the interface too busy, I think it would be okay to just drop the colors. OOjs UI dropdowns do not let you set flags on individual options.

If we decide to do it, we could drop the addition from T97816 from the RL module definitions for OOjs UI.

Details

Related Gerrit Patches:

Event Timeline

matmarex created this task.Aug 24 2015, 3:24 PM
matmarex raised the priority of this task from to Needs Triage.
matmarex updated the task description. (Show Details)
matmarex added subscribers: matmarex, Catrope.
Restricted Application added a project: Collaboration-Team-Triage. · View Herald TranscriptAug 24 2015, 3:24 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Catrope triaged this task as Medium priority.Aug 26 2015, 11:25 PM
DannyH set Security to None.
Volker_E assigned this task to Pginer-WMF.EditedDec 5 2017, 1:47 AM
Volker_E added a subscriber: Jdlrobson.

Given the extra code that is delivered to all users for this little effect, I'm for removing this special treatment as well and just go for a background-color change on :hover.

This is the current visual treatment:


Please notice that both options (“Edit title” & “History”) are in :hover state. We currently don't apply the same treatment on different options per menu!
Compare OOUI's DropdownWidget treatment (last item is hovered)

Exemplified code from CSS output on 393851

.oo-ui-image-invert.oo-ui-icon-alert, .mw-ui-icon-alert-invert:before,
/* Hack for Flow, see T110051 */
.mw-ui-hovericon:hover .mw-ui-icon-alert-invert-hover:before,
.mw-ui-hovericon.mw-ui-icon-alert-invert-hover:hover:before {
	background-image: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=invert&format=rasterized&lang=en&skin=minerva);
	background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23fff%22%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22point%22 d=%22M11 16h2v2h-2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22stroke%22 d=%22M13.516 10h-3L11 15h2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22triangle%22 d=%22M12.017 5.974L19.537 19H4.497l7.52-13.026m0-2.474c-.545 0-1.09.357-1.5 1.07L2.53 18.403C1.705 19.833 2.38 21 4.03 21H20c1.65 0 2.325-1.17 1.5-2.6L13.517 4.575c-.413-.715-.956-1.072-1.5-1.072z%22/%3E%0A%3C/g%3E%3C/svg%3E%0A");
	background-image: -o-linear-gradient(transparent, transparent), url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=invert&format=rasterized&lang=en&skin=minerva);
}

.oo-ui-image-progressive.oo-ui-icon-alert, .mw-ui-icon-alert-progressive:before,
/* Hack for Flow, see T110051 */
.mw-ui-hovericon:hover .mw-ui-icon-alert-progressive-hover:before,
.mw-ui-hovericon.mw-ui-icon-alert-progressive-hover:hover:before {
	background-image: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=progressive&format=rasterized&lang=en&skin=minerva);
	background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%2336c%22%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22point%22 d=%22M11 16h2v2h-2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22stroke%22 d=%22M13.516 10h-3L11 15h2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22triangle%22 d=%22M12.017 5.974L19.537 19H4.497l7.52-13.026m0-2.474c-.545 0-1.09.357-1.5 1.07L2.53 18.403C1.705 19.833 2.38 21 4.03 21H20c1.65 0 2.325-1.17 1.5-2.6L13.517 4.575c-.413-.715-.956-1.072-1.5-1.072z%22/%3E%0A%3C/g%3E%3C/svg%3E%0A");
	background-image: -o-linear-gradient(transparent, transparent), url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=progressive&format=rasterized&lang=en&skin=minerva);
}

.oo-ui-image-warning.oo-ui-icon-alert, .mw-ui-icon-alert-warning:before,
/* Hack for Flow, see T110051 */
.mw-ui-hovericon:hover .mw-ui-icon-alert-warning-hover:before,
.mw-ui-hovericon.mw-ui-icon-alert-warning-hover:hover:before {
	background-image: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=warning&format=rasterized&lang=en&skin=minerva);
	background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23ff5d00%22%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22point%22 d=%22M11 16h2v2h-2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22stroke%22 d=%22M13.516 10h-3L11 15h2z%22/%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 id=%22triangle%22 d=%22M12.017 5.974L19.537 19H4.497l7.52-13.026m0-2.474c-.545 0-1.09.357-1.5 1.07L2.53 18.403C1.705 19.833 2.38 21 4.03 21H20c1.65 0 2.325-1.17 1.5-2.6L13.517 4.575c-.413-.715-.956-1.072-1.5-1.072z%22/%3E%0A%3C/g%3E%3C/svg%3E%0A");
	background-image: -o-linear-gradient(transparent, transparent), url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=alert&variant=warning&format=rasterized&lang=en&skin=minerva);
}

.oo-ui-image-invert.oo-ui-icon-bell, .mw-ui-icon-bell-invert:before,
/* Hack for Flow, see T110051 */
.mw-ui-hovericon:hover .mw-ui-icon-bell-invert-hover:before,
.mw-ui-hovericon.mw-ui-icon-bell-invert-hover:hover:before {
	background-image: url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=bell&variant=invert&format=rasterized&lang=en&skin=minerva);
	background-image: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3C%3Fxml version=%221.0%22 encoding=%22UTF-8%22%3F%3E%0A%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22%3E%3Cg fill=%22%23fff%22%3E%0A%09%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 d=%22M17.5 13V8c0-3-2.3-5-5.5-5S6.5 5 6.5 8v5c0 2 0 3-2 3v1h15v-1c-2 0-2-1-2-3zM12 19H9c0 1 1.6 2 3 2s3-1 3-2h-3z%22/%3E%0A%3C/g%3E%3C/svg%3E%0A");
	background-image: -o-linear-gradient(transparent, transparent), url(/w/load.php?modules=oojs-ui.styles.icons-alerts&image=bell&variant=invert&format=rasterized&lang=en&skin=minerva);
}

@Pginer-WMF Your input please!

Restricted Application added a project: UI-Standardization. · View Herald TranscriptDec 5 2017, 1:47 AM

@Pginer-WMF Your input please!

I'm not familiar with the rationale of such design decision. I can guess it was aligned with the old way we were assigning colors to actions with the constructive/progressive/destructive metaphor we no longer follow on buttons.
I don't think this is very helpful right now. In the example, elements highlighted in blue are those potentially modifying information. But those (a) are not necessarily the primary acton (what we use blue for nowadays), and (b) users may associate blue text as side-effect-free actions based on the semantics of links (making the opposite association harder).

So I think that the distinction leaves too much for the user to figure out and may cause more confusion than help the user. So I'm ok in removing it.

Volker_E claimed this task.Dec 5 2017, 11:54 PM
Volker_E added a subscriber: Mooeypoo.

Thanks @Pginer-WMF – that helps to move this forward best-possibly!

Two URLs with current usage of the affected list:

None of both lists would be differently affected than with our agreement above!

Change 395674 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Flow@master] Remove unique, inconsistent treatment of menu items

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

Change 395680 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Revert "Support changing icon variants on hover"

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

Change 395674 merged by jenkins-bot:
[mediawiki/extensions/Flow@master] Remove unique, inconsistent treatment of menu items

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

Volker_E reassigned this task from Volker_E to Etonkovidova.Dec 6 2017, 2:16 AM

Elena, over to you for QA. :) Result should feature only background-color change on :hover of those items and no other change in those three places.

Change 395680 merged by jenkins-bot:
[mediawiki/core@master] Revert "Support changing icon variants on hover"

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

Checked in betalabs for items on

Overflow menu in topic title & overflow menu in `.flow-post-main

The discrepancy in on-hover states has been eliminated; also, the long-standing issue T132648: [minor]: 'Mark as resolve' and 'Reopen topic' have checkmark icon black was resolved too with this ticket.

Volker_E closed this task as Resolved.Dec 12 2017, 9:07 PM

Yes! :)