mirror of
https://github.com/arthur-pbty/arthur-os.git
synced 2026-08-02 04:37:49 +02:00
Ryan Hughes
b5f7ba02c2
The three components were three takes on the same shape \u2014 a clickable rectangle with text/icon, a hot/hover state, an optional persistent border, and an optional 'selected' or 'active' highlight. CursorPill was a 30-line PillButton wrapper that added a hovered() signal; ChoiceButton was effectively PillButton with selected: bool painting an accent fill+border. Collapse them into a single qs.Ui.Button. State flags compose independently: hasCursor / hover hot fill active persistent foreground-tint fill selected accent fill + accent border bordered: true persistent 1px idle border (form primaries) focusable: true Tab focus paints the accent ring pressed pressed fill The hovered(bool) signal is now built-in, so CursorPill's wrapper is unnecessary. ButtonGroup wraps a Row+Repeater for the form-style 'pick one of N' pattern; panel-cursor-driven cases still compose Buttons directly in a Row with per-instance hasCursor wiring. Theme tokens move into a new [style] section in shell.toml: border-width = 1 focus-border-width = 3 idle-border-alpha = 0.4 hot-fill-alpha = 0.08 selected-fill-alpha = 0.18 pressed-fill-alpha = 0.22 focus-fill-alpha = 0.22 Style.qml parses these out of the same shell.toml [font] / [bar] already reads, and exposes pre-computed Style.hotFill / selectedFill / pressedFill / idleBorderColor / selectedAccentFill / borderWidth + the existing focusBorder* tokens. Themes that don't ship a [style] section get the previous defaults unchanged. Dev gallery consolidates three sections (PillButton, CursorPill, ChoiceButton) into Button + ButtonGroup, with the cursor model sections renamed accordingly.
63 lines
2.0 KiB
QML
63 lines
2.0 KiB
QML
import QtQuick
|
|
import qs.Commons
|
|
|
|
// Mutually-exclusive row of Buttons — the form-style "pick one of N"
|
|
// pattern (bar position top/right/bottom/left, theme preset chips, etc.).
|
|
// Emits `changed(value)` when the user activates a different option.
|
|
//
|
|
// `options` is either a plain string[] (label == value) or an array of
|
|
// { value, label, icon?, tooltip? } objects. Mixing is fine.
|
|
//
|
|
// For panel-cursor-driven selection (where j/k walks a row), use bare
|
|
// `Button { hasCursor: ... }` instances in a Row — ButtonGroup is the
|
|
// convenience for non-cursor form contexts where you just need
|
|
// "selected: value === optionValue" wiring.
|
|
Row {
|
|
id: root
|
|
|
|
property var options: []
|
|
property string value: ""
|
|
property color foreground: Color.foreground
|
|
property color background: Color.background
|
|
property color accent: Color.accent
|
|
property string fontFamily: Style.font.family
|
|
property real fontSize: Style.font.body
|
|
property bool focusable: false
|
|
|
|
signal changed(string value)
|
|
|
|
spacing: 6
|
|
|
|
function optionValue(o) {
|
|
return (o && typeof o === "object") ? String(o.value) : String(o)
|
|
}
|
|
function optionLabel(o) {
|
|
return (o && typeof o === "object" && o.label !== undefined) ? String(o.label) : String(o)
|
|
}
|
|
function optionIcon(o) {
|
|
return (o && typeof o === "object" && o.icon) ? String(o.icon) : ""
|
|
}
|
|
function optionTooltip(o) {
|
|
return (o && typeof o === "object" && o.tooltip) ? String(o.tooltip) : ""
|
|
}
|
|
|
|
Repeater {
|
|
model: root.options
|
|
|
|
delegate: Button {
|
|
required property var modelData
|
|
text: root.optionLabel(modelData)
|
|
iconText: root.optionIcon(modelData)
|
|
tooltipText: root.optionTooltip(modelData)
|
|
selected: root.optionValue(modelData) === root.value
|
|
foreground: root.foreground
|
|
background: root.background
|
|
accent: root.accent
|
|
fontFamily: root.fontFamily
|
|
fontSize: root.fontSize
|
|
focusable: root.focusable
|
|
onClicked: root.changed(root.optionValue(modelData))
|
|
}
|
|
}
|
|
}
|