dankbar/vpn: right click to quick connect

2026-01-24 13:32:50 -05:00 · 2025-12-17 14:16:11 -05:00
parent 53553c1f62
commit 7e141c6b36
3 changed files with 72 additions and 62 deletions
--- a/CHANGELOG.MD
+++ b/CHANGELOG.MD
@@ -9,3 +9,7 @@ This file is more of a quick reference so I know what to account for before next
 - Add monitor configurator (niri, Hyprland, MangoWC)
 - **BREAKING** ghostty theme changed to ~/.config/ghostty/themes/danktheme
  - requires intervention and doc update
+- Added desktop widget plugins
+  - dev guidance available
+  - builtin clock & dgop widgets
+- Initial RTL support/i18n
--- a/quickshell/Modules/ControlCenter/Components/DragDropDetailHost.qml
+++ b/quickshell/Modules/ControlCenter/Components/DragDropDetailHost.qml
@@ -13,30 +13,30 @@ Item {

    readonly property bool active: expandedSection !== ""

-    Behavior on height {
-        NumberAnimation {
-            duration: Theme.mediumDuration
-            easing.type: Easing.OutCubic
-        }
-    }
-
    Loader {
        anchors.fill: parent
        anchors.topMargin: Theme.spacingS
        sourceComponent: {
-            if (!root.active) return null
+            if (!root.active)
+                return null;

            if (expandedSection.startsWith("diskUsage_")) {
-                return diskUsageDetailComponent
+                return diskUsageDetailComponent;
            }

            switch (expandedSection) {
-                case "wifi": return networkDetailComponent
-                case "bluetooth": return bluetoothDetailComponent
-                case "audioOutput": return audioOutputDetailComponent
-                case "audioInput": return audioInputDetailComponent
-                case "battery": return batteryDetailComponent
-                default: return null
+            case "wifi":
+                return networkDetailComponent;
+            case "bluetooth":
+                return bluetoothDetailComponent;
+            case "audioOutput":
+                return audioOutputDetailComponent;
+            case "audioInput":
+                return audioInputDetailComponent;
+            case "battery":
+                return batteryDetailComponent;
+            default:
+                return null;
            }
        }
    }
@@ -72,18 +72,18 @@ Item {
            currentMountPath: root.expandedWidgetData?.mountPath || "/"
            instanceId: root.expandedWidgetData?.instanceId || ""

-            onMountPathChanged: (newMountPath) => {
+            onMountPathChanged: newMountPath => {
                if (root.expandedWidgetData && root.expandedWidgetData.id === "diskUsage") {
-                    const widgets = SettingsData.controlCenterWidgets || []
+                    const widgets = SettingsData.controlCenterWidgets || [];
                    const newWidgets = widgets.map(w => {
                        if (w.id === "diskUsage" && w.instanceId === root.expandedWidgetData.instanceId) {
-                            const updatedWidget = Object.assign({}, w)
-                            updatedWidget.mountPath = newMountPath
-                            return updatedWidget
+                            const updatedWidget = Object.assign({}, w);
+                            updatedWidget.mountPath = newMountPath;
+                            return updatedWidget;
                        }
-                        return w
-                    })
-                    SettingsData.set("controlCenterWidgets", newWidgets)
+                        return w;
+                    });
+                    SettingsData.set("controlCenterWidgets", newWidgets);
                }
            }
        }
--- a/quickshell/Modules/DankBar/Widgets/Vpn.qml
+++ b/quickshell/Modules/DankBar/Widgets/Vpn.qml
@@ -1,5 +1,4 @@
 import QtQuick
-import Quickshell
 import qs.Common
 import qs.Modules.Plugins
 import qs.Services
@@ -20,21 +19,21 @@ BasePill {

    readonly property real minTooltipY: {
        if (!parentScreen || !isVerticalOrientation) {
-            return 0
+            return 0;
        }

        if (isAutoHideBar) {
-            return 0
+            return 0;
        }

        if (parentScreen.y > 0) {
-            return barThickness + barSpacing
+            return barThickness + barSpacing;
        }

-        return 0
+        return 0;
    }

-    signal toggleVpnPopup()
+    signal toggleVpnPopup

    content: Component {
        Item {
@@ -72,56 +71,63 @@ BasePill {
        anchors.fill: parent
        hoverEnabled: true
        cursorShape: DMSNetworkService.isBusy ? Qt.BusyCursor : Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
        enabled: !DMSNetworkService.isBusy
-        onPressed: {
-            root.toggleVpnPopup()
+        onPressed: event => {
+            switch (event.button) {
+            case Qt.RightButton:
+                DMSNetworkService.toggleVpn();
+                return;
+            case Qt.LeftButton:
+                root.toggleVpnPopup();
+                return;
+            }
        }
        onEntered: {
-            if (!root.parentScreen || (popoutTarget?.shouldBeVisible)) return
-
-            tooltipLoader.active = true
-            if (!tooltipLoader.item) return
-
-            let tooltipText = ""
+            if (!root.parentScreen || (popoutTarget?.shouldBeVisible))
+                return;
+            tooltipLoader.active = true;
+            if (!tooltipLoader.item)
+                return;
+            let tooltipText = "";
            if (!DMSNetworkService.connected) {
-                tooltipText = "VPN Disconnected"
+                tooltipText = "VPN Disconnected";
            } else {
-                const names = DMSNetworkService.activeNames || []
+                const names = DMSNetworkService.activeNames || [];
                if (names.length <= 1) {
-                    const name = names[0] || ""
-                    const maxLength = 25
-                    const displayName = name.length > maxLength ? name.substring(0, maxLength) + "..." : name
-                    tooltipText = "VPN Connected • " + displayName
+                    const name = names[0] || "";
+                    const maxLength = 25;
+                    const displayName = name.length > maxLength ? name.substring(0, maxLength) + "..." : name;
+                    tooltipText = "VPN Connected • " + displayName;
                } else {
-                    const name = names[0]
-                    const maxLength = 20
-                    const displayName = name.length > maxLength ? name.substring(0, maxLength) + "..." : name
-                    tooltipText = "VPN Connected • " + displayName + " +" + (names.length - 1)
+                    const name = names[0];
+                    const maxLength = 20;
+                    const displayName = name.length > maxLength ? name.substring(0, maxLength) + "..." : name;
+                    tooltipText = "VPN Connected • " + displayName + " +" + (names.length - 1);
                }
            }

            if (root.isVerticalOrientation) {
-                const globalPos = mapToGlobal(width / 2, height / 2)
-                const currentScreen = root.parentScreen || Screen
-                const screenX = currentScreen ? currentScreen.x : 0
-                const screenY = currentScreen ? currentScreen.y : 0
-                const relativeY = globalPos.y - screenY
-                const adjustedY = relativeY + root.minTooltipY
-                const tooltipX = root.axis?.edge === "left" ? (root.barThickness + root.barSpacing + Theme.spacingXS) : (currentScreen.width - root.barThickness - root.barSpacing - Theme.spacingXS)
-                const isLeft = root.axis?.edge === "left"
-                tooltipLoader.item.show(tooltipText, screenX + tooltipX, adjustedY, currentScreen, isLeft, !isLeft)
+                const globalPos = mapToGlobal(width / 2, height / 2);
+                const currentScreen = root.parentScreen || Screen;
+                const screenX = currentScreen ? currentScreen.x : 0;
+                const screenY = currentScreen ? currentScreen.y : 0;
+                const relativeY = globalPos.y - screenY;
+                const adjustedY = relativeY + root.minTooltipY;
+                const tooltipX = root.axis?.edge === "left" ? (root.barThickness + root.barSpacing + Theme.spacingXS) : (currentScreen.width - root.barThickness - root.barSpacing - Theme.spacingXS);
+                const isLeft = root.axis?.edge === "left";
+                tooltipLoader.item.show(tooltipText, screenX + tooltipX, adjustedY, currentScreen, isLeft, !isLeft);
            } else {
-                const globalPos = mapToGlobal(width / 2, height)
-                const tooltipY = root.barThickness + root.barSpacing + Theme.spacingXS
-                tooltipLoader.item.show(tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false)
+                const globalPos = mapToGlobal(width / 2, height);
+                const tooltipY = root.barThickness + root.barSpacing + Theme.spacingXS;
+                tooltipLoader.item.show(tooltipText, globalPos.x, tooltipY, root.parentScreen, false, false);
            }
        }
        onExited: {
            if (tooltipLoader.item) {
-                tooltipLoader.item.hide()
+                tooltipLoader.item.hide();
            }
-            tooltipLoader.active = false
+            tooltipLoader.active = false;
        }
    }
 }