mirror of
https://github.com/noctalia-dev/noctalia-shell.git
synced 2026-05-11 17:08:27 +08:00
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:
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user