fix: Fix overlapping opacity in BarPill components

This commit is contained in:
loner
2025-11-17 10:08:12 +08:00
parent 609c9900f7
commit a201b8a2c8
2 changed files with 41 additions and 18 deletions
+21 -9
View File
@@ -72,6 +72,25 @@ Item {
}
}
// Unified background for the entire pill area to avoid overlapping opacity
Rectangle {
id: pillBackground
width: root.width
height: pillHeight
radius: halfPillHeight
color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
anchors.verticalCenter: parent.verticalCenter
readonly property int halfPillHeight: Math.round(pillHeight * 0.5)
Behavior on color {
ColorAnimation {
duration: Style.animationNormal
easing.type: Easing.InOutQuad
}
}
}
Rectangle {
id: pill
@@ -82,7 +101,7 @@ Item {
(iconCircle.x + iconCircle.width / 2) - width // Opens left
opacity: revealed ? Style.opacityFull : Style.opacityNone
color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
color: Color.transparent // Make pill background transparent to avoid double opacity
readonly property int halfPillHeight: Math.round(pillHeight * 0.5)
@@ -135,18 +154,11 @@ Item {
width: pillHeight
height: pillHeight
radius: width * 0.5
color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
color: Color.transparent // Make icon background transparent to avoid double opacity
anchors.verticalCenter: parent.verticalCenter
x: oppositeDirection ? 0 : (parent.width - width)
Behavior on color {
ColorAnimation {
duration: Style.animationNormal
easing.type: Easing.InOutQuad
}
}
NIcon {
icon: root.icon
pointSize: iconSize
+20 -9
View File
@@ -83,6 +83,24 @@ Item {
}
}
// Unified background for the entire pill area to avoid overlapping opacity
Rectangle {
id: pillBackground
width: buttonSize
height: revealed ? (buttonSize + maxPillHeight - pillOverlap) : buttonSize
radius: halfButtonSize
color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
readonly property int halfButtonSize: Math.round(buttonSize * 0.5)
Behavior on color {
ColorAnimation {
duration: Style.animationNormal
easing.type: Easing.InOutQuad
}
}
}
Rectangle {
id: pill
@@ -94,7 +112,7 @@ Item {
y: openUpward ? (iconCircle.y + iconCircle.height / 2 - height) : (iconCircle.y + iconCircle.height / 2)
opacity: revealed ? Style.opacityFull : Style.opacityNone
color: Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
color: Color.transparent // Make pill background transparent to avoid double opacity
readonly property int halfButtonSize: Math.round(buttonSize * 0.5)
@@ -158,20 +176,13 @@ Item {
width: buttonSize
height: buttonSize
radius: width * 0.5
color: hovered ? Color.mHover : Settings.data.bar.showCapsule ? Qt.alpha(Color.mSurfaceVariant, Settings.data.bar.capsuleOpacity) : Color.transparent
color: Color.transparent // Make icon background transparent to avoid double opacity
// Icon positioning based on direction
x: 0
y: openUpward ? (parent.height - height) : 0
anchors.horizontalCenter: parent.horizontalCenter
Behavior on color {
ColorAnimation {
duration: Style.animationNormal
easing.type: Easing.InOutQuad
}
}
NIcon {
icon: root.icon
pointSize: iconSize