hefty: bar: refactor content hover effect

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

@@ -0,0 +1,54 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+
+import qs.modules.common as C
+import qs.modules.common.functions as F
+import qs.modules.common.widgets as W
+import ".."
+
+W.ButtonMouseArea {
+    id: root
+
+    required property bool vertical
+    required property bool atBottom
+    required property bool showPopup
+
+    property var layoutParent: F.ObjectUtils.findParentWithProperty(root, "startSide")
+    property real layoutParentTopLeftRadius: layoutParent.topLeftRadius
+    property real layoutParentTopRightRadius: layoutParent.topRightRadius
+    property real layoutParentBottomLeftRadius: layoutParent.bottomLeftRadius
+    property real layoutParentBottomRightRadius: layoutParent.bottomRightRadius
+
+    readonly property real barThickness: vertical ? C.Appearance.sizes.verticalBarWidth : C.Appearance.sizes.barHeight
+    required property real contentImplicitWidth
+    required property real contentImplicitHeight
+    property real parentRadiusToPaddingRatio: 0.3
+    implicitWidth: vertical ? barThickness : (contentImplicitWidth + (layoutParentTopLeftRadius + layoutParentBottomRightRadius) * parentRadiusToPaddingRatio)
+    implicitHeight: !vertical ? barThickness : (contentImplicitHeight + (layoutParentTopLeftRadius + layoutParentBottomRightRadius) * parentRadiusToPaddingRatio)
+    Layout.alignment: vertical ? Qt.AlignHCenter : Qt.AlignVCenter
+    Layout.fillWidth: vertical
+    Layout.fillHeight: !vertical
+
+    W.StateOverlay {
+        id: hoverOverlay
+        anchors.fill: parent
+        property real parentMargins: 4
+        property real ownMargins: 2
+        property real edgeMargins: parentMargins + ownMargins
+        property real sideMargins: -2
+        anchors {
+            leftMargin: root.vertical ? edgeMargins : sideMargins
+            rightMargin: root.vertical ? edgeMargins : sideMargins
+            topMargin: root.vertical ? sideMargins : edgeMargins
+            bottomMargin: root.vertical ? sideMargins : edgeMargins
+        }
+        topLeftRadius: root.layoutParentTopLeftRadius - ownMargins
+        topRightRadius: root.layoutParentTopRightRadius - ownMargins
+        bottomLeftRadius: root.layoutParentBottomLeftRadius - ownMargins
+        bottomRightRadius: root.layoutParentBottomRightRadius - ownMargins
+
+        hover: root.containsMouse
+        press: root.containsPress
+    }
+}

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

@@ -16,15 +16,16 @@ import "../../../common/widgets/shapes/geometry/offset.js" as Offset
 Shapes.ShapeCanvas {
     id: bgShape
 
-    property bool atBottom: root.atBottom
+    required property bool vertical
-    property bool showPopup: root.showPopup
+    required property bool atBottom
-    property real backgroundWidth: containerRoot.backgroundWidth
+    required property bool showPopup
-    property real backgroundHeight: containerRoot.backgroundHeight
+    required property real backgroundWidth
+    required property real backgroundHeight
     property real popupWidth: 400
     property real popupHeight: 500
-    property real startRadius: containerRoot.getBackgroundRadius(containerRoot.startSide)
+    required property real startRadius
-    property real endRadius: containerRoot.getBackgroundRadius(containerRoot.endSide)
+    required property real endRadius
-    property real baseMargin: (parent.height - containerShape.height) / 2
+    property real baseMargin: (parent.height - containerShape.height) / 2 // TODO vertical
 
     property alias containerShape: containerShape
     property alias popupShape: popupShape

dots/.config/quickshell/ii/modules/hefty/topLayer/bar/widgets/HTime.qml

@@ -1,35 +1,31 @@
 pragma ComponentBehavior: Bound
 import QtQuick
 import QtQuick.Layouts
-import Quickshell
 
 import qs.modules.common as C
 import qs.modules.common.functions as F
 import qs.services as S
 import qs.modules.common.widgets as W
-import qs.modules.common.widgets.shapes as Shapes
 import ".."
-import "../../../../common/widgets/shapes/material-shapes.js" as MaterialShapes
-import "../../../../common/widgets/shapes/shapes/corner-rounding.js" as CornerRounding
-import "../../../../common/widgets/shapes/geometry/offset.js" as Offset
 
 HBarWidgetContainer {
-    id: containerRoot
+    id: root
+
+    property bool showPopup: false
+    readonly property bool vertical: C.Config.options.bar.vertical
+    readonly property bool atBottom: C.Config.options.bar.bottom
 
     // Interactions
     property var morphedPanelParent: F.ObjectUtils.findParentWithProperty(root, "maskItems")
-    Connections {
+    onShowPopupChanged: {
-        target: root
+        if (root.showPopup) {
-        function onShowPopupChanged() {
+            root.morphedPanelParent.addAttachedMaskItem(bgShape);
-            if (root.showPopup) {
+        } else {
-                containerRoot.morphedPanelParent.addAttachedMaskItem(bgShape);
+            root.morphedPanelParent.removeAttachedMaskItem(bgShape);
-            } else {
-                containerRoot.morphedPanelParent.removeAttachedMaskItem(bgShape);
-            }
         }
     }
     Connections {
-        target: containerRoot.morphedPanelParent
+        target: root.morphedPanelParent
         function onFocusGrabDismissed() {
             root.showPopup = false;
         }
@@ -39,66 +35,32 @@ HBarWidgetContainer {
     background: HBarWidgetShapeBackground {
         id: bgShape
 
+        vertical: root.vertical
         atBottom: root.atBottom
         showPopup: root.showPopup
-        backgroundWidth: containerRoot.backgroundWidth
+
-        backgroundHeight: containerRoot.backgroundHeight
+        backgroundWidth: root.backgroundWidth
-        startRadius: containerRoot.getBackgroundRadius(containerRoot.startSide)
+        backgroundHeight: root.backgroundHeight
-        endRadius: containerRoot.getBackgroundRadius(containerRoot.endSide)
+        startRadius: root.getBackgroundRadius(root.startSide)
-        baseMargin: (parent.height - containerShape.height) / 2 // TODO vertical
+        endRadius: root.getBackgroundRadius(root.endSide)
     }
 
     // The button on the bar
-    W.ButtonMouseArea {
+    HBarWidgetContent {
-        id: root
+        id: contentRoot
 
-        property bool vertical: C.Config.options.bar.vertical
+        vertical: root.vertical
-        property bool atBottom: C.Config.options.bar.bottom
+        atBottom: root.atBottom
-        property bool showPopup: false
+        showPopup: root.showPopup
 
-        property var layoutParent: F.ObjectUtils.findParentWithProperty(root, "startSide")
+        onClicked: root.showPopup = !showPopup
-        property real layoutParentTopLeftRadius: layoutParent.topLeftRadius
+        contentImplicitWidth: vertical ? verticalContent.implicitWidth : horizontalContent.implicitWidth
-        property real layoutParentTopRightRadius: layoutParent.topRightRadius
+        contentImplicitHeight: vertical ? verticalContent.implicitHeight : horizontalContent.implicitHeight
-        property real layoutParentBottomLeftRadius: layoutParent.bottomLeftRadius
-        property real layoutParentBottomRightRadius: layoutParent.bottomRightRadius
-
-        readonly property real barThickness: vertical ? C.Appearance.sizes.verticalBarWidth : C.Appearance.sizes.barHeight
-        property var activeContent: vertical ? verticalContent : horizontalContent
-        property real parentRadiusToPaddingRatio: 0.3
-        implicitWidth: vertical ? barThickness : (activeContent.implicitWidth + (layoutParentTopLeftRadius + layoutParentBottomRightRadius) * parentRadiusToPaddingRatio)
-        implicitHeight: !vertical ? barThickness : (activeContent.implicitHeight + (layoutParentTopLeftRadius + layoutParentBottomRightRadius) * parentRadiusToPaddingRatio)
-        Layout.alignment: vertical ? Qt.AlignHCenter : Qt.AlignVCenter
-        Layout.fillWidth: vertical
-        Layout.fillHeight: !vertical
-
-        onClicked: showPopup = !showPopup
-
-        W.StateOverlay {
-            id: hoverOverlay
-            anchors.fill: parent
-            property real parentMargins: 4
-            property real ownMargins: 2
-            property real edgeMargins: parentMargins + ownMargins
-            property real sideMargins: -2
-            anchors {
-                leftMargin: root.vertical ? edgeMargins : sideMargins
-                rightMargin: root.vertical ? edgeMargins : sideMargins
-                topMargin: root.vertical ? sideMargins : edgeMargins
-                bottomMargin: root.vertical ? sideMargins : edgeMargins
-            }
-            topLeftRadius: root.layoutParentTopLeftRadius - ownMargins
-            topRightRadius: root.layoutParentTopRightRadius - ownMargins
-            bottomLeftRadius: root.layoutParentBottomLeftRadius - ownMargins
-            bottomRightRadius: root.layoutParentBottomRightRadius - ownMargins
-
-            hover: root.containsMouse
-            press: root.containsPress
-        }
 
         W.FadeLoader {
             id: horizontalContent
             anchors.fill: parent
-            shown: !root.vertical
+            shown: !contentRoot.vertical
 
             sourceComponent: Item {
                 anchors.fill: parent
@@ -110,7 +72,7 @@ HBarWidgetContainer {
                     anchors.fill: parent
 
                     W.VisuallyCenteredStyledText {
-                        Layout.leftMargin: root.layoutParentTopLeftRadius * root.parentRadiusToPaddingRatio
+                        Layout.leftMargin: contentRoot.layoutParentTopLeftRadius * contentRoot.parentRadiusToPaddingRatio
                         Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
                         Layout.fillHeight: true
                         font.pixelSize: C.Appearance.font.pixelSize.large
@@ -132,7 +94,6 @@ HBarWidgetContainer {
                         text: S.DateTime.longDate
                     }
                 }
-
             }
         }