Battery widget rework
- Convert the icon to a PillIndicator - Better looking horizontal battery icons - PillIndicator now supports conditionnal autoHide
This commit is contained in:
Sébastien Atoch
parent
f9b42c74f2
commit
d35ed0d7bb
2 changed files with 102 additions and 88 deletions
|
|
@ -1,12 +1,13 @@
|
|||
import QtQuick
|
||||
import Quickshell
|
||||
import Quickshell.Services.UPower
|
||||
import QtQuick.Layouts
|
||||
import qs.Settings
|
||||
import qs.Components
|
||||
import qs.Settings
|
||||
|
||||
Item {
|
||||
id: batteryWidget
|
||||
|
||||
|
||||
property var battery: UPower.displayDevice
|
||||
property bool isReady: battery && battery.ready && battery.isLaptopBattery && battery.isPresent
|
||||
property real percent: isReady ? (battery.percentage * 100) : 0
|
||||
|
|
@ -15,81 +16,79 @@ Item {
|
|||
|
||||
// Choose icon based on charge and charging state
|
||||
function batteryIcon() {
|
||||
if (!show) return "";
|
||||
|
||||
// Show charging icons with lightning when charging
|
||||
if (charging) {
|
||||
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) return "battery_full";
|
||||
if (percent >= 80) return "battery_80";
|
||||
if (percent >= 60) return "battery_60";
|
||||
if (percent >= 50) return "battery_50";
|
||||
if (percent >= 30) return "battery_30";
|
||||
if (percent >= 20) return "battery_20";
|
||||
return "battery_alert";
|
||||
if (!show)
|
||||
return "";
|
||||
|
||||
if (charging)
|
||||
return "battery_android_bolt";
|
||||
|
||||
if (percent >= 95)
|
||||
return "battery_android_full";
|
||||
|
||||
var step = Math.round(percent / (100 / 6));
|
||||
return "battery_android_" + step
|
||||
}
|
||||
|
||||
visible: isReady && battery.isLaptopBattery
|
||||
width: 22
|
||||
height: 36
|
||||
width: pill.width
|
||||
height: pill.height
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 4
|
||||
visible: show
|
||||
Item {
|
||||
height: 22
|
||||
width: 22
|
||||
Text {
|
||||
text: batteryIcon()
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 14
|
||||
color: charging ? Theme.accentPrimary : Theme.textPrimary
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
anchors.centerIn: parent
|
||||
PillIndicator {
|
||||
id: pill
|
||||
icon: batteryIcon()
|
||||
text: Math.round(batteryWidget.percent) + "%"
|
||||
pillColor: Theme.surfaceVariant
|
||||
iconCircleColor: Theme.accentPrimary
|
||||
textColor: charging ? Theme.accentPrimary : Theme.textPrimary
|
||||
autoHide: false
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: {
|
||||
pill.show();
|
||||
batteryTooltip.tooltipVisible = true;
|
||||
}
|
||||
MouseArea {
|
||||
id: batteryMouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: batteryWidget.containsMouse = true
|
||||
onExited: batteryWidget.containsMouse = false
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onExited: {
|
||||
pill.hide();
|
||||
batteryTooltip.tooltipVisible = false;
|
||||
}
|
||||
}
|
||||
StyledTooltip {
|
||||
id: batteryTooltip
|
||||
text: {
|
||||
let lines = [];
|
||||
if (batteryWidget.isReady) {
|
||||
lines.push(batteryWidget.charging ? "Charging" : "Discharging");
|
||||
lines.push(Math.round(batteryWidget.percent) + "%");
|
||||
if (batteryWidget.battery.changeRate !== undefined)
|
||||
lines.push("Rate: " + batteryWidget.battery.changeRate.toFixed(2) + " W");
|
||||
if (batteryWidget.battery.timeToEmpty > 0)
|
||||
lines.push("Time left: " + Math.floor(batteryWidget.battery.timeToEmpty / 60) + " min");
|
||||
if (batteryWidget.battery.timeToFull > 0)
|
||||
lines.push("Time to full: " + Math.floor(batteryWidget.battery.timeToFull / 60) + " min");
|
||||
if (batteryWidget.battery.healthPercentage !== undefined)
|
||||
lines.push("Health: " + Math.round(batteryWidget.battery.healthPercentage) + "%");
|
||||
}
|
||||
return lines.join("\n");
|
||||
}
|
||||
tooltipVisible: false
|
||||
targetItem: pill
|
||||
delay: 1500
|
||||
}
|
||||
}
|
||||
|
||||
property bool containsMouse: false
|
||||
|
||||
StyledTooltip {
|
||||
id: batteryTooltip
|
||||
text: {
|
||||
let lines = [];
|
||||
if (batteryWidget.isReady) {
|
||||
lines.push(batteryWidget.charging ? "Charging" : "Discharging");
|
||||
lines.push(Math.round(batteryWidget.percent) + "%");
|
||||
if (batteryWidget.battery.changeRate !== undefined)
|
||||
lines.push("Rate: " + batteryWidget.battery.changeRate.toFixed(2) + " W");
|
||||
if (batteryWidget.battery.timeToEmpty > 0)
|
||||
lines.push("Time left: " + Math.floor(batteryWidget.battery.timeToEmpty / 60) + " min");
|
||||
if (batteryWidget.battery.timeToFull > 0)
|
||||
lines.push("Time to full: " + Math.floor(batteryWidget.battery.timeToFull / 60) + " min");
|
||||
if (batteryWidget.battery.healthPercentage !== undefined)
|
||||
lines.push("Health: " + Math.round(batteryWidget.battery.healthPercentage) + "%");
|
||||
}
|
||||
return lines.join("\n");
|
||||
Timer {
|
||||
id: hideTimer
|
||||
interval: 2000
|
||||
running: true
|
||||
onTriggered: {
|
||||
pill.hide();
|
||||
}
|
||||
tooltipVisible: batteryWidget.containsMouse
|
||||
targetItem: batteryWidget
|
||||
delay: 200
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
if (isReady && battery.isLaptopBattery) {
|
||||
pill.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue