dots-hyprland/.config/quickshell/ii/modules/bar/BatteryIndicator.qml

95 lines
3.1 KiB
QML

import qs.modules.common
import qs.modules.common.widgets
import qs.services
import QtQuick
import QtQuick.Layouts
Item {
id: root
property bool borderless: Config.options.bar.borderless
readonly property var chargeState: Battery.chargeState
readonly property bool isCharging: Battery.isCharging
readonly property bool isPluggedIn: Battery.isPluggedIn
readonly property real percentage: Battery.percentage
readonly property bool isLow: percentage <= Config.options.battery.low / 100
readonly property color batteryLowBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3error : Appearance.m3colors.m3errorContainer
readonly property color batteryLowOnBackground: Appearance.m3colors.darkmode ? Appearance.m3colors.m3errorContainer : Appearance.m3colors.m3error
implicitWidth: rowLayout.implicitWidth + rowLayout.spacing * 2
implicitHeight: 32
RowLayout {
id: rowLayout
spacing: 4
anchors.centerIn: parent
Rectangle {
implicitWidth: (isCharging ? (boltIconLoader?.item?.width ?? 0) : 0)
Behavior on implicitWidth {
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
}
}
StyledText {
Layout.alignment: Qt.AlignVCenter
color: Appearance.colors.colOnLayer1
text: `${Math.round(percentage * 100)}`
}
CircularProgress {
enableAnimation: false
Layout.alignment: Qt.AlignVCenter
lineWidth: 2
value: percentage
size: 26
secondaryColor: (isLow && !isCharging) ? batteryLowBackground : Appearance.colors.colSecondaryContainer
primaryColor: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
fill: (isLow && !isCharging)
MaterialSymbol {
anchors.centerIn: parent
fill: 1
text: "battery_full"
iconSize: Appearance.font.pixelSize.normal
color: (isLow && !isCharging) ? batteryLowOnBackground : Appearance.m3colors.m3onSecondaryContainer
}
}
}
Loader {
id: boltIconLoader
active: true
anchors.left: rowLayout.left
anchors.verticalCenter: rowLayout.verticalCenter
Connections {
target: root
function onIsChargingChanged() {
if (isCharging) boltIconLoader.active = true
}
}
sourceComponent: MaterialSymbol {
id: boltIcon
text: "bolt"
iconSize: Appearance.font.pixelSize.large
color: Appearance.m3colors.m3onSecondaryContainer
visible: opacity > 0 // Only show when charging
opacity: isCharging ? 1 : 0 // Keep opacity for visibility
onVisibleChanged: {
if (!visible) boltIconLoader.active = false
}
Behavior on opacity {
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
}
}
}
}