Merge pull request #62 from quadbyte/battery-widget-rework

Battery widget rework

Bar/Modules/Battery.qml

@@ -1,8 +1,9 @@
 import QtQuick
+import Quickshell
 import Quickshell.Services.UPower
 import QtQuick.Layouts
-import qs.Settings
 import qs.Components
+import qs.Settings
 
 Item {
     id: batteryWidget
@@ -15,61 +16,42 @@ Item {
 
     // Choose icon based on charge and charging state
     function batteryIcon() {
-        if (!show) return "";
+        if (!show)
+            return "";
 
-        // Show charging icons with lightning when charging
+        if (charging)
-        if (charging) {
+            return "battery_android_bolt";
-            if (percent >= 95) return "battery_charging_full";
-            if (percent >= 80) return "battery_charging_80";
-            if (percent >= 60) return "battery_charging_60";
-            if (percent >= 50) return "battery_charging_50";
-            if (percent >= 30) return "battery_charging_30";
-            if (percent >= 20) return "battery_charging_20";
-            return "battery_charging_20"; // Use charging_20 for very low battery
-        }
 
-        // Regular battery icons when not charging
+        if (percent >= 95)
-        if (percent >= 95) return "battery_full";
+           return "battery_android_full";
-        if (percent >= 80) return "battery_80";
+
-        if (percent >= 60) return "battery_60";
+        var step = Math.round(percent / (100 / 6));        
-        if (percent >= 50) return "battery_50";
+        return "battery_android_" + step
-        if (percent >= 30) return "battery_30";
-        if (percent >= 20) return "battery_20";
-        return "battery_alert";
     }
 
     visible: isReady && battery.isLaptopBattery
-    width: 22
+    width: pill.width
-    height: 36
+    height: pill.height
 
-    RowLayout {
+    PillIndicator {
-        anchors.fill: parent
+        id: pill
-        spacing: 4
+        icon: batteryIcon()
-        visible: show
+        text: Math.round(batteryWidget.percent) + "%"
-        Item {
+        pillColor: Theme.surfaceVariant
-            height: 22
+        iconCircleColor: Theme.accentPrimary
-            width: 22
+        textColor: charging ? Theme.accentPrimary : Theme.textPrimary
-            Text {
-                text: batteryIcon()
-                font.family: "Material Symbols Outlined"
-                font.pixelSize: 14
-                color: charging ? Theme.accentPrimary : Theme.textPrimary
-                verticalAlignment: Text.AlignVCenter
-                anchors.centerIn: parent
-            }
         MouseArea {
-                id: batteryMouseArea
             anchors.fill: parent
             hoverEnabled: true
-                onEntered: batteryWidget.containsMouse = true
+            onEntered: {
-                onExited: batteryWidget.containsMouse = false
+                pill.show();
-                cursorShape: Qt.PointingHandCursor
+                batteryTooltip.tooltipVisible = true;
+            }
+            onExited: {
+                pill.hide();
+                batteryTooltip.tooltipVisible = false;
             }
         }
-    }
-
-    property bool containsMouse: false
-
         StyledTooltip {
             id: batteryTooltip
             text: {
@@ -88,8 +70,9 @@ Item {
                 }
                 return lines.join("\n");
             }
-        tooltipVisible: batteryWidget.containsMouse
+            tooltipVisible: false
-        targetItem: batteryWidget
+            targetItem: pill
-        delay: 200
+            delay: 1500
+        }
     }
 }

Bar/Modules/Brightness.qml

@@ -13,6 +13,7 @@ Item {
     property bool isSettingBrightness: false
     property bool hasPendingSet: false
     property int pendingSetValue: -1
+    property bool firstChange: true 
 
     width: pill.width
     height: pill.height
@@ -30,11 +31,17 @@ Item {
                     previousBrightness = brightness
                     brightness = val
                     pill.text = brightness + "%"
+
+                    if (firstChange) {
+                        firstChange = false;
+                    }
+                    else {
                         pill.show()
                     }
                 }
             }
         }
+    }
     
     function getBrightness() {
         if (isSettingBrightness) {
@@ -94,14 +101,19 @@ Item {
         iconCircleColor: Theme.accentPrimary
         iconTextColor: Theme.backgroundPrimary
         textColor: Theme.textPrimary
+        
         MouseArea {
             anchors.fill: parent
             hoverEnabled: true
             onEntered: {
                 getBrightness()
                 brightnessTooltip.tooltipVisible = true
+                pill.show()
+            }
+            onExited: {
+                brightnessTooltip.tooltipVisible = false
+                pill.hide()
             }
-            onExited: brightnessTooltip.tooltipVisible = false
             
             onWheel: function(wheel) {
                 const delta = wheel.angleDelta.y > 0 ? 5 : -5
@@ -114,14 +126,11 @@ Item {
             text: "Brightness: " + brightness + "%"
             tooltipVisible: false
             targetItem: pill
-            delay: 200
+            delay: 1500
         }
     }
 
     Component.onCompleted: {
         getBrightness()
-        if (brightness >= 0) {
-            pill.show()
-        }
     }
 }

Bar/Modules/Volume.qml

@@ -8,6 +8,7 @@ Item {
     id: volumeDisplay
     property var shell
     property int volume: 0
+    property bool firstChange: true
 
     width: pillIndicator.width
     height: pillIndicator.height
@@ -23,13 +24,14 @@ Item {
         iconCircleColor: Theme.accentPrimary
         iconTextColor: Theme.backgroundPrimary
         textColor: Theme.textPrimary
+        autoHide: true
 
         StyledTooltip {
             id: volumeTooltip
             text: "Volume: " + volume + "%\nScroll up/down to change volume.\nLeft click to open the input/output selection."
             tooltipVisible: !ioSelector.visible && volumeDisplay.containsMouse
             targetItem: pillIndicator
-            delay: 200
+            delay: 1500
         }
 
         MouseArea {
@@ -57,16 +59,21 @@ Item {
                     pillIndicator.icon = shell.defaultAudioSink && shell.defaultAudioSink.audio && shell.defaultAudioSink.audio.muted
                         ? "volume_off"
                         : (volume === 0 ? "volume_off" : (volume < 30 ? "volume_down" : "volume_up"));
+
+                    if (firstChange) {
+                        firstChange = false
+                    }
+                    else {
                         pillIndicator.show();
                     }
                 }
             }
         }
+    }
 
     Component.onCompleted: {
         if (shell && shell.volume !== undefined) {
             volume = Math.max(0, Math.min(100, shell.volume));
-            pillIndicator.show();
         }
     }
 
@@ -75,8 +82,16 @@ Item {
         hoverEnabled: true
         acceptedButtons: Qt.NoButton
         propagateComposedEvents: true
-        onEntered: volumeDisplay.containsMouse = true
+        onEntered: {
-        onExited: volumeDisplay.containsMouse = false
+            volumeDisplay.containsMouse = true
+            pillIndicator.autoHide = false;
+            pillIndicator.show()
+        }
+        onExited: {
+            volumeDisplay.containsMouse = false
+            pillIndicator.autoHide = true;
+            pillIndicator.hide()
+        }
         cursorShape: Qt.PointingHandCursor
         onWheel: (wheel) => {
             if (!shell) return;

Components/PillIndicator.qml

@@ -15,6 +15,7 @@ Item {
     property int pillHeight: 22
     property int iconSize: 22
     property int pillPaddingHorizontal: 14
+    property bool autoHide: false
 
     // Internal state
     property bool showPill: false
@@ -24,8 +25,8 @@ Item {
     readonly property int pillOverlap: iconSize / 2
     readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
 
-    signal shown()
+    signal shown
-    signal hidden()
+    signal hidden
 
     width: iconSize + (showPill ? maxPillWidth - pillOverlap : 0)
     height: pillHeight
@@ -54,11 +55,17 @@ Item {
 
         Behavior on width {
             enabled: showAnim.running || hideAnim.running
-            NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
         }
         Behavior on opacity {
             enabled: showAnim.running || hideAnim.running
-            NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
+            NumberAnimation {
+                duration: 250
+                easing.type: Easing.OutCubic
+            }
         }
     }
 
@@ -73,7 +80,10 @@ Item {
         anchors.right: parent.right
 
         Behavior on color {
-            ColorAnimation { duration: 200; easing.type: Easing.InOutQuad }
+            ColorAnimation {
+                duration: 200
+                easing.type: Easing.InOutQuad
+            }
         }
 
         Text {
@@ -106,11 +116,11 @@ Item {
             easing.type: Easing.OutCubic
         }
         onStarted: {
-            showPill = true
+            showPill = true;
         }
         onStopped: {
-            delayedHideAnim.start()
+            delayedHideAnim.start();
-            shown()
+            shown();
         }
     }
 
@@ -118,8 +128,13 @@ Item {
     SequentialAnimation {
         id: delayedHideAnim
         running: false
-        PauseAnimation { duration: 2500 }
+        PauseAnimation {
-        ScriptAction { script: if (shouldAnimateHide) hideAnim.start() }
+            duration: 2500
+        }
+        ScriptAction {
+            script: if (shouldAnimateHide)
+                hideAnim.start()
+        }
     }
 
     // Hide animation
@@ -143,27 +158,27 @@ Item {
             easing.type: Easing.InCubic
         }
         onStopped: {
-            showPill = false
+            showPill = false;
-            shouldAnimateHide = false
+            shouldAnimateHide = false;
-            hidden()
+            hidden();
         }
     }
 
     // Exposed functions
     function show() {
         if (!showPill) {
-            shouldAnimateHide = true
+            shouldAnimateHide = autoHide;
-            showAnim.start()
+            showAnim.start();
         } else {
             // Reset hide timer if already shown
-            hideAnim.stop()
+            hideAnim.stop();
-            delayedHideAnim.restart()
+            delayedHideAnim.restart();
         }
     }
 
     function hide() {
         if (showPill) {
-            hideAnim.start()
+            hideAnim.start();
         }
     }
 }