From 521f3cab6d4d6b2df5dd06ee9557b2e352d9dd16 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 22 Feb 2026 00:12:26 +0100 Subject: [PATCH] hefty: bar: refactor content hover effect --- .../hefty/topLayer/bar/HBarWidgetContent.qml | 54 +++++++++++ .../bar/HBarWidgetShapeBackground.qml | 15 +-- .../hefty/topLayer/bar/widgets/HTime.qml | 93 ++++++------------- 3 files changed, 89 insertions(+), 73 deletions(-) create mode 100644 dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetContent.qml diff --git a/dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetContent.qml b/dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetContent.qml new file mode 100644 index 000000000..6c191fd35 --- /dev/null +++ b/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 + } +} diff --git a/dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetShapeBackground.qml b/dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetShapeBackground.qml index 0756efb03..0ad37ae91 100644 --- a/dots/.config/quickshell/ii/modules/hefty/topLayer/bar/HBarWidgetShapeBackground.qml +++ b/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 - property bool showPopup: root.showPopup - property real backgroundWidth: containerRoot.backgroundWidth - property real backgroundHeight: containerRoot.backgroundHeight + required property bool vertical + required property bool atBottom + required property bool showPopup + required property real backgroundWidth + required property real backgroundHeight property real popupWidth: 400 property real popupHeight: 500 - property real startRadius: containerRoot.getBackgroundRadius(containerRoot.startSide) - property real endRadius: containerRoot.getBackgroundRadius(containerRoot.endSide) - property real baseMargin: (parent.height - containerShape.height) / 2 + required property real startRadius + required property real endRadius + property real baseMargin: (parent.height - containerShape.height) / 2 // TODO vertical property alias containerShape: containerShape property alias popupShape: popupShape diff --git a/dots/.config/quickshell/ii/modules/hefty/topLayer/bar/widgets/HTime.qml b/dots/.config/quickshell/ii/modules/hefty/topLayer/bar/widgets/HTime.qml index dc244c5a2..6fe1d0a3e 100644 --- a/dots/.config/quickshell/ii/modules/hefty/topLayer/bar/widgets/HTime.qml +++ b/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 { - target: root - function onShowPopupChanged() { - if (root.showPopup) { - containerRoot.morphedPanelParent.addAttachedMaskItem(bgShape); - } else { - containerRoot.morphedPanelParent.removeAttachedMaskItem(bgShape); - } + onShowPopupChanged: { + if (root.showPopup) { + root.morphedPanelParent.addAttachedMaskItem(bgShape); + } else { + root.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 - startRadius: containerRoot.getBackgroundRadius(containerRoot.startSide) - endRadius: containerRoot.getBackgroundRadius(containerRoot.endSide) - baseMargin: (parent.height - containerShape.height) / 2 // TODO vertical + + backgroundWidth: root.backgroundWidth + backgroundHeight: root.backgroundHeight + startRadius: root.getBackgroundRadius(root.startSide) + endRadius: root.getBackgroundRadius(root.endSide) } // The button on the bar - W.ButtonMouseArea { - id: root + HBarWidgetContent { + id: contentRoot - property bool vertical: C.Config.options.bar.vertical - property bool atBottom: C.Config.options.bar.bottom - property bool showPopup: false + vertical: root.vertical + atBottom: root.atBottom + showPopup: root.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 - 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 - } + onClicked: root.showPopup = !showPopup + contentImplicitWidth: vertical ? verticalContent.implicitWidth : horizontalContent.implicitWidth + contentImplicitHeight: vertical ? verticalContent.implicitHeight : horizontalContent.implicitHeight 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 } } - } }