Files
dotfiles/quickshell/popouts/BatteryPopout.qml
T
2026-08-11 02:05:46 +02:00

144 lines
4.9 KiB
QML

import QtQuick
import Quickshell
import "root:/config"
import "root:/components"
import "root:/services"
// Charge level, time estimate, draw rate and health.
Popout {
id: root
contentWidth: 310
// Derived: the charge block is a different height from the dial it
// replaced, and the health line comes and goes.
contentHeight: header.height + Theme.padM + readout.height + Theme.padM
+ bar.height + Theme.padM + detailText.implicitHeight + Theme.padL
+ suspendButton.height + Theme.padM * 2
PopoutSurface {
anchors.fill: parent
tone: Battery.tint
PopoutHeader {
id: header
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
title: "Power"
icon: Battery.icon
accent: Battery.tint
subtitle: Battery.charging ? "CHARGING" : (Battery.onBattery ? "ON BATTERY" : "AC")
}
// The dial that used to sit here duplicated the meter below it and was
// the only curve in the shell. The charge is now simply set large, and
// the MeterBar underneath is left to carry the level on its own.
Item {
id: readout
anchors.top: header.bottom
anchors.topMargin: Theme.padM
anchors.left: parent.left
anchors.right: parent.right
height: Math.max(charge.height, detail.height)
Column {
id: charge
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
// No "CHARGE" caption under the number. It landed directly on
// top of the meter, and between the header and a full-width
// charge bar there was nothing left for it to disambiguate.
SplitText {
text: Math.round(Battery.percent) + "%"
pixelSize: Theme.fsHuge
color: Battery.tint
split: 2.5
splitOpacity: 0.7
}
}
Column {
id: detail
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
spacing: Theme.padS
SplitText {
anchors.right: parent.right
horizontalAlignment: Text.AlignRight
text: Battery.timeLabel
pixelSize: Theme.fsBody
split: 1.1
splitOpacity: 0.55
}
Text {
text: Battery.changeRate > 0
? Battery.changeRate.toFixed(1) + " W " + (Battery.charging ? "in" : "draw")
: "idle"
anchors.right: parent.right
horizontalAlignment: Text.AlignRight
color: Theme.subtext
font.family: Theme.fontMono
font.pixelSize: Theme.fsSmall
renderType: Text.NativeRendering
}
Text {
visible: Battery.health > 0
text: "Health " + Math.round(Battery.health) + "%"
anchors.right: parent.right
horizontalAlignment: Text.AlignRight
color: Battery.health < 70 ? Theme.warn : Theme.muted
font.family: Theme.fontMono
font.pixelSize: Theme.fsMicro
renderType: Text.NativeRendering
}
}
}
MeterBar {
id: bar
anchors.top: readout.bottom
anchors.topMargin: Theme.padM
anchors.left: parent.left
anchors.right: parent.right
height: 12
segments: 20
segmentWidth: (width - 19 * 3) / 20
spacing: 3
value: Battery.percent
activeColor: Battery.tint
}
Text {
id: detailText
anchors.top: bar.bottom
anchors.topMargin: Theme.padM
anchors.left: parent.left
anchors.right: parent.right
text: Battery.detail
wrapMode: Text.WordWrap
color: Theme.muted
font.family: Theme.fontMono
font.pixelSize: Theme.fsMicro
renderType: Text.NativeRendering
}
// Follows the detail line rather than being pinned to the bottom of a
// fixed-height panel, which is what left a dead band above it.
P5Button {
id: suspendButton
anchors.top: detailText.bottom
anchors.topMargin: Theme.padL
anchors.left: parent.left
text: "Suspend"
icon: "󰤄"
onClicked: {
root.pinned = false;
Actions.suspend();
}
}
}
}