Merge pull request #69 from quadbyte/lockscreen-battery-indicator

LockScreen: Added a battery indicator

Widgets/LockScreen/BatteryCharge.qml

@@ -0,0 +1,75 @@
+import QtQuick
+import Quickshell
+import Quickshell.Services.UPower
+import QtQuick.Layouts
+import qs.Components
+import qs.Settings
+
+Item {
+    // Test mode
+    property bool testMode: false
+    property int testPercent: 49
+    property bool testCharging: true
+
+    property var battery: UPower.displayDevice
+    property bool isReady: testMode ? true : (battery && battery.ready && battery.isLaptopBattery && battery.isPresent)
+    property real percent: testMode ? testPercent : (isReady ? (battery.percentage * 100) : 0)
+    property bool charging: testMode ? testCharging : (isReady ? battery.state === UPowerDeviceState.Charging : false)
+    property bool show: isReady && percent > 0
+
+    width: row.width
+    height: row.height
+    visible: testMode || (isReady && battery.isLaptopBattery)
+
+    // Choose icon based on charge and charging state
+    function batteryIcon() {
+        if (!show)
+            return "";
+
+        if (charging)
+            return "battery_android_bolt";
+
+        if (percent >= 95)
+            return "battery_android_full";
+
+        // Hardcoded battery symbols
+        if (percent >= 85)
+            return "battery_android_6";
+        if (percent >= 70)
+            return "battery_android_5";
+        if (percent >= 55)
+            return "battery_android_4";
+        if (percent >= 40)
+            return "battery_android_3";
+        if (percent >= 25)
+            return "battery_android_2";
+        if (percent >= 10)
+            return "battery_android_1";
+        if (percent >= 0)
+            return "battery_android_0";
+    }
+
+    RowLayout {
+        id: row
+        spacing: 6
+        Layout.alignment: Qt.AlignHCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+
+        Text {
+            text: batteryIcon()
+            font.family: "Material Symbols Outlined"
+            font.pixelSize: 28
+            color: charging ? Theme.accentPrimary : Theme.textSecondary
+            verticalAlignment: Text.AlignVBottom
+        }
+
+        Text {
+            text: Math.round(percent) + "%"
+            font.family: Theme.fontFamily
+            font.pixelSize: 18
+            color: Theme.textSecondary
+            verticalAlignment: Text.AlignVBottom
+        }
+
+    }
+}

Widgets/LockScreen/LockScreen.qml

@@ -7,10 +7,11 @@ import Quickshell.Wayland
 import Quickshell
 import Quickshell.Services.Pam
 import Quickshell.Io
+import qs.Components
 import qs.Settings
 import qs.Services
-import qs.Components
+import qs.Widgets.LockScreen
-import "../Helpers/Weather.js" as WeatherHelper
+import "../../Helpers/Weather.js" as WeatherHelper
 
 WlSessionLock {
     id: lock
@@ -315,7 +316,7 @@ WlSessionLock {
             position: "bottomleft"
             size: 1.3
             fillColor: (Theme.backgroundPrimary !== undefined && Theme.backgroundPrimary !== null) ? Theme.backgroundPrimary : "#222"
-            offsetX: screen.width / 2 + 30
+            offsetX: screen.width / 2 + 38
             offsetY: 0
             anchors.top: parent.top
             visible: Settings.settings.showCorners
@@ -327,7 +328,7 @@ WlSessionLock {
             position: "bottomright"
             size: 1.3
             fillColor: (Theme.backgroundPrimary !== undefined && Theme.backgroundPrimary !== null) ? Theme.backgroundPrimary : "#222"
-            offsetX: - Screen.width / 2 - 30
+            offsetX: - Screen.width / 2 - 38
             offsetY: 0
             anchors.top: parent.top
             visible: Settings.settings.showCorners
@@ -335,7 +336,7 @@ WlSessionLock {
         }
 
         Rectangle {
-            width: infoColumn.width + 32
+            width: infoColumn.width + 16
             height: infoColumn.height + 8
             color: (Theme.backgroundPrimary !== undefined && Theme.backgroundPrimary !== null) ? Theme.backgroundPrimary : "#222"
             anchors.horizontalCenter: parent.horizontalCenter
@@ -347,6 +348,7 @@ WlSessionLock {
                 anchors.top: parent.top
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.topMargin: 0
+                anchors.bottomMargin: 0
                 spacing: 8
 
                 Text {
@@ -402,6 +404,7 @@ WlSessionLock {
                     horizontalAlignment: Text.AlignHCenter
                     Layout.alignment: Qt.AlignHCenter
                 }
+
             }
         }
 
@@ -424,6 +427,17 @@ WlSessionLock {
             }
         }
 
+        ColumnLayout {
+            anchors.left: parent.left
+            anchors.bottom: parent.bottom
+            anchors.margins: 32
+            spacing: 12             
+
+            BatteryCharge {
+            }
+        }
+
+
         ColumnLayout {
             anchors.right: parent.right
             anchors.bottom: parent.bottom

Widgets/Sidebar/Panel/System.qml

@@ -6,6 +6,7 @@ import Quickshell
 import Quickshell.Io
 import qs.Settings
 import qs.Widgets
+import qs.Widgets.LockScreen
 import qs.Helpers
 import qs.Services
 import qs.Components

shell.qml

@@ -7,6 +7,7 @@ import QtCore
 import qs.Bar
 import qs.Bar.Modules
 import qs.Widgets
+import qs.Widgets.LockScreen
 import qs.Widgets.Notification
 import qs.Settings
 import qs.Helpers