Ryan Hughes
42dee4d399
CursorSurface defines the canonical cursor chrome: a tinted fill, no
border. Three components had inconsistent treatments that the recent
standardization pass left half-finished:
- PillButton kept a 1px foreground border on hot (cursor or hover)
via a cursorBordered: true default.
- CursorPill specifically had to override cursorBordered: false to
match the rest of the kit.
- ChoiceButton thickened its border to 2px on hasCursor, which mixed
the cursor visual with the Tab-focus visual.
Drop the cursorBordered escape hatch from PillButton (no caller other
than CursorPill ever used it), drop CursorPill's now-redundant
override, and remove hasCursor from ChoiceButton's border.width
thickening. Update Toggle's class comment (it still claimed cursor
mirrored Tab focus, which f3ba5055 broke without updating the doc).
Now: hot/hasCursor = fill only, activeFocus = accent border ring,
selected/active = stronger fill or accent border per component
semantic. One canonical pattern across the kit.
139 lines
4.3 KiB
QML
139 lines
4.3 KiB
QML
import QtQuick
|
|
import qs.Commons
|
|
|
|
// Labeled toggle row: title + optional description on the left, a switch
|
|
// on the right. Clicking anywhere on the row emits `clicked()`; consumers
|
|
// flip `checked` in response (the component is stateless about the actual
|
|
// value so it composes cleanly with model-driven UI).
|
|
//
|
|
// Cursor and focus styling match the rest of the kit: hasCursor (panel
|
|
// keyboard cursor / mouse hover) is a fill only, mirroring CursorSurface;
|
|
// activeFocus (Tab focus) adds the accent border ring on top via the
|
|
// shared Style tokens.
|
|
//
|
|
// `rounded` auto-detects from Style.cornerRadius so the switch follows
|
|
// the theme: pill shape on round-corners themes, square on sharp.
|
|
// Callers can override per-instance.
|
|
Rectangle {
|
|
id: root
|
|
|
|
property string label: ""
|
|
property string description: ""
|
|
property bool checked: false
|
|
|
|
// Panel-cursor flag. Same role as PillButton.hasCursor / ChoiceButton.hasCursor:
|
|
// panels with their own keyboard cursor bind this to drive the highlight
|
|
// separately from activeFocus. Renders as a tinted fill only — the accent
|
|
// border ring is reserved for Tab focus (activeFocus).
|
|
property bool hasCursor: false
|
|
|
|
// Switch shape follows the theme by default: pill on round, square on sharp.
|
|
// Override per-instance if a caller wants the opposite.
|
|
property bool rounded: Style.cornerRadius > 0
|
|
|
|
property color foreground: Color.foreground
|
|
property color accent: Color.accent
|
|
property string fontFamily: Style.font.family
|
|
property real titleSize: Style.font.subtitle
|
|
property real descriptionSize: Style.font.caption
|
|
|
|
signal clicked()
|
|
signal hovered(bool isHovered)
|
|
|
|
activeFocusOnTab: true
|
|
Keys.onReturnPressed: root.clicked()
|
|
Keys.onEnterPressed: root.clicked()
|
|
Keys.onSpacePressed: root.clicked()
|
|
|
|
implicitHeight: Math.max(54, content.implicitHeight + 18)
|
|
implicitWidth: 240
|
|
radius: Style.cornerRadius
|
|
|
|
color: activeFocus
|
|
? Style.focusFillColor
|
|
: ((hasCursor || mouse.containsMouse) ? Qt.rgba(foreground.r, foreground.g, foreground.b, 0.08) : Qt.rgba(foreground.r, foreground.g, foreground.b, 0.03))
|
|
border.color: activeFocus
|
|
? Style.focusBorderColor
|
|
: Qt.rgba(foreground.r, foreground.g, foreground.b, 0.12)
|
|
border.width: activeFocus ? Style.focusBorderWidth : 1
|
|
|
|
Behavior on color { ColorAnimation { duration: 100 } }
|
|
|
|
Row {
|
|
id: content
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
anchors.leftMargin: 12
|
|
anchors.rightMargin: 12
|
|
spacing: 12
|
|
|
|
Column {
|
|
width: parent.width - track.width - parent.spacing
|
|
spacing: 3
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
Text {
|
|
text: root.label
|
|
color: root.foreground
|
|
font.family: root.fontFamily
|
|
font.pixelSize: root.titleSize
|
|
font.bold: true
|
|
elide: Text.ElideRight
|
|
width: parent.width
|
|
}
|
|
|
|
Text {
|
|
visible: root.description !== ""
|
|
text: root.description
|
|
color: Qt.darker(root.foreground, 1.5)
|
|
font.family: root.fontFamily
|
|
font.pixelSize: root.descriptionSize
|
|
wrapMode: Text.WordWrap
|
|
width: parent.width
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
id: track
|
|
width: 42
|
|
height: 22
|
|
radius: root.rounded ? height / 2 : 0
|
|
color: root.checked
|
|
? Qt.rgba(root.accent.r, root.accent.g, root.accent.b, 0.35)
|
|
: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.12)
|
|
border.color: root.checked
|
|
? root.accent
|
|
: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.28)
|
|
border.width: 1
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
|
|
Behavior on color { ColorAnimation { duration: 120 } }
|
|
|
|
Rectangle {
|
|
width: 16
|
|
height: 16
|
|
radius: root.rounded ? 8 : 0
|
|
x: root.checked ? track.width - width - 3 : 3
|
|
y: 3
|
|
color: root.checked ? root.accent : Qt.darker(root.foreground, 1.25)
|
|
|
|
Behavior on x { NumberAnimation { duration: 120; easing.type: Easing.OutCubic } }
|
|
Behavior on color { ColorAnimation { duration: 120 } }
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: mouse
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: root.clicked()
|
|
}
|
|
|
|
HoverHandler {
|
|
onHoveredChanged: root.hovered(hovered)
|
|
}
|
|
}
|