dankbar: enhance widget click targets

- Fitt's law stuff, whole height on horiz, whole width in vertical - Probably missed stuff or breaks stuff, pretty big refactor
2025-12-08 06:25:37 -05:00 · 2025-10-22 00:12:41 -04:00
parent 8ab25ef8e4
commit 951136bc4c
28 changed files with 2507 additions and 2923 deletions
--- a/Modules/DankBar/Widgets/LauncherButton.qml
+++ b/Modules/DankBar/Widgets/LauncherButton.qml
@@ -3,127 +3,95 @@ import QtQuick.Effects
 import Quickshell
 import Quickshell.Widgets
 import qs.Common
+import qs.Modules.Plugins
 import qs.Services
 import qs.Widgets

-Item {
+BasePill {
    id: root

    property bool isActive: false
-    property bool isVertical: axis?.isVertical ?? false
-    property var axis: null
-    property string section: "left"
-    property var popupTarget: null
-    property var parentScreen: null
-    property real widgetThickness: 30
-    property real barThickness: 48
    property var hyprlandOverviewLoader: null
-    readonly property real horizontalPadding: SettingsData.dankBarNoBackground ? 0 : Math.max(Theme.spacingXS, Theme.spacingS * (widgetThickness / 30))

-    signal clicked()
+    content: Component {
+        Item {
+            implicitWidth: root.widgetThickness - root.horizontalPadding * 2
+            implicitHeight: root.widgetThickness - root.horizontalPadding * 2

-    width: widgetThickness
-    height: widgetThickness
-
-    MouseArea {
-        id: launcherArea
-
-        anchors.fill: parent
-        hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-        onPressed: function (mouse){
-            if (mouse.button === Qt.RightButton) {
-                if (CompositorService.isNiri) {
-                    NiriService.toggleOverview()
-                } else if (CompositorService.isHyprland && root.hyprlandOverviewLoader?.item) {
-                    root.hyprlandOverviewLoader.item.overviewOpen = !root.hyprlandOverviewLoader.item.overviewOpen
-                }
-                return
+            DankIcon {
+                visible: SettingsData.launcherLogoMode === "apps"
+                anchors.centerIn: parent
+                name: "apps"
+                size: Theme.barIconSize(root.barThickness, -4)
+                color: Theme.surfaceText
            }

-            root.clicked();
-            if (popupTarget && popupTarget.setTriggerPosition) {
-                const globalPos = mapToGlobal(0, 0);
-                const currentScreen = parentScreen || Screen;
-                const pos = SettingsData.getPopupTriggerPosition(globalPos, currentScreen, barThickness, width);
-                popupTarget.setTriggerPosition(pos.x, pos.y, pos.width, section, currentScreen);
+            SystemLogo {
+                visible: SettingsData.launcherLogoMode === "os"
+                anchors.centerIn: parent
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                colorOverride: Theme.effectiveLogoColor
+                brightnessOverride: SettingsData.launcherLogoBrightness
+                contrastOverride: SettingsData.launcherLogoContrast
+            }
+
+            IconImage {
+                visible: SettingsData.launcherLogoMode === "compositor"
+                anchors.centerIn: parent
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                smooth: true
+                asynchronous: true
+                source: {
+                    if (CompositorService.isNiri) {
+                        return "file://" + Theme.shellDir + "/assets/niri.svg"
+                    } else if (CompositorService.isHyprland) {
+                        return "file://" + Theme.shellDir + "/assets/hyprland.svg"
+                    }
+                    return ""
+                }
+                layer.enabled: Theme.effectiveLogoColor !== ""
+                layer.effect: MultiEffect {
+                    saturation: 0
+                    colorization: 1
+                    colorizationColor: Theme.effectiveLogoColor
+                    brightness: SettingsData.launcherLogoBrightness
+                    contrast: SettingsData.launcherLogoContrast
+                }
+            }
+
+            IconImage {
+                visible: SettingsData.launcherLogoMode === "custom" && SettingsData.launcherLogoCustomPath !== ""
+                anchors.centerIn: parent
+                width: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                height: Theme.barIconSize(root.barThickness, SettingsData.launcherLogoSizeOffset)
+                smooth: true
+                asynchronous: true
+                source: SettingsData.launcherLogoCustomPath ? "file://" + SettingsData.launcherLogoCustomPath.replace("file://", "") : ""
+                layer.enabled: Theme.effectiveLogoColor !== ""
+                layer.effect: MultiEffect {
+                    saturation: 0
+                    colorization: 1
+                    colorizationColor: Theme.effectiveLogoColor
+                    brightness: SettingsData.launcherLogoBrightness
+                    contrast: SettingsData.launcherLogoContrast
+                }
            }
        }
    }

-    Rectangle {
-        id: launcherContent
-
+    MouseArea {
+        id: customMouseArea
        anchors.fill: parent
-        radius: SettingsData.dankBarNoBackground ? 0 : Theme.cornerRadius
-        color: {
-            if (SettingsData.dankBarNoBackground) {
-                return "transparent";
-            }
-
-            const baseColor = launcherArea.containsMouse ? Theme.widgetBaseHoverColor : Theme.widgetBaseBackgroundColor;
-            return Qt.rgba(baseColor.r, baseColor.g, baseColor.b, baseColor.a * Theme.widgetTransparency);
-        }
-
-        DankIcon {
-            visible: SettingsData.launcherLogoMode === "apps"
-            anchors.centerIn: parent
-            name: "apps"
-            size: Theme.barIconSize(barThickness, -4)
-            color: Theme.surfaceText
-        }
-
-        SystemLogo {
-            visible: SettingsData.launcherLogoMode === "os"
-            anchors.centerIn: parent
-            width: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
-            height: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
-            colorOverride: Theme.effectiveLogoColor
-            brightnessOverride: SettingsData.launcherLogoBrightness
-            contrastOverride: SettingsData.launcherLogoContrast
-        }
-
-        IconImage {
-            visible: SettingsData.launcherLogoMode === "compositor"
-            anchors.centerIn: parent
-            width: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
-            height: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
-            smooth: true
-            asynchronous: true
-            source: {
-                if (CompositorService.isNiri) {
-                    return "file://" + Theme.shellDir + "/assets/niri.svg"
-                } else if (CompositorService.isHyprland) {
-                    return "file://" + Theme.shellDir + "/assets/hyprland.svg"
-                }
-                return ""
-            }
-            layer.enabled: Theme.effectiveLogoColor !== ""
-            layer.effect: MultiEffect {
-                saturation: 0
-                colorization: 1
-                colorizationColor: Theme.effectiveLogoColor
-                brightness: SettingsData.launcherLogoBrightness
-                contrast: SettingsData.launcherLogoContrast
-            }
-        }
-
-        IconImage {
-            visible: SettingsData.launcherLogoMode === "custom" && SettingsData.launcherLogoCustomPath !== ""
-            anchors.centerIn: parent
-            width: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
-            height: Theme.barIconSize(barThickness, SettingsData.launcherLogoSizeOffset)
-            smooth: true
-            asynchronous: true
-            source: SettingsData.launcherLogoCustomPath ? "file://" + SettingsData.launcherLogoCustomPath.replace("file://", "") : ""
-            layer.enabled: Theme.effectiveLogoColor !== ""
-            layer.effect: MultiEffect {
-                saturation: 0
-                colorization: 1
-                colorizationColor: Theme.effectiveLogoColor
-                brightness: SettingsData.launcherLogoBrightness
-                contrast: SettingsData.launcherLogoContrast
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        acceptedButtons: Qt.RightButton
+        onPressed: function (mouse){
+            if (CompositorService.isNiri) {
+                NiriService.toggleOverview()
+            } else if (root.hyprlandOverviewLoader?.item) {
+                root.hyprlandOverviewLoader.item.overviewOpen = !root.hyprlandOverviewLoader.item.overviewOpen
            }
        }
    }