Toggle panel heroes with a switch instead of the status icon (#6408)
* Add Tailscale header on/off toggle * Address Tailscale toggle review feedback * Hide Tailscale tooltip while busy * Keep Tailscale labels clear of header toggle * Extract the switch from Toggle into a reusable ToggleSwitch Toggle rendered its own track and knob inline, so anything else wanting a switch had to copy the geometry. Pull it into Ui/ToggleSwitch.qml and let Toggle compose it, and give PanelHero a trailingControl slot so a hero can pin a control to its trailing edge without the caller doing the layout. The switch draws its cursor as a ring outside the track: themes give normal chrome a stronger border than hover-cursor, which is right for controls that are borderless at rest but would make a bordered track go fainter under the cursor. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * Keep the panel cursor on the virtual header section clampCursor resets focusSection whenever it is not in visibleSections, but "header" is virtual and never appears there. Any refresh of the underlying model therefore threw the cursor off the hero toggle: muting republishes the PipeWire snapshot, and toggling the Bluetooth adapter empties and refills the device lists. moveCursor already special-cases "header"; clampCursor now does too. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * Toggle panel heroes with a switch instead of the status icon The hero icon doubled as the on/off control, which was invisible as an affordance and made the icon carry two jobs at once. Give Tailscale, Dropbox, Bluetooth, Audio, and Network a ToggleSwitch on the trailing edge of the hero and leave the icon to report status. The switch is the header's only cursor target, so the keyboard reaches it the same way the mouse does. Dropping the icon's focus ring also drops heroRingPad, which lets each hero line up with the rows beneath it. Network's link detail moves inline after the name -- "Ethernet (2.5gbit)" -- since the pill crowded the switch. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * Make the network hero switch honestly a Wi-Fi switch The switch reads and writes Networking.wifiEnabled, but its tooltip claimed to turn "network" on and off whenever Ethernet was the active connection. A click asserted nothing; a switch asserts state, so on a wired machine with the radio off it sat there reading "off" beside a perfectly live Ethernet connection. Say Wi-Fi, and only offer the switch when there is a radio to switch. headerActionCount follows the same condition so the keyboard cannot reach a control that is not there. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * Stop the header cursor claiming an absent switch The switch hides when the thing it toggles is unavailable -- no Tailscale CLI, no Dropbox CLI, no Wi-Fi radio -- but "header" stayed reachable, so the cursor could sit on a target that never rendered. The old clickable icon was always on screen, so there was always something to highlight. "header" stays navigable and Enter still no-ops safely; the cursor just stops claiming a spot that is not there. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * Wrap the gallery's switch caption The caption sat unbounded inside the switch row. The gallery has a 560px minimum width, horizontal scrolling off, and clipping on, so at that size the end of the line was simply unreachable. Move it below the row and wrap it, the way every other description in the gallery already does. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> --------- Co-authored-by: David Heinemeier Hansson <david@hey.com> Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Tobias Lütke
co-authored by
Claude Opus 5
David Heinemeier Hansson
Claude Opus 5
David Heinemeier Hansson
parent
1d38842c3e
commit
4cfb2c2fae
+15
-1
@@ -14,10 +14,16 @@ Item {
|
||||
property real iconOpacity: 1.0
|
||||
property alias metaOpacity: metaText.opacity
|
||||
|
||||
// Optional control pinned to the trailing edge of the hero — a ToggleSwitch,
|
||||
// a small button. The hero centers it against the labels and reserves the
|
||||
// space itself, so callers never do the geometry.
|
||||
property Component trailingControl: null
|
||||
|
||||
readonly property color dim: Qt.darker(foreground, 1.4)
|
||||
readonly property real trailingInset: trailingLoader.item && trailingLoader.item.visible ? trailingLoader.width + Style.space(12) : 0
|
||||
|
||||
width: parent ? parent.width : implicitWidth
|
||||
implicitHeight: Math.max(iconLoader.implicitHeight, heroLabels.implicitHeight)
|
||||
implicitHeight: Math.max(iconLoader.implicitHeight, heroLabels.implicitHeight, trailingLoader.implicitHeight)
|
||||
|
||||
Loader {
|
||||
id: iconLoader
|
||||
@@ -32,6 +38,7 @@ Item {
|
||||
anchors.left: iconLoader.right
|
||||
anchors.leftMargin: Style.space(14)
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: root.trailingInset
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: Style.space(2)
|
||||
|
||||
@@ -91,4 +98,11 @@ Item {
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: trailingLoader
|
||||
sourceComponent: root.trailingControl
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
+14
-36
@@ -1,17 +1,17 @@
|
||||
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).
|
||||
// Labeled toggle row: title + optional description on the left, a
|
||||
// `ToggleSwitch` 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 / mouse
|
||||
// hover and activeFocus share the hover-cursor defaults.
|
||||
//
|
||||
// `rounded` auto-detects from Style.cornerRadius so the switch follows
|
||||
// the theme: pill shape when Hyprland corners are rounded, square on sharp.
|
||||
// Callers can override per-instance.
|
||||
// `rounded` is forwarded to the switch, which auto-detects from
|
||||
// Style.cornerRadius: pill shape when Hyprland corners are rounded, square on
|
||||
// sharp. Callers can override per-instance.
|
||||
BorderSurface {
|
||||
id: root
|
||||
|
||||
@@ -42,11 +42,6 @@ BorderSurface {
|
||||
Keys.onEnterPressed: root.clicked()
|
||||
Keys.onSpacePressed: root.clicked()
|
||||
|
||||
readonly property int trackHeight: Math.max(22, Math.round(Style.spacing.controlHeight * 0.55))
|
||||
readonly property int trackWidth: Math.max(42, Math.round(trackHeight * 1.9))
|
||||
readonly property int knobSize: Math.max(16, Math.round(trackHeight * 0.72))
|
||||
readonly property int knobInset: Math.max(2, Math.round((trackHeight - knobSize) / 2))
|
||||
|
||||
implicitHeight: Math.max(54, content.implicitHeight + Style.spacing.huge)
|
||||
implicitWidth: Style.space(240)
|
||||
radius: Style.cornerRadius
|
||||
@@ -94,32 +89,15 @@ BorderSurface {
|
||||
}
|
||||
}
|
||||
|
||||
BorderSurface {
|
||||
// The row owns the click, so the switch is presentation only here.
|
||||
ToggleSwitch {
|
||||
id: track
|
||||
width: root.trackWidth
|
||||
height: root.trackHeight
|
||||
radius: root.rounded ? height / 2 : 0
|
||||
color: root.checked
|
||||
? Style.selectedFillFor(root.foreground, root.accent)
|
||||
: Style.normalFillFor(root.foreground, root.accent)
|
||||
borderSpec: root.checked
|
||||
? Border.controlSpec("selected", root.foreground, root.accent)
|
||||
: Border.controlSpec("normal", root.foreground, root.accent)
|
||||
checked: root.checked
|
||||
rounded: root.rounded
|
||||
foreground: root.foreground
|
||||
accent: root.accent
|
||||
interactive: false
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
|
||||
Rectangle {
|
||||
width: root.knobSize
|
||||
height: root.knobSize
|
||||
radius: root.rounded ? height / 2 : 0
|
||||
x: root.checked ? track.width - width - root.knobInset : root.knobInset
|
||||
y: root.knobInset
|
||||
color: root.checked ? Style.selectedStateColor(root.foreground, root.accent) : Qt.darker(root.foreground, 1.25)
|
||||
|
||||
Behavior on x { NumberAnimation { duration: 120; easing.type: Easing.OutCubic } }
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import QtQuick
|
||||
import qs.Commons
|
||||
|
||||
// Bare on/off switch: a track with a sliding knob and no label. This is the
|
||||
// switch `Toggle` parks at the end of its labeled row, factored out so panel
|
||||
// headers and other compact controls render the identical thing.
|
||||
//
|
||||
// The caller owns the value: bind `checked` to real state and flip it in
|
||||
// response to `toggled()`. Services that already track a desired state
|
||||
// optimistically (see the Tailscale service's `_desired`) get an instant knob
|
||||
// throw for free, because `checked` is already the optimistic value.
|
||||
//
|
||||
// `busy` marks an operation in flight and swallows further clicks, but leaves
|
||||
// hover, cursor, and tooltips alone so the control does not flicker every time
|
||||
// a background refresh runs.
|
||||
//
|
||||
// The cursor is a ring drawn outside the track rather than a state on the
|
||||
// track itself: themes give normal chrome a stronger border than hover-cursor
|
||||
// (0.4 vs 0.25 by default), which is right for controls that are borderless at
|
||||
// rest but would make a bordered track go *fainter* under the cursor. On the
|
||||
// panel background the ring reads immediately. `cursorRing` follows
|
||||
// `interactive` — a switch whose surrounding row owns the click owns the
|
||||
// cursor too.
|
||||
//
|
||||
// `rounded` auto-detects from Style.cornerRadius so the switch follows the
|
||||
// theme: pill shape when Hyprland corners are rounded, square on sharp.
|
||||
Item {
|
||||
id: root
|
||||
|
||||
property bool checked: false
|
||||
property bool busy: false
|
||||
|
||||
// Off when the surrounding row owns the click, as in `Toggle`.
|
||||
property bool interactive: true
|
||||
|
||||
// Panel-cursor flag. Same role as Button.hasCursor: panels with their own
|
||||
// keyboard cursor bind this to drive the highlight separately from hover.
|
||||
property bool hasCursor: false
|
||||
|
||||
property bool cursorRing: interactive
|
||||
property int cursorPad: Style.space(6)
|
||||
property bool rounded: Style.cornerRadius > 0
|
||||
property color foreground: Color.foreground
|
||||
property color accent: Color.accent
|
||||
|
||||
signal toggled()
|
||||
signal hovered(bool isHovered)
|
||||
|
||||
readonly property alias containsMouse: mouse.containsMouse
|
||||
readonly property bool hot: hasCursor || mouse.containsMouse
|
||||
readonly property int trackHeight: Math.max(22, Math.round(Style.spacing.controlHeight * 0.55))
|
||||
readonly property int trackWidth: Math.max(42, Math.round(trackHeight * 1.9))
|
||||
readonly property int knobSize: Math.max(16, Math.round(trackHeight * 0.72))
|
||||
readonly property int knobInset: Math.max(2, Math.round((trackHeight - knobSize) / 2))
|
||||
|
||||
readonly property int _pad: cursorRing ? cursorPad : 0
|
||||
|
||||
implicitWidth: trackWidth + _pad * 2
|
||||
implicitHeight: trackHeight + _pad * 2
|
||||
|
||||
BorderSurface {
|
||||
anchors.fill: parent
|
||||
visible: root.cursorRing && root.hot
|
||||
color: "transparent"
|
||||
radius: Style.cornerRadius
|
||||
borderSpec: Border.controlSpec("hover-cursor", root.foreground, root.accent)
|
||||
}
|
||||
|
||||
BorderSurface {
|
||||
id: track
|
||||
width: root.trackWidth
|
||||
height: root.trackHeight
|
||||
anchors.centerIn: parent
|
||||
radius: root.rounded ? height / 2 : 0
|
||||
color: root.checked
|
||||
? Style.selectedFillFor(root.foreground, root.accent)
|
||||
: Style.normalFillFor(root.foreground, root.accent)
|
||||
borderSpec: Border.controlSpec(root.checked ? "selected" : "normal", root.foreground, root.accent)
|
||||
|
||||
Behavior on color { ColorAnimation { duration: 120 } }
|
||||
|
||||
Rectangle {
|
||||
width: root.knobSize
|
||||
height: root.knobSize
|
||||
radius: root.rounded ? height / 2 : 0
|
||||
x: root.checked ? track.width - width - root.knobInset : root.knobInset
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: root.checked ? Style.selectedStateColor(root.foreground, 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
|
||||
enabled: root.interactive
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onContainsMouseChanged: root.hovered(containsMouse)
|
||||
onClicked: if (!root.busy) root.toggled()
|
||||
}
|
||||
}
|
||||
@@ -28,4 +28,5 @@ PopupCard 1.0 PopupCard.qml
|
||||
SearchableDropdown 1.0 SearchableDropdown.qml
|
||||
TextField 1.0 TextField.qml
|
||||
Toggle 1.0 Toggle.qml
|
||||
ToggleSwitch 1.0 ToggleSwitch.qml
|
||||
WidgetButton 1.0 WidgetButton.qml
|
||||
|
||||
Reference in New Issue
Block a user