widgets: add an outline option

fixes #804
2026-01-29 07:52:50 -05:00 · 2025-11-24 00:14:19 -05:00
parent 5e77a10a81
commit 08c9bf570d
11 changed files with 577 additions and 66 deletions
--- a/quickshell/Modules/DankBar/Widgets/PrivacyIndicator.qml
+++ b/quickshell/Modules/DankBar/Widgets/PrivacyIndicator.qml
@@ -33,20 +33,63 @@ Item {
    opacity: hasActivePrivacy ? 1 : 0
    enabled: hasActivePrivacy

-    Rectangle {
+    Item {
        id: visualContent
        width: root.visualWidth
        height: root.visualHeight
        anchors.centerIn: parent
-        radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
-        color: {
-            if (barConfig?.noBackground ?? false) {
-                return "transparent";
-            }

-            const baseColor = privacyArea.containsMouse ? Theme.errorPressed : Theme.errorHover;
-            const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
-            return Theme.withAlpha(baseColor, transparency);
+        Rectangle {
+            id: outline
+            anchors.centerIn: parent
+            width: {
+                const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return parent.width + borderWidth * 2;
+            }
+            height: {
+                const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return parent.height + borderWidth * 2;
+            }
+            radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
+            color: "transparent"
+            border.width: {
+                if (barConfig?.widgetOutlineEnabled ?? false) {
+                    return barConfig?.widgetOutlineThickness ?? 1;
+                }
+                return 0;
+            }
+            border.color: {
+                if (!(barConfig?.widgetOutlineEnabled ?? false)) {
+                    return "transparent";
+                }
+                const colorOption = barConfig?.widgetOutlineColor || "primary";
+                const opacity = barConfig?.widgetOutlineOpacity ?? 1.0;
+                switch (colorOption) {
+                case "surfaceText":
+                    return Theme.withAlpha(Theme.surfaceText, opacity);
+                case "secondary":
+                    return Theme.withAlpha(Theme.secondary, opacity);
+                case "primary":
+                    return Theme.withAlpha(Theme.primary, opacity);
+                default:
+                    return Theme.withAlpha(Theme.primary, opacity);
+                }
+            }
+        }
+
+        Rectangle {
+            id: background
+            anchors.fill: parent
+            radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
+            color: {
+                if (barConfig?.noBackground ?? false) {
+                    return "transparent";
+                }
+
+                const baseColor = privacyArea.containsMouse ? Theme.errorPressed : Theme.errorHover;
+                const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
+                return Theme.withAlpha(baseColor, transparency);
+            }
        }

        Column {
--- a/quickshell/Modules/DankBar/Widgets/RunningApps.qml
+++ b/quickshell/Modules/DankBar/Widgets/RunningApps.qml
@@ -140,28 +140,71 @@ Item {
    height: windowCount > 0 ? (isVertical ? calculatedSize : barThickness) : 0
    visible: windowCount > 0

-    Rectangle {
+    Item {
        id: visualBackground
        width: root.isVertical ? root.widgetThickness : root.calculatedSize
        height: root.isVertical ? root.calculatedSize : root.widgetThickness
        anchors.centerIn: parent
-        radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
        clip: false
-        color: {
-            if (windowCount === 0) {
-                return "transparent";
-            }

-            if ((barConfig?.noBackground ?? false)) {
-                return "transparent";
+        Rectangle {
+            id: outline
+            anchors.centerIn: parent
+            width: {
+                const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return parent.width + borderWidth * 2;
            }
+            height: {
+                const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return parent.height + borderWidth * 2;
+            }
+            radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
+            color: "transparent"
+            border.width: {
+                if (barConfig?.widgetOutlineEnabled ?? false) {
+                    return barConfig?.widgetOutlineThickness ?? 1;
+                }
+                return 0;
+            }
+            border.color: {
+                if (!(barConfig?.widgetOutlineEnabled ?? false)) {
+                    return "transparent";
+                }
+                const colorOption = barConfig?.widgetOutlineColor || "primary";
+                const opacity = barConfig?.widgetOutlineOpacity ?? 1.0;
+                switch (colorOption) {
+                case "surfaceText":
+                    return Theme.withAlpha(Theme.surfaceText, opacity);
+                case "secondary":
+                    return Theme.withAlpha(Theme.secondary, opacity);
+                case "primary":
+                    return Theme.withAlpha(Theme.primary, opacity);
+                default:
+                    return Theme.withAlpha(Theme.primary, opacity);
+                }
+            }
+        }

-            const baseColor = Theme.widgetBaseBackgroundColor;
-            if (Theme.widgetBackgroundHasAlpha) {
-                return baseColor;
+        Rectangle {
+            id: background
+            anchors.fill: parent
+            radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
+            color: {
+                if (windowCount === 0) {
+                    return "transparent";
+                }
+
+                if ((barConfig?.noBackground ?? false)) {
+                    return "transparent";
+                }
+
+                const baseColor = Theme.widgetBaseBackgroundColor;
+                if (Theme.widgetBackgroundHasAlpha) {
+                    return baseColor;
+                }
+                const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
+                return Theme.withAlpha(baseColor, transparency);
            }
-            const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
-            return Theme.withAlpha(baseColor, transparency);
        }
    }

--- a/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
+++ b/quickshell/Modules/DankBar/Widgets/SystemTrayBar.qml
@@ -72,27 +72,70 @@ Item {
    property bool menuOpen: false
    property var currentTrayMenu: null

-    Rectangle {
+    Item {
        id: visualBackground
        width: root.visualWidth
        height: root.visualHeight
        anchors.centerIn: parent
-        radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
-        color: {
-            if (allTrayItems.length === 0) {
-                return "transparent";
-            }

-            if ((barConfig?.noBackground ?? false)) {
-                return "transparent";
+        Rectangle {
+            id: outline
+            anchors.centerIn: parent
+            width: {
+                const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return parent.width + borderWidth * 2;
            }
+            height: {
+                const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return parent.height + borderWidth * 2;
+            }
+            radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
+            color: "transparent"
+            border.width: {
+                if (barConfig?.widgetOutlineEnabled ?? false) {
+                    return barConfig?.widgetOutlineThickness ?? 1;
+                }
+                return 0;
+            }
+            border.color: {
+                if (!(barConfig?.widgetOutlineEnabled ?? false)) {
+                    return "transparent";
+                }
+                const colorOption = barConfig?.widgetOutlineColor || "primary";
+                const opacity = barConfig?.widgetOutlineOpacity ?? 1.0;
+                switch (colorOption) {
+                case "surfaceText":
+                    return Theme.withAlpha(Theme.surfaceText, opacity);
+                case "secondary":
+                    return Theme.withAlpha(Theme.secondary, opacity);
+                case "primary":
+                    return Theme.withAlpha(Theme.primary, opacity);
+                default:
+                    return Theme.withAlpha(Theme.primary, opacity);
+                }
+            }
+        }

-            const baseColor = Theme.widgetBaseBackgroundColor;
-            if (Theme.widgetBackgroundHasAlpha) {
-                return baseColor;
+        Rectangle {
+            id: background
+            anchors.fill: parent
+            radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
+            color: {
+                if (allTrayItems.length === 0) {
+                    return "transparent";
+                }
+
+                if ((barConfig?.noBackground ?? false)) {
+                    return "transparent";
+                }
+
+                const baseColor = Theme.widgetBaseBackgroundColor;
+                if (Theme.widgetBackgroundHasAlpha) {
+                    return baseColor;
+                }
+                const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
+                return Theme.withAlpha(baseColor, transparency);
            }
-            const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
-            return Theme.withAlpha(baseColor, transparency);
        }
    }

--- a/quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml
+++ b/quickshell/Modules/DankBar/Widgets/WorkspaceSwitcher.qml
@@ -1,5 +1,4 @@
 import QtQuick
-import QtQuick.Controls
 import Quickshell
 import Quickshell.Widgets
 import Quickshell.Hyprland
@@ -522,21 +521,64 @@ Item {
    height: shouldShow ? (isVertical ? visualHeight : barThickness) : 0
    visible: shouldShow

-    Rectangle {
+    Item {
        id: visualBackground
        width: root.visualWidth
        height: root.visualHeight
        anchors.centerIn: parent
-        radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
-        color: {
-            if ((barConfig?.noBackground ?? false))
-                return "transparent";
-            const baseColor = Theme.widgetBaseBackgroundColor;
-            if (Theme.widgetBackgroundHasAlpha) {
-                return baseColor;
+
+        Rectangle {
+            id: outline
+            anchors.centerIn: parent
+            width: {
+                const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return parent.width + borderWidth * 2;
+            }
+            height: {
+                const borderWidth = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return parent.height + borderWidth * 2;
+            }
+            radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
+            color: "transparent"
+            border.width: {
+                if (barConfig?.widgetOutlineEnabled ?? false) {
+                    return barConfig?.widgetOutlineThickness ?? 1;
+                }
+                return 0;
+            }
+            border.color: {
+                if (!(barConfig?.widgetOutlineEnabled ?? false)) {
+                    return "transparent";
+                }
+                const colorOption = barConfig?.widgetOutlineColor || "primary";
+                const opacity = barConfig?.widgetOutlineOpacity ?? 1.0;
+                switch (colorOption) {
+                case "surfaceText":
+                    return Theme.withAlpha(Theme.surfaceText, opacity);
+                case "secondary":
+                    return Theme.withAlpha(Theme.secondary, opacity);
+                case "primary":
+                    return Theme.withAlpha(Theme.primary, opacity);
+                default:
+                    return Theme.withAlpha(Theme.primary, opacity);
+                }
+            }
+        }
+
+        Rectangle {
+            id: background
+            anchors.fill: parent
+            radius: (barConfig?.noBackground ?? false) ? 0 : Theme.cornerRadius
+            color: {
+                if ((barConfig?.noBackground ?? false))
+                    return "transparent";
+                const baseColor = Theme.widgetBaseBackgroundColor;
+                if (Theme.widgetBackgroundHasAlpha) {
+                    return baseColor;
+                }
+                const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
+                return Theme.withAlpha(baseColor, transparency);
            }
-            const transparency = (root.barConfig && root.barConfig.widgetTransparency !== undefined) ? root.barConfig.widgetTransparency : 1.0;
-            return Theme.withAlpha(baseColor, transparency);
        }
    }