Add outline cursor mode to CursorSurface for slider rows

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.
This commit is contained in:
Ryan Hughes
2026-05-18 12:19:23 -04:00
parent b5f7ba02c2
commit 8b858d4093
4 changed files with 28 additions and 16 deletions
+5 -9
View File
@@ -1121,18 +1121,14 @@ Item {
wrapMode: Text.WordWrap
}
Rectangle {
CursorSurface {
id: sliderWrapper
width: parent.width
implicitHeight: sliderRow.implicitHeight + 24
readonly property bool focused: root.focusSection === "slider"
color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.04)
radius: Style.cornerRadius
border.color: focused
? Style.focusBorderColor
: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.10)
border.width: focused ? Style.focusBorderWidth : 1
onFocusedChanged: if (focused) root.ensureCursorVisible(this)
outline: true
foreground: root.foreground
hasCursor: root.focusSection === "slider"
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
HoverHandler {
onHoveredChanged: if (hovered) {