widgets: add an outline option

fixes #804
2026-04-03 20:32:07 -04: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/CenterSection.qml
+++ b/quickshell/Modules/DankBar/CenterSection.qml
@@ -19,7 +19,11 @@ Item {
    property bool forceVerticalLayout: false

    readonly property bool isVertical: overrideAxisLayout ? forceVerticalLayout : (axis?.isVertical ?? false)
-    readonly property real spacing: noBackground ? 2 : Theme.spacingXS
+    readonly property real spacing: {
+        const baseSpacing = noBackground ? 2 : Theme.spacingXS;
+        const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+        return baseSpacing + (outlineThickness * 2);
+    }

    property var centerWidgets: []
    property int totalWidgets: 0
--- a/quickshell/Modules/DankBar/LeftSection.qml
+++ b/quickshell/Modules/DankBar/LeftSection.qml
@@ -30,7 +30,11 @@ Item {
    Component {
        id: rowComp
        Row {
-            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            readonly property real widgetSpacing: {
+                const baseSpacing = noBackground ? 2 : Theme.spacingXS;
+                const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return baseSpacing + (outlineThickness * 2);
+            }
            spacing: widgetSpacing
            Repeater {
                id: rowRepeater
@@ -70,7 +74,11 @@ Item {
        id: columnComp
        Column {
            width: parent.width
-            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            readonly property real widgetSpacing: {
+                const baseSpacing = noBackground ? 2 : Theme.spacingXS;
+                const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return baseSpacing + (outlineThickness * 2);
+            }
            spacing: widgetSpacing
            Repeater {
                id: columnRepeater
@@ -105,4 +113,4 @@ Item {
            }
        }
    }
-}
+}
--- a/quickshell/Modules/DankBar/RightSection.qml
+++ b/quickshell/Modules/DankBar/RightSection.qml
@@ -31,7 +31,11 @@ Item {
    Component {
        id: rowComp
        Row {
-            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            readonly property real widgetSpacing: {
+                const baseSpacing = noBackground ? 2 : Theme.spacingXS;
+                const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return baseSpacing + (outlineThickness * 2);
+            }
            spacing: widgetSpacing
            anchors.right: parent ? parent.right : undefined
            Repeater {
@@ -72,7 +76,11 @@ Item {
        id: columnComp
        Column {
            width: parent.width
-            readonly property real widgetSpacing: noBackground ? 2 : Theme.spacingXS
+            readonly property real widgetSpacing: {
+                const baseSpacing = noBackground ? 2 : Theme.spacingXS;
+                const outlineThickness = (barConfig?.widgetOutlineEnabled ?? false) ? (barConfig?.widgetOutlineThickness ?? 1) : 0;
+                return baseSpacing + (outlineThickness * 2);
+            }
            spacing: widgetSpacing
            Repeater {
                id: columnRepeater
@@ -107,4 +115,4 @@ Item {
            }
        }
    }
-}
+}
--- 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);
        }
    }