diff --git a/tailscalectl/TailscaleWidget.qml b/tailscalectl/TailscaleWidget.qml index 6b3b95c..e8058bc 100644 --- a/tailscalectl/TailscaleWidget.qml +++ b/tailscalectl/TailscaleWidget.qml @@ -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