refactor(bar): add iconPosition fallback to oppositeDirection

- iconPosition defaults to empty string, falls back to oppositeDirection when not set
- Keeps backward compatibility for widgets not passing iconPosition
- CustomButton explicitly passes iconPosition="left", uses custom logic
This commit is contained in:
loner
2026-04-06 06:40:21 +08:00
parent 9cc8b36804
commit 36a9d7afee
2 changed files with 27 additions and 15 deletions
+23 -11
View File
@@ -18,7 +18,7 @@ Item {
property bool forceOpen: false
property bool forceClose: false
property bool oppositeDirection: false
property string iconPosition: "left"
property string iconPosition: ""
property bool hovered: false
property color customBackgroundColor: "transparent"
property color customTextIconColor: "transparent"
@@ -112,18 +112,22 @@ Item {
x: {
if (!hasIcon)
return 0;
return iconPosition === "right"
? (iconCircle.x + iconCircle.width / 2) - width
: (iconCircle.x + iconCircle.width / 2);
// iconPosition takes precedence, fallback to oppositeDirection
if (iconPosition === "right")
return (iconCircle.x + iconCircle.width / 2) - width;
if (iconPosition === "left")
return (iconCircle.x + iconCircle.width / 2);
return oppositeDirection ? (iconCircle.x + iconCircle.width / 2) : (iconCircle.x + iconCircle.width / 2) - width;
}
opacity: revealed ? Style.opacityFull : Style.opacityNone
color: "transparent" // Make pill background transparent to avoid double opacity
topLeftRadius: iconPosition === "right" ? Style.radiusM : 0
bottomLeftRadius: iconPosition === "right" ? Style.radiusM : 0
topRightRadius: iconPosition === "right" ? 0 : Style.radiusM
bottomRightRadius: iconPosition === "right" ? 0 : Style.radiusM
// iconPosition takes precedence, fallback to oppositeDirection
topLeftRadius: iconPosition ? (iconPosition === "right" ? Style.radiusM : 0) : (oppositeDirection ? 0 : Style.radiusM)
bottomLeftRadius: iconPosition ? (iconPosition === "right" ? Style.radiusM : 0) : (oppositeDirection ? 0 : Style.radiusM)
topRightRadius: iconPosition ? (iconPosition === "right" ? 0 : Style.radiusM) : (oppositeDirection ? Style.radiusM : 0)
bottomRightRadius: iconPosition ? (iconPosition === "right" ? 0 : Style.radiusM) : (oppositeDirection ? Style.radiusM : 0)
anchors.verticalCenter: parent.verticalCenter
NText {
@@ -135,10 +139,17 @@ Item {
// Better text horizontal centering
var centerX = (parent.width - width) / 2;
var offset = iconPosition === "right" ? -Style.marginXS : Style.marginXS;
// iconPosition takes precedence, fallback to oppositeDirection
var offset;
if (iconPosition === "right")
offset = -Style.marginXS;
else if (iconPosition === "left")
offset = Style.marginXS;
else
offset = oppositeDirection ? Style.marginXS : -Style.marginXS;
if (forceOpen) {
// If its force open, the icon disc background is the same color as the bg pill move text slightly
offset += iconPosition === "right" ? Style.marginXXS : -Style.marginXXS;
offset += iconPosition === "right" ? Style.marginXXS : (iconPosition === "left" ? -Style.marginXXS : oppositeDirection ? -Style.marginXXS : Style.marginXXS);
}
return centerX + offset;
}
@@ -174,7 +185,8 @@ Item {
color: "transparent" // Make icon background transparent to avoid double opacity
anchors.verticalCenter: parent.verticalCenter
x: iconPosition === "right" ? (parent.width - width) : 0
// iconPosition takes precedence, fallback to oppositeDirection
x: iconPosition ? (iconPosition === "right" ? (parent.width - width) : 0) : (oppositeDirection ? 0 : (parent.width - width))
NIcon {
icon: root.icon
+4 -4
View File
@@ -18,7 +18,7 @@ Item {
property bool forceOpen: false
property bool forceClose: false
property bool oppositeDirection: false
property string iconPosition: "left"
property string iconPosition: ""
property bool hovered: false
property bool rotateText: false
property color customBackgroundColor: "transparent"
@@ -49,9 +49,9 @@ Item {
readonly property int maxPillWidth: rotateText ? Math.max(buttonSize, Math.round(textItem.implicitHeight + Style.margin2M)) : buttonSize
readonly property int maxPillHeight: rotateText ? Math.max(1, Math.round(textItem.implicitWidth + Style.margin2M + Math.round(iconCircle.height / 4))) : Math.max(1, Math.round(textItem.implicitHeight + Style.margin2M))
// Determine pill direction based on icon position
readonly property bool openDownward: iconPosition === "right"
readonly property bool openUpward: iconPosition === "left"
// Determine pill direction based on icon position (fallback to oppositeDirection if not set)
readonly property bool openDownward: iconPosition === "right" || (iconPosition === "" && oppositeDirection)
readonly property bool openUpward: iconPosition === "left" || (iconPosition === "" && !oppositeDirection)
// Effective shown state (true if animated open or forced, but not if force closed)
readonly property bool revealed: !forceClose && (forceOpen || showPill)