hefty: bar: refactor content hover effect

This commit is contained in:
end-4
2026-02-22 00:12:26 +01:00
parent 455252dff1
commit 521f3cab6d
3 changed files with 89 additions and 73 deletions
@@ -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
}
}
@@ -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
@@ -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
}
}
}
}