diff --git a/tailscalectl/TailscaleWidget.qml b/tailscalectl/TailscaleWidget.qml index e8058bc..37d8330 100644 --- a/tailscalectl/TailscaleWidget.qml +++ b/tailscalectl/TailscaleWidget.qml @@ -77,7 +77,7 @@ PluginComponent { PopoutComponent { id: popout headerText: "Tailscale" - detailsText: root.tailscaleIP ? root.tailscaleIP : "Not connected" + detailsText: root.isConnected ? "Connected" : "Disconnected" showCloseButton: true Column { @@ -90,32 +90,44 @@ PluginComponent { Row { width: parent.width spacing: Theme.spacingS - anchors.horizontalCenter: parent.horizontalCenter + anchors.left: parent.left + anchors.right: parent.right + anchors.leftMargin: Theme.spacingM + anchors.rightMargin: Theme.spacingM + + MouseArea { + cursorShape: Qt.PointingHandCursor + hoverEnabled: true + anchors.verticalCenter: parent.verticalCenter + width: toggleIcon.implicitWidth + height: toggleIcon.implicitHeight + onClicked: toggleTailscale() + + DankIcon { + id: toggleIcon + name: root.isConnected ? "power" : "power_off" + size: Theme.iconSize + color: Theme.primary + anchors.centerIn: parent + } + } StyledText { - text: root.isConnected ? "Connected" : "Disconnected" - font.pixelSize: Theme.fontSizeMedium - color: root.isConnected ? Theme.primary : Theme.surfaceVariantText + text: root.tailscaleIP || "—" + font.pixelSize: Theme.fontSizeSmall + color: Theme.primary anchors.verticalCenter: parent.verticalCenter } Item { width: 1; height: 1; Layout.fillWidth: true } StyledText { - text: "Toggle" + text: "Exit node: " + (root.currentExitNode || "None") font.pixelSize: Theme.fontSizeSmall - color: Theme.surfaceText + color: Theme.surfaceVariantText anchors.verticalCenter: parent.verticalCenter } } - - StyledText { - width: parent.width - text: "Exit node: " + (root.currentExitNode || "None") - font.pixelSize: Theme.fontSizeSmall - color: Theme.surfaceVariantText - horizontalAlignment: Text.AlignHCenter - } } } }