Page MenuHomePhabricator

Use progressive for selected states in OOUI toolbars
Closed, ResolvedPublic8 Story Points

Description

Use progressive color for suggesting selection in toolbar tools, especially inside VisualEditor


Before (v0.17.7)After

Event Timeline

Nirzar created this task.Aug 4 2015, 10:15 PM
Nirzar raised the priority of this task from to Needs Triage.
Nirzar updated the task description. (Show Details)
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 4 2015, 10:15 PM
Jdforrester-WMF renamed this task from OOJS UI Use progressive for selected states to Use progressive for selected states in OOUI.Aug 5 2015, 12:20 AM
Jdforrester-WMF triaged this task as High priority.
Jdforrester-WMF awarded a token.
Jdforrester-WMF set Security to None.
Jdforrester-WMF moved this task from Backlog to Next-up on the OOUI board.Aug 8 2015, 9:07 PM

Change 231243 had a related patch set uploaded (by Prtksxna):
MediaWikiTheme: Toolbar: Use @progressive-fade as bg for enabled tools

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

The patch changes only the background, not the text and icon. I wasn't sure how to change the icons so left that part out.

Prtksxna moved this task from Next-up to Doing on the OOUI board.Aug 13 2015, 10:16 AM

@Nirzar, what about the hover color – should it stay grey?

@Prtksxna, we could use the progressive variant of icons (we'd just have to configure the variant to be available for all of them). I think it should just work if we called setFlags( 'progressive' ) when the tool is selected (if not, the rules in MediaWikiTheme have to be updated). I can amend the patch.

@matmarex no, it shouldn't be grey. it should be a darker shade of the light blue. something like #d2e0fb but I will let @violetto get the correct hex code. sorry it wasn't included in task description to begin with, my bad.

@Nirzar, @violetto's spec actually disagrees with you on this.

@matmarex, in which areas are you referring to?

In hover color.

@matmarex no i think the spec is missing hover for selected. it says grey hover for menus other than selected. in the case shown Option 1 is selected but never hovered.

Esanders updated the task description. (Show Details)Sep 21 2015, 2:24 PM
Esanders added a subscriber: Esanders.EditedOct 23 2015, 2:35 PM

deleted

Esanders lowered the priority of this task from High to Normal.Nov 19 2015, 11:32 PM

@violetto Current layout as proposed in patch set 13. Blue is selected state (not active as in mousedown), active state's background is a little more contrast, I can't trigger that with the dev tools and therefore it's missing in the screen shot. Last item is in normal list item :hover state. Selected list item :hover is blue like :active

Jdforrester-WMF moved this task from Doing to Reviewing on the OOUI board.Mar 8 2016, 11:02 PM
Jdforrester-WMF changed the task status from Stalled to Open.May 30 2016, 5:42 PM
Jdforrester-WMF renamed this task from Use progressive for selected states in OOUI to Use progressive for selected states in OOUI toolbars.May 30 2016, 9:26 PM
Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.17.4); removed OOUI.
Jdforrester-WMF edited projects, added OOUI; removed OOUI (OOjs-UI-0.17.4).
Prtksxna updated the task description. (Show Details)Jun 26 2016, 2:16 PM

It should be noted that this would require us to generated progressive variants of any icon used in the toolbar.

It should be noted that this would require us to generated progressive variants of any icon used in the toolbar.

The patch does this already (indeed, for any icon).

Danny_B moved this task from Unsorted to OOUI on the UI-Standardization board.Jul 4 2016, 10:03 PM
Volker_E updated the task description. (Show Details)Aug 15 2016, 10:03 PM
Volker_E edited subscribers, added: Pginer-WMF; removed: violetto.Aug 15 2016, 10:06 PM

@Jdforrester-WMF In a short conversation with/presentation to @Nirzar yesterday, we were talking about the :active:hover state and both agreed with just slight background-color change on :hover as implemented in latest patch (PS 22). Mouse is pointing and changing cursor which is sufficient visual hint. @Nirzar is fine with the latest patch set.

Jdforrester-WMF edited projects, added OOUI (OOjs-UI-0.17.9); removed OOUI.

Change 231243 merged by jenkins-bot:
MediaWiki theme: Toolbar: Use progressive colors for active and active-hover

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

Jdforrester-WMF closed this task as Resolved.Aug 16 2016, 9:38 PM
Jdforrester-WMF removed a project: Patch-For-Review.