Ryan Hughes
8b858d4093
Wide content rows (slider rows in audio / monitor panels) opted out of
the cursor fill by setting fill: "transparent" on their CursorSurface,
which left them with no cursor visual at all — j/k landed there
silently with no way to know what was selected.
Add an `outline: bool` flag to CursorSurface. When true, hasCursor
paints an accent border (Style.focusBorderColor at
Style.focusBorderWidth) instead of a fill, leaving the row's chrome
fully visible underneath. Use for slider rows where a fill would
obscure the track.
Audio output / input slider rows and the monitor brightness row opt
in. The dev gallery's slider section replaces its bespoke Rectangle
wrapper with the same CursorSurface { outline: true }, so what the
gallery documents is what the panels ship.
44 lines
1.5 KiB
QML
44 lines
1.5 KiB
QML
import QtQuick
|
|
import qs.Commons
|
|
|
|
// Shared visual chrome for keyboard-and-mouse-navigable items inside a panel.
|
|
// Contract: items must NOT read `containsMouse` for color/border. Mouse
|
|
// hover updates the panel's cursor state at the root; visuals derive from
|
|
// `hasCursor` / `current`. That's what guarantees a single highlight on
|
|
// screen at any time across both keyboard and mouse interaction.
|
|
//
|
|
// Two cursor visuals are supported:
|
|
//
|
|
// default (outline: false) — paint a tinted fill across the row when
|
|
// hasCursor is true. Use for narrow text rows (wifi networks, audio
|
|
// devices, menu items) where fill reads cleanly.
|
|
//
|
|
// outline: true — paint an accent border instead of a fill. Use for
|
|
// wide content rows where a fill would obscure the row's chrome
|
|
// (slider rows in audio / monitor panels). The fill / currentFill
|
|
// props are ignored in this mode.
|
|
Rectangle {
|
|
id: root
|
|
|
|
property bool hasCursor: false
|
|
property bool current: false
|
|
property bool outline: false
|
|
|
|
property color foreground: Color.foreground
|
|
property color fill: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.08)
|
|
property color currentFill: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.18)
|
|
|
|
radius: Style.cornerRadius
|
|
|
|
color: root.outline
|
|
? "transparent"
|
|
: (hasCursor ? fill : (current ? currentFill : "transparent"))
|
|
|
|
border.color: root.outline && hasCursor ? Style.focusBorderColor : foreground
|
|
border.width: root.outline && hasCursor ? Style.focusBorderWidth : 0
|
|
|
|
Behavior on color {
|
|
ColorAnimation { duration: 60 }
|
|
}
|
|
}
|