hefty: bar: fix popup content spacing

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarContent.qml

@@ -22,7 +22,9 @@ Item {
         anchors.top: parent.top
         anchors.right: !root.vertical ? centerLeftSide.left : parent.right
         anchors.bottom: !root.vertical ? parent.bottom : centerLeftSide.top
-        anchors.leftMargin: 0 // For accessibility
+        // For accessibility
+        anchors.leftMargin: 0
+        anchors.topMargin: 0
 
         HBarUserFallbackComponentRepeater {
             componentNames: root.leftWidgets
@@ -67,7 +69,9 @@ Item {
         anchors.bottom: parent.bottom
         anchors.left: !root.vertical ? centerRightSide.right : parent.left
         anchors.top: !root.vertical ? parent.top : centerRightSide.bottom
-        anchors.rightMargin: 0 // For accessibility
+        // For accessibility
+        anchors.rightMargin: 0
+        anchors.bottomMargin: 0
 
         Item {
             Layout.fillWidth: true

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarGroupContainer.qml

@@ -19,8 +19,8 @@ Item {
     readonly property real barUndirectionalWidth: C.Config.options.bar.vertical ? C.Appearance.sizes.baseVerticalBarWidth : C.Appearance.sizes.baseBarHeight
     readonly property real backgroundUndirectionalWidth: barUndirectionalWidth - margins * 2
 
-    implicitWidth: vertical ? barUndirectionalWidth : layout.implicitWidth + padding * 2
+    implicitWidth: vertical ? barUndirectionalWidth : layout.implicitWidth
-    implicitHeight: vertical ? layout.implicitHeight + padding * 2 : barUndirectionalWidth
+    implicitHeight: vertical ? layout.implicitHeight : barUndirectionalWidth
 
     property alias startRadius: bg.startRadius
     property alias endRadius: bg.endRadius
@@ -28,8 +28,10 @@ Item {
     property alias topRightRadius: bg.topRightRadius
     property alias bottomLeftRadius: bg.bottomLeftRadius
     property alias bottomRightRadius: bg.bottomRightRadius
-    property real backgroundWidth: root.vertical ? root.backgroundUndirectionalWidth : root.width
+    property real backgroundWidth: root.vertical ? root.backgroundUndirectionalWidth : (root.width - margins * (startSide + endSide))
-    property real backgroundHeight: root.vertical ? root.height : root.backgroundUndirectionalWidth
+    property real backgroundHeight: !root.vertical ? root.backgroundUndirectionalWidth : (root.height - margins * (startSide + endSide))
+    property real backgroundTopMargin: root.margins * (!root.vertical || root.startSide)
+    property real backgroundLeftMargin: root.margins * (root.vertical || root.startSide)
     property real fullBackgroundRadius: Math.min(backgroundWidth, backgroundHeight) / 2
     function getBackgroundRadius(atSide) {
         if (root.m3eRadius) {
@@ -42,7 +44,12 @@ Item {
 
     property Item background: W.AxisRectangle {
         id: bg
-        anchors.centerIn: parent
+        anchors {
+            top: parent?.top
+            left: parent?.left
+            topMargin: root.backgroundTopMargin
+            leftMargin: root.backgroundLeftMargin
+        }
         contentLayer: W.StyledRectangle.ContentLayer.Group
 
         width: root.backgroundWidth
@@ -56,13 +63,7 @@ Item {
     property Item contentItem: GridLayout {
         id: layout
         columns: C.Config.options.bar.vertical ? 1 : -1
-        anchors {
+        anchors.fill: parent
-            fill: parent
-            leftMargin: root.vertical ? 0 : root.padding
-            rightMargin: root.vertical ? 0 : root.padding
-            topMargin: root.vertical ? root.padding : 0
-            bottomMargin: root.vertical ? root.padding : 0
-        }
         property real spacing: 4
         columnSpacing: spacing
         rowSpacing: spacing

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetContent.qml

@@ -14,11 +14,11 @@ W.ButtonMouseArea {
     required property bool atBottom
     required property bool showPopup
 
-    property var layoutParent: F.ObjectUtils.findParentWithProperty(root, "startSide")
+    readonly property var layoutParent: F.ObjectUtils.findParentWithProperty(root, "startSide")
-    property real layoutParentTopLeftRadius: layoutParent.topLeftRadius
+    readonly property real layoutParentTopLeftRadius: layoutParent.topLeftRadius
-    property real layoutParentTopRightRadius: layoutParent.topRightRadius
+    readonly property real layoutParentTopRightRadius: layoutParent.topRightRadius
-    property real layoutParentBottomLeftRadius: layoutParent.bottomLeftRadius
+    readonly property real layoutParentBottomLeftRadius: layoutParent.bottomLeftRadius
-    property real layoutParentBottomRightRadius: layoutParent.bottomRightRadius
+    readonly property real layoutParentBottomRightRadius: layoutParent.bottomRightRadius
 
     readonly property real barThickness: vertical ? C.Appearance.sizes.verticalBarWidth : C.Appearance.sizes.barHeight
     readonly property real barVisualThickness: vertical ? C.Appearance.sizes.baseVerticalBarWidth : C.Appearance.sizes.baseBarHeight
@@ -26,8 +26,22 @@ W.ButtonMouseArea {
     required property real contentImplicitWidth
     required property real contentImplicitHeight
     property real parentRadiusToPaddingRatio: 0.3
-    implicitWidth: vertical ? barThickness : (contentImplicitWidth + (layoutParentTopLeftRadius + layoutParentBottomRightRadius) * parentRadiusToPaddingRatio)
+    implicitWidth: {
-    implicitHeight: !vertical ? barThickness : (contentImplicitHeight + (layoutParentTopLeftRadius + layoutParentBottomRightRadius) * parentRadiusToPaddingRatio)
+        if (vertical) {
+            return barThickness;
+        } else {
+            const roundingPadding = (layoutParentTopLeftRadius + layoutParentBottomRightRadius) * parentRadiusToPaddingRatio;
+            return (contentImplicitWidth + roundingPadding + 4 * 2);
+        }
+    }
+    implicitHeight: {
+        if (!vertical) {
+            return barThickness;
+        } else {
+            const roundingPadding = (layoutParentTopLeftRadius + layoutParentBottomRightRadius) * parentRadiusToPaddingRatio;
+            return (contentImplicitHeight + roundingPadding + 4 * 2);
+        }
+    }
     Layout.alignment: vertical ? Qt.AlignHCenter : Qt.AlignVCenter
     Layout.fillWidth: vertical
     Layout.fillHeight: !vertical
@@ -41,12 +55,12 @@ W.ButtonMouseArea {
         property real parentMargins: 4 + root.barGap
         property real ownMargins: 2
         property real edgeMargins: parentMargins + ownMargins
-        property real sideMargins: -2
+        property real sideMargins: 2
         anchors {
-            leftMargin: root.vertical ? edgeMargins : sideMargins
+            leftMargin: (root.vertical ? edgeMargins : sideMargins) + parentMargins * (!root.vertical && root.layoutParent.startSide)
-            rightMargin: root.vertical ? edgeMargins : sideMargins
+            rightMargin: (root.vertical ? edgeMargins : sideMargins) + parentMargins * (!root.vertical && root.layoutParent.endSide)
-            topMargin: root.vertical ? sideMargins : edgeMargins
+            topMargin: (root.vertical ? sideMargins : edgeMargins) + parentMargins * (root.vertical && root.layoutParent.startSide)
-            bottomMargin: root.vertical ? sideMargins : edgeMargins
+            bottomMargin: (root.vertical ? sideMargins : edgeMargins) + parentMargins * (root.vertical && root.layoutParent.endSide)
         }
         topLeftRadius: root.layoutParentTopLeftRadius - ownMargins
         topRightRadius: root.layoutParentTopRightRadius - ownMargins

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetShapeBackground.qml

@@ -27,10 +27,14 @@ Shapes.ShapeCanvas {
     required property real startRadius
     required property real endRadius
     property real baseMargin: {
+        print("calculating new base margin (vertical, parent height, container height) = ", vertical, parent.height, containerShape.height)
         if (!vertical)
-            return (parent.height - containerShape.height) / 2;
+            return parent.anchors.topMargin
         else
-            return (parent.width - containerShape.width) / 2;
+            return parent.anchors.leftMargin
+    }
+    onBaseMarginChanged: {
+        print(baseMargin)
     }
 
     property alias containerShape: containerShape
@@ -53,15 +57,15 @@ Shapes.ShapeCanvas {
     Component.onCompleted: updatePosInGlobal()
     onXChanged: updatePosInGlobal()
     onYChanged: updatePosInGlobal()
-    readonly property real minPopupXOffset: -xInGlobal + baseMargin
+    readonly property real minPopupXOffset: -xInGlobal
-    readonly property real minPopupYOffset: -yInGlobal + baseMargin
+    readonly property real minPopupYOffset: -yInGlobal
     readonly property real maxPopupXOffset: {
-        const maxPopupX = QsWindow.window.screen.width - popupWidth - baseMargin;
+        const maxPopupX = QsWindow.window.screen.width - popupWidth;
         const maxOffset = maxPopupX - xInGlobal;
         return maxOffset;
     }
     readonly property real maxPopupYOffset: {
-        const maxPopupY = QsWindow.window.screen.height - popupHeight - baseMargin;
+        const maxPopupY = QsWindow.window.screen.height - popupHeight;
         const maxOffset = maxPopupY - yInGlobal;
         return maxOffset;
     }
@@ -70,44 +74,44 @@ Shapes.ShapeCanvas {
     readonly property real popupXOffset: {
         // print("popupXOffset", popupXOffset, "lock", lockPopupX)
         if (bgShape.lockPopupX) return;
-        // if (bgShape.showPopup) lockPopupX = true;
         if (!vertical) return Math.min(Math.max(-(popupWidth - containerShape.width) / 2, minPopupXOffset), maxPopupXOffset);
         else return atBottom ? -(popupShape.width + spacing) : (containerShape.width + spacing);
+        if (bgShape.showPopup) lockPopupX = true;
     }
     onPopupXOffsetChanged: if (bgShape.showPopup) lockPopupX = true;
     readonly property real popupYOffset: {
         if (bgShape.lockPopupY) return;
-        // if (bgShape.showPopup) lockPopupY = true;
         if (!vertical) return atBottom ? -(popupShape.height + spacing) : (containerShape.height + spacing);
         else return Math.min(Math.max(-(popupHeight - containerShape.height) / 2, minPopupYOffset), maxPopupYOffset)
+        if (bgShape.showPopup) lockPopupY = true;
     }
     onPopupYOffsetChanged: if (bgShape.showPopup) lockPopupY = true;
 
     // Positioning
-    readonly property real popupContentOffsetBase: -baseMargin + popupPadding
+    readonly property real popupContentOffsetBase: popupPadding + baseMargin
-    readonly property real paddedContainerHeight: containerShape.height + baseMargin * 2
+    readonly property real paddedContainerHeight: containerShape.height
-    readonly property real paddedContainerWidth: containerShape.width + baseMargin * 2
+    readonly property real paddedContainerWidth: containerShape.width
     readonly property real popupContentOffsetY: {
-        if (!vertical) return paddedContainerHeight + spacing + popupContentOffsetBase + (atBottom ? -(popupHeight + backgroundHeight + spacing * 2) : 0)
+        if (!vertical) return paddedContainerHeight + spacing + popupContentOffsetBase + (atBottom * -(popupHeight + backgroundHeight + spacing * 2))
         else return popupYOffset + popupContentOffsetBase;
     }
     readonly property real popupContentOffsetX: {
         if (!vertical) return popupXOffset + popupContentOffsetBase;
-        else return paddedContainerWidth + spacing + popupContentOffsetBase + (atBottom ? -(popupWidth + backgroundWidth + spacing * 2) : 0);
+        else return paddedContainerWidth + spacing + popupContentOffsetBase + (atBottom * -(popupWidth + backgroundWidth + spacing * 2));
     }
 
     anchors {
         left: parent.left
         leftMargin: {
             if (!vertical) return -xOffset;
-            if (!bgShape.atBottom || !bgShape.showPopup) return baseMargin;
+            if (!bgShape.atBottom || !bgShape.showPopup) return 0;
-            return baseMargin - popupShape.width - bgShape.spacing;
+            return -popupShape.width - bgShape.spacing;
         }
         top: parent.top
         topMargin: {
             if (vertical) return -yOffset;
-            if (!bgShape.atBottom || !bgShape.showPopup) return baseMargin;
+            if (!bgShape.atBottom || !bgShape.showPopup) return 0;
-            return baseMargin - popupShape.height - bgShape.spacing;
+            return -popupShape.height - bgShape.spacing;
         }
     }
     width: {
@@ -123,10 +127,7 @@ Shapes.ShapeCanvas {
     onProgressChanged: {
         if (progress == 1) {
             popupHiding = false
-            if (showPopup) {
+            if (!showPopup) {
-                lockPopupX = true;
-                lockPopupY = true;
-            } else {
                 lockPopupX = false;
                 lockPopupY = false;
             }

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetWithPopout.qml

@@ -38,16 +38,28 @@ HBarWidgetContainer {
     property alias popupContentHeight: bgShape.popupContentHeight
     property alias popupContentOffsetX: bgShape.popupContentOffsetX
     property alias popupContentOffsetY: bgShape.popupContentOffsetY
-    background: HBarWidgetShapeBackground {
-        id: bgShape
 
-        vertical: root.vertical
+    background: Item {
-        atBottom: root.atBottom
+        anchors {
-        showPopup: root.showPopup
+            top: parent.top
+            left: parent.left
+            topMargin: root.backgroundTopMargin
+            leftMargin: root.backgroundLeftMargin
+        }
+        implicitWidth: root.backgroundWidth
+        implicitHeight: root.backgroundHeight
 
-        backgroundWidth: root.backgroundWidth
+        HBarWidgetShapeBackground {
-        backgroundHeight: root.backgroundHeight
+            id: bgShape
-        startRadius: root.getBackgroundRadius(root.startSide)
+
-        endRadius: root.getBackgroundRadius(root.endSide)
+            vertical: root.vertical
+            atBottom: root.atBottom
+            showPopup: root.showPopup
+            
+            backgroundWidth: root.backgroundWidth
+            backgroundHeight: root.backgroundHeight
+            startRadius: root.getBackgroundRadius(root.startSide)
+            endRadius: root.getBackgroundRadius(root.endSide)
+        }
     }
 }