fix(tailscalectl): propagate left-click through MouseArea to open popout

Add propagateComposedEvents and left-button handling to both
horizontal and vertical MouseArea blocks. Left-click is forwarded
to PluginComponent (mouse.accepted = false) so it opens popoutContent.
Right-click still toggles Tailscale connection.

Closes #10
This commit is contained in:
John Morris 2026-05-15 19:28:37 -07:00
parent 8dd7562d35
commit 77430ec0d4

View file

@ -1,4 +1,5 @@
import QtQuick
import QtQuick.Layouts
import qs.Common
import qs.Services
import qs.Widgets
@ -12,6 +13,10 @@ PluginComponent {
property string tailscaleIP: ""
property string currentExitNode: ""
layerNamespacePlugin: "tailscalectl"
popoutWidth: 360
popoutHeight: 200
Timer {
interval: 5000
running: true
@ -68,13 +73,68 @@ PluginComponent {
toggleProcess.running = true
}
popoutContent: Component {
PopoutComponent {
id: popout
headerText: "Tailscale"
detailsText: root.tailscaleIP ? root.tailscaleIP : "Not connected"
showCloseButton: true
Column {
width: parent.width
height: parent.height - popout.headerHeight - popout.detailsHeight - Theme.spacingXL
anchors.top: parent.top
anchors.topMargin: Theme.spacingM
spacing: Theme.spacingM
Row {
width: parent.width
spacing: Theme.spacingS
anchors.horizontalCenter: parent.horizontalCenter
StyledText {
text: root.isConnected ? "Connected" : "Disconnected"
font.pixelSize: Theme.fontSizeMedium
color: root.isConnected ? Theme.primary : Theme.surfaceVariantText
anchors.verticalCenter: parent.verticalCenter
}
Item { width: 1; height: 1; Layout.fillWidth: true }
StyledText {
text: "Toggle"
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceText
anchors.verticalCenter: parent.verticalCenter
}
}
StyledText {
width: parent.width
text: "Exit node: " + (root.currentExitNode || "None")
font.pixelSize: Theme.fontSizeSmall
color: Theme.surfaceVariantText
horizontalAlignment: Text.AlignHCenter
}
}
}
}
horizontalBarPill: Component {
MouseArea {
implicitWidth: contentRow.implicitWidth
implicitHeight: contentRow.implicitHeight
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.RightButton
onClicked: toggleTailscale()
acceptedButtons: Qt.RightButton | Qt.LeftButton
propagateComposedEvents: true
onClicked: (mouse) => {
if (mouse.button === Qt.RightButton) {
toggleTailscale()
mouse.accepted = true
} else {
mouse.accepted = false
}
}
Row {
id: contentRow
@ -95,8 +155,16 @@ PluginComponent {
implicitWidth: contentColumn.implicitWidth
implicitHeight: contentColumn.implicitHeight
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.RightButton
onClicked: toggleTailscale()
acceptedButtons: Qt.RightButton | Qt.LeftButton
propagateComposedEvents: true
onClicked: (mouse) => {
if (mouse.button === Qt.RightButton) {
toggleTailscale()
mouse.accepted = true
} else {
mouse.accepted = false
}
}
Column {
id: contentColumn