bar: battery: shamshung pill style

.config/quickshell/ii/modules/bar/BatteryIndicator.qml

@@ -13,8 +13,6 @@ MouseArea {
     readonly property bool isPluggedIn: Battery.isPluggedIn
     readonly property real percentage: Battery.percentage
     readonly property bool isLow: percentage <= Config.options.battery.low / 100
-    readonly property color batteryLowBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3error : Appearance.m3colors.m3errorContainer
-    readonly property color batteryLowOnBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3errorContainer : Appearance.m3colors.m3error
 
     implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
     implicitHeight: 32
@@ -27,69 +25,44 @@ MouseArea {
         spacing: 4
         anchors.centerIn: parent
 
-        Rectangle {
+        ClippedProgressBar {
-            implicitWidth: (isCharging ? (boltIconLoader?.item?.width ?? 0) : 0)
+            id: batteryProgress
-
-            Behavior on implicitWidth {
-                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
-            }
-        }
-
-        StyledText {
-            Layout.alignment: Qt.AlignVCenter
-            color: Appearance.colors.colOnLayer1
-            text: `${Math.round(percentage * 100)}`
-        }
-
-        CircularProgress {
-            enableAnimation: false
-            Layout.alignment: Qt.AlignVCenter
-            lineWidth: 2
             value: percentage
-            implicitSize: 26
+            highlightColor: (isLow && !isCharging) ? Appearance.m3colors.m3error : Appearance.m3colors.m3onSecondaryContainer
-            colSecondary: (isLow && !isCharging) ? batteryLowBackground : Appearance.colors.colSecondaryContainer
-            colPrimary: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
-            fill: (isLow && !isCharging)
 
-            MaterialSymbol {
+            Item {
                 anchors.centerIn: parent
-                fill: 1
+                width: batteryProgress.valueBarWidth
-                text: "battery_android_full"
+                height: batteryProgress.valueBarHeight
-                iconSize: Appearance.font.pixelSize.normal
-                color: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
-            }
-        }
-    }
 
-    Loader {
+                RowLayout {
-        id: boltIconLoader
+                    anchors.centerIn: parent
-        active: true
+                    spacing: 0
-        anchors.left: rowLayout.left
-        anchors.verticalCenter: rowLayout.verticalCenter
 
-        Connections {
+                    MaterialSymbol {
-            target: root
+                        id: boltIcon
-            function onIsChargingChanged() {
+                        Layout.alignment: Qt.AlignVCenter
-                if (isCharging)
+                        Layout.leftMargin: -2
-                    boltIconLoader.active = true;
+                        Layout.rightMargin: -2
-            }
+                        fill: 1
-        }
+                        text: "bolt"
+                        iconSize: Appearance.font.pixelSize.smaller
+                        visible: isCharging && percentage < 1
+                        onVisibleChanged: {
+                            if (!visible)
+                                boltIconLoader.active = false;
+                        }
 
-        sourceComponent: MaterialSymbol {
+                        Behavior on opacity {
-            id: boltIcon
+                            animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
-
+                        }
-            text: "bolt"
+                    }
-            iconSize: Appearance.font.pixelSize.large
+                    StyledText {
-            color: Appearance.m3colors.m3onSecondaryContainer
+                        Layout.alignment: Qt.AlignVCenter
-            visible: opacity > 0 // Only show when charging
+                        font: batteryProgress.font
-            opacity: isCharging ? 1 : 0 // Keep opacity for visibility
+                        text: batteryProgress.text
-            onVisibleChanged: {
+                    }
-                if (!visible)
+                }
-                    boltIconLoader.active = false;
-            }
-
-            Behavior on opacity {
-                animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
             }
         }
     }

.config/quickshell/ii/modules/common/widgets/ClippedProgressBar.qml

@@ -0,0 +1,80 @@
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.common.widgets
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import Quickshell.Widgets
+import Qt5Compat.GraphicalEffects
+
+/**
+ * A progress bar with both ends rounded and text acts as clipping like OneUI 7's battery indicator.
+ */
+ProgressBar {
+    id: root
+    property real valueBarWidth: 30
+    property real valueBarHeight: 18
+    property color highlightColor: Appearance?.colors.colPrimary ?? "#685496"
+    property color trackColor: ColorUtils.transparentize(highlightColor, 0.3) ?? "#F1D3F9"
+    property alias radius: contentItem.radius
+    property string text
+    default property Item textMask: Item {
+        width: valueBarWidth
+        height: valueBarHeight
+        StyledText {
+            anchors.centerIn: parent
+            font: root.font
+            text: root.text
+        }
+    }
+
+    text: Math.round(value * 100)
+    font {
+        pixelSize: 13
+        weight: text.length > 2 ? Font.Medium : Font.DemiBold
+    }
+
+    background: Item {
+        implicitHeight: valueBarHeight
+        implicitWidth: valueBarWidth
+    }
+
+    contentItem: Rectangle {
+        id: contentItem
+        anchors.fill: parent
+        radius: 9999
+        color: root.trackColor
+        visible: false
+
+        Rectangle {
+            anchors {
+                left: parent.left
+                top: parent.top
+                bottom: parent.bottom
+            }
+            width: parent.width * root.visualPosition
+            color: root.highlightColor
+        }
+    }
+
+    OpacityMask {
+        id: roundingMask
+        visible: false
+        anchors.fill: parent
+        source: contentItem
+        maskSource: Rectangle {
+            width: contentItem.width
+            height: contentItem.height
+            radius: contentItem.radius
+        }
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        source: roundingMask
+        invert: true
+        maskSource: root.textMask
+    }
+}