Make Button state composition visible in ButtonGroup and the gallery
Three small fixes around the new Button + ButtonGroup so the cursor is
always visible and the section reads as a single Button showing flag
combinations.
ButtonGroup now exposes cursorIndex + hovered(index, isHovered) so
panels can drive a single Button's hasCursor without reaching past
ButtonGroup's API. Every chip gets bordered: true so the row reads as
a real picker — distinct outlines, not just a tinted fill that vanishes
into the background.
Button's border treatment grows two paths so the cursor is always
visible regardless of other state: bordered + hot recolors the border
to the accent and thickens to the focus-ring width, and selected + hot
thickens the existing accent border to the focus-ring width (so the
cursor landing on the chosen option still reads as cursor presence,
instead of disappearing into the selected fill).
Gallery's Button section pairs each demo button with a small caption
('idle', 'active', 'icon only', 'icon + active', 'bordered +
focusable') so the row reads as one Button with its state flags side
by side rather than five unrelated buttons. The ButtonGroup section
gets the cursor wiring (cursorIndex + onHovered) plus an
onFocusedChanged auto-scroll so the cursor visual is reachable via
j/k h/l from the panel cursor model.
This commit is contained in:
Ryan Hughes
@@ -833,62 +833,121 @@ Item {
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.leftMargin: 14
|
||||
spacing: 6
|
||||
spacing: 16
|
||||
|
||||
Button {
|
||||
text: "DHCP"
|
||||
tooltipText: "Use DNS from DHCP"
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 0
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 0 }
|
||||
// Each demo Button is paired with a caption labeling the
|
||||
// state(s) it exercises so the section reads as one Button
|
||||
// showing its flag combinations side by side.
|
||||
|
||||
Column {
|
||||
spacing: 6
|
||||
Button {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "DHCP"
|
||||
tooltipText: "Use DNS from DHCP"
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 0
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 0 }
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
Text {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "idle"
|
||||
color: Qt.darker(root.foreground, 1.5)
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Cloudflare"
|
||||
tooltipText: "Set DNS to Cloudflare"
|
||||
active: true
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 1
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 1 }
|
||||
Column {
|
||||
spacing: 6
|
||||
Button {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Cloudflare"
|
||||
tooltipText: "Set DNS to Cloudflare"
|
||||
active: true
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 1
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 1 }
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
Text {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "active"
|
||||
color: Qt.darker(root.foreground, 1.5)
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
|
||||
Button {
|
||||
iconText: ""
|
||||
tooltipText: "Refresh"
|
||||
horizontalPadding: 8
|
||||
verticalPadding: 4
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 2
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 2 }
|
||||
Column {
|
||||
spacing: 6
|
||||
Button {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
iconText: ""
|
||||
tooltipText: "Refresh"
|
||||
horizontalPadding: 8
|
||||
verticalPadding: 4
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 2
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 2 }
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
Text {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "icon only"
|
||||
color: Qt.darker(root.foreground, 1.5)
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
|
||||
Button {
|
||||
iconText: ""
|
||||
text: "On"
|
||||
tooltipText: "Turn Bluetooth off"
|
||||
active: true
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 3
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 3 }
|
||||
Column {
|
||||
spacing: 6
|
||||
Button {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
iconText: ""
|
||||
text: "On"
|
||||
tooltipText: "Turn Bluetooth off"
|
||||
active: true
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 3
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 3 }
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
Text {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "icon + active"
|
||||
color: Qt.darker(root.foreground, 1.5)
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Apply"
|
||||
focusable: true
|
||||
bordered: true
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 4
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 4 }
|
||||
Column {
|
||||
spacing: 6
|
||||
Button {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Apply"
|
||||
focusable: true
|
||||
bordered: true
|
||||
hasCursor: root.focusSection === "button" && root.selectedIndex === 4
|
||||
onHovered: function(h) {
|
||||
if (h) { root.focusSection = "button"; root.selectedIndex = 4 }
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
Text {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "bordered + focusable"
|
||||
color: Qt.darker(root.foreground, 1.5)
|
||||
font.family: root.fontFamily
|
||||
font.pixelSize: Style.font.caption
|
||||
}
|
||||
onHasCursorChanged: if (hasCursor) root.ensureCursorVisible(this)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -896,8 +955,11 @@ Item {
|
||||
|
||||
// ---- ButtonGroup -------------------------------------------------
|
||||
Column {
|
||||
id: buttonGroupSection
|
||||
width: parent.width
|
||||
spacing: 8
|
||||
readonly property bool focused: root.focusSection === "button-group"
|
||||
onFocusedChanged: if (focused) root.ensureCursorVisible(this)
|
||||
|
||||
Text {
|
||||
text: "ButtonGroup"
|
||||
@@ -930,10 +992,17 @@ Item {
|
||||
anchors.leftMargin: 14
|
||||
options: ["top", "right", "bottom", "left"]
|
||||
value: root.choiceDemoValue
|
||||
cursorIndex: root.focusSection === "button-group" ? root.selectedIndex : -1
|
||||
onChanged: function(v) {
|
||||
root.focusSection = "button-group"
|
||||
root.choiceDemoValue = v
|
||||
}
|
||||
onHovered: function(index, isHovered) {
|
||||
if (isHovered) {
|
||||
root.focusSection = "button-group"
|
||||
root.selectedIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user