feat(bar): Add conditional text rotation for BarPillVertical

Modules/Bar/Extras/BarPill.qml

@@ -17,6 +17,7 @@ Item {
   property bool forceClose: false
   property bool oppositeDirection: false
   property bool hovered: false
+  property bool rotateText: false
 
   readonly property string barPosition: Settings.data.bar.position
   readonly property bool isVerticalBar: barPosition === "left" || barPosition === "right"
@@ -52,6 +53,7 @@ Item {
         oppositeDirection: root.oppositeDirection
         hovered: root.hovered
         density: root.density
+        rotateText: root.rotateText
         onShown: root.shown()
         onHidden: root.hidden()
         onEntered: root.entered()

Modules/Bar/Extras/BarPillVertical.qml

@@ -18,6 +18,7 @@ Item {
   property bool forceClose: false
   property bool oppositeDirection: false
   property bool hovered: false
+  property bool rotateText: false
 
   // Bar position detection for pill direction
   readonly property string barPosition: Settings.data.bar.position
@@ -48,8 +49,8 @@ Item {
   readonly property int pillHeight: buttonSize
   readonly property int pillPaddingVertical: 3 * 2 // Very precise adjustment don't replace by Style.margin
   readonly property int pillOverlap: Math.round(buttonSize * 0.5)
-  readonly property int maxPillWidth: Math.max(buttonSize, Math.round(textItem.implicitHeight + pillPaddingVertical * 2))
-  readonly property int maxPillHeight: Math.max(1, Math.round(textItem.implicitWidth + pillPaddingVertical * 2 + Math.round(iconCircle.height / 4)))
+  readonly property int maxPillWidth: rotateText ? Math.max(buttonSize, Math.round(textItem.implicitHeight + pillPaddingVertical * 2)) : buttonSize
+  readonly property int maxPillHeight: rotateText ? Math.max(1, Math.round(textItem.implicitWidth + pillPaddingVertical * 2 + Math.round(iconCircle.height / 4))) : Math.max(1, Math.round(textItem.implicitHeight + pillPaddingVertical * 4))
 
   readonly property real iconSize: {
     switch (root.density) {
@@ -109,8 +110,8 @@ Item {
       id: textItem
       anchors.horizontalCenter: parent.horizontalCenter
       anchors.verticalCenter: parent.verticalCenter
-      anchors.verticalCenterOffset: Math.round(iconCircle.height / 4)
-      rotation: -90
+      anchors.verticalCenterOffset: rotateText ? Math.round(iconCircle.height / 4) : getVerticalCenterOffset()
+      rotation: rotateText ? -90 : 0
       text: root.text + root.suffix
       family: Settings.data.ui.fontFixed
       pointSize: textSize
@@ -120,6 +121,14 @@ Item {
       verticalAlignment: Text.AlignVCenter
       color: forceOpen ? Color.mOnSurface : Color.mPrimary
       visible: revealed
+
+    function getVerticalCenterOffset() {
+      var offset = openDownward ? Math.round(pillPaddingVertical * 0.75) : -Math.round(pillPaddingVertical * 0.75)
+      if (forceOpen) {
+        offset += oppositeDirection ? -Style.marginXXS : Style.marginXXS
+      }
+      return offset
+    }
     }
     Behavior on width {
       enabled: showAnim.running || hideAnim.running

Modules/Bar/Widgets/CustomButton.qml

@@ -56,6 +56,7 @@ Item {
     icon: _dynamicIcon !== "" ? _dynamicIcon : customIcon
     text: shouldShowText ? _dynamicText : ""
     density: Settings.data.bar.density
+    rotateText: isVerticalBar && !hideTextInVerticalBar
     autoHide: false
     forceOpen: _dynamicText !== ""
     tooltipText: {