Files
z-bar-qt/Modules/Resources/Cards/BatteryTank.qml
T

136 lines
2.9 KiB
QML

import QtQuick
import QtQuick.Layouts
import Quickshell.Services.UPower
import ZShell.Config
import qs.Components
import qs.Services
CustomClippingRect {
id: root
property real animPerc: UPower.displayDevice.percentage
color: Colors.palette.m3secondaryContainer
implicitWidth: 120
radius: Tokens.rounding.large
Behavior on animPerc {
Anim {
}
}
Contents {
id: layout
accentColor: Colors.palette.m3primary
anchors.fill: parent
anchors.margins: Tokens.padding.larger
subTextColor: Colors.palette.m3onSurfaceVariant
textColor: Colors.palette.m3onSurface
}
CustomRect {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
clip: true
color: Colors.palette.m3secondary
implicitHeight: parent.height * root.animPerc
radius: Tokens.rounding.extraSmall
Contents {
accentColor: Colors.palette.m3primaryContainer
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.margins: layout.anchors.margins
anchors.right: parent.right
height: layout.height
subTextColor: Colors.palette.m3secondaryContainer
textColor: Colors.palette.m3onSecondary
}
}
component Contents: ColumnLayout {
id: contents
required property color accentColor
readonly property bool charging: [UPowerDeviceState.Charging, UPowerDeviceState.FullyCharged, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state)
required property color subTextColor
required property color textColor
spacing: 0
MaterialIcon {
Layout.leftMargin: -Tokens.padding.extraSmall
color: contents.accentColor
text: "battery_full"
}
CustomText {
Layout.fillWidth: true
color: contents.textColor
text: qsTr("Battery")
}
Item {
Layout.fillHeight: true
}
CustomText {
Layout.alignment: Qt.AlignRight
animate: true
color: contents.subTextColor
text: {
if (UPower.displayDevice.state === UPowerDeviceState.FullyCharged)
return qsTr("Full");
if (contents.charging)
return qsTr("Charging");
const s = UPower.displayDevice.timeToEmpty;
if (s === 0)
return qsTr("...");
const hr = Math.floor(s / 3600);
const min = Math.floor((s % 3600) / 60);
if (hr > 0)
return `${hr}h ${min}m`;
return `${min}m`;
}
}
RowLayout {
Layout.alignment: Qt.AlignRight
Layout.bottomMargin: -Tokens.padding.small
Layout.rightMargin: -Tokens.padding.extraSmall
Layout.topMargin: -Tokens.padding.extraSmall
spacing: Tokens.spacing.extraSmall
MaterialIcon {
color: contents.accentColor
fill: 1
opacity: contents.charging ? 1 : 0
scale: contents.charging ? 1 : 0
text: "bolt"
Behavior on opacity {
Anim {
type: Anim.FastEffects
}
}
Behavior on scale {
Anim {
type: Anim.FastSpatial
}
}
}
CustomText {
color: contents.accentColor
text: `${Math.round(UPower.displayDevice.percentage * 100)}%`
}
}
}
}