Create Task
Maniphest T14918

Make focus, selection, and hover effects consistent
Open, Needs TriagePublic
Actions

Description

Right now keyboard focus is a bit of a visual mess because we're not consistent about how these states are presented. I will summarize what they are here:

  • Active focus/selection: This thing is the currently selected item and its view has focus. Only one thing should ever have this state.
  • Inactive focus/selection: "This thing is the currently selected item in a view that does not have focus. Multiple things can have this state because there may be multiple unfocused views in a UI.
  • In use: This item is currently being used. Distinct to only some UI elements; most list and grid items will not have this state.
  • Hover: The user has positioned their cursor over thing thing, regardless of its focus state. Only one thing should ever have this state.

Having distinct visuals for each state is important, because when active and inactive focus states look identical, the user can't tell which item actually has keyboard focus. Also, some UIs such as System Settings grid items need to have a distinct "Selected" state that is different from "active focus/hover" because it needs to show which item is actively in use. One item can be actively in use, but another one can have active focus, so these states need to look different.

Kickoff (git master/5.23 only) and Elisa have good examples of how this is handled well: for the inactive focus effect, they use a lightened/desaturated version of the active focus effect, and they re-use the active focus effect for the hover effect.

(Though as you can see the color for the two inactive focus effects differ in Elisa, which is a bug)

Related Objects
Search...

ngraham created this task.Oct 4 2021, 9:18 PM
ngraham added a comment.Oct 4 2021, 9:22 PM

Proposal:

  • Active focus and hover states always look identical and consist of a colored outline + background, just like the current Plasma selection effect and menu effect in QWidgets apps.
  • Inactive focus state looks the same as active focus but with 50% opacity and is forced to a monochrome color. The only list or grid element with the selection color should have active selection!
  • "In use" shows a badge overlay of some sort to indicate that an item is in use. Here's an old mockup:
ahiemstra added a subscriber: ahiemstra.Oct 5 2021, 12:28 PM

Since the focus ring effect for widgets seems to be moving along quite nicely, I think we should consider applying it in more cases. That said, the current selection outline already sort of matches that style.

felixernst added a subscriber: felixernst.Oct 5 2021, 1:25 PM

Good idea to open a phab task about this.

In T14918#264301, @ngraham wrote:
  • Inactive focus state looks the same as active focus but with 50% opacity and is forced to a monochrome color. The only list or grid element with the selection color should have active selection!

I think this or something similar makes sense. I could also see a less saturated version of the selection colour work for the inactive focus state if we run into the problem that a monochrome inactive focus state blends in too much with our otherwise mostly monochrome user interfaces.

  • "In use" shows a badge overlay of some sort to indicate that an item is in use. Here's an old mockup:

Would you also want to signify the "In use" state if an item is currently "selected"? I am not sure if that would be necessary (looking at the mockup).

ngraham added a comment.Oct 5 2021, 3:03 PM

Since the focus ring effect for widgets seems to be moving along quite nicely, I think we should consider applying it in more cases. That said, the current selection outline already sort of matches that style.

Indeed, that makes sense for explicitly framed controls like buttons and text fields. But I think for things like list and grid items, it doesn't necessarily look as good because there is no inner frame to draw the focus ring around, or else the list item butts up against what's around it so there's no room to put the focus ring. For the grid items in System Settings though, it could work since they currently have a framed style. But this wouldn't work in Kickoff or Klipper, for example.

Would you also want to signify the "In use" state if an item is currently "selected"? I am not sure if that would be necessary (looking at the mockup).

Yeah, we've had complaints and gotten bug reports about this in System Settings.