bar: battery: shamshung pill style

2025-08-12 21:40:29 +07:00
parent bf4a1097c1
commit a5eb2f0ae6
2 changed files with 112 additions and 59 deletions
@@ -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
+    }
+}