Zacharias-Brohn
976 lines
26 KiB
QML
976 lines
26 KiB
QML
import Quickshell
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import Quickshell.Services.UPower
|
|
import qs.Components
|
|
import qs.Config
|
|
import qs.Helpers
|
|
|
|
Item {
|
|
id: root
|
|
|
|
readonly property int minWidth: 400 + 400 + Appearance.spacing.normal + 120 + Appearance.padding.large * 2
|
|
readonly property real nonAnimHeight: (placeholder.visible ? placeholder.height : content.implicitHeight) + Appearance.padding.normal * 2
|
|
readonly property real nonAnimWidth: Math.max(minWidth, content.implicitWidth) + Appearance.padding.normal * 2
|
|
required property real padding
|
|
required property PersistentProperties visibilities
|
|
|
|
function displayTemp(temp: real): string {
|
|
return `${Math.ceil(temp)}°C`;
|
|
}
|
|
|
|
implicitHeight: nonAnimHeight
|
|
implicitWidth: nonAnimWidth
|
|
|
|
CustomRect {
|
|
id: placeholder
|
|
|
|
anchors.centerIn: parent
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
height: 350
|
|
radius: Appearance.rounding.large - 10
|
|
visible: false
|
|
width: 400
|
|
|
|
ColumnLayout {
|
|
anchors.centerIn: parent
|
|
spacing: Appearance.spacing.normal
|
|
|
|
MaterialIcon {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.extraLarge * 2
|
|
text: "tune"
|
|
}
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
color: DynamicColors.palette.m3onSurface
|
|
font.pointSize: Appearance.font.size.large
|
|
text: qsTr("No widgets enabled")
|
|
}
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.small
|
|
text: qsTr("Enable widgets in dashboard settings")
|
|
}
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
id: content
|
|
|
|
anchors.left: parent.left
|
|
anchors.leftMargin: root.padding
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: root.padding
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: Appearance.spacing.normal
|
|
visible: !placeholder.visible
|
|
|
|
Ref {
|
|
service: SystemUsage
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: mainColumn
|
|
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.normal
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.normal
|
|
visible: true
|
|
|
|
HeroCard {
|
|
Layout.fillWidth: true
|
|
Layout.minimumWidth: 400
|
|
Layout.preferredHeight: 150
|
|
accentColor: DynamicColors.palette.m3primary
|
|
icon: "memory"
|
|
mainLabel: qsTr("Usage")
|
|
mainValue: `${Math.round(SystemUsage.cpuPerc * 100)}%`
|
|
secondaryLabel: qsTr("Temp")
|
|
secondaryValue: root.displayTemp(SystemUsage.cpuTemp)
|
|
temperature: SystemUsage.cpuTemp
|
|
title: SystemUsage.cpuName ? `CPU - ${SystemUsage.cpuName}` : qsTr("CPU")
|
|
usage: SystemUsage.cpuPerc
|
|
visible: Config.dashboard.performance.showCpu
|
|
}
|
|
|
|
HeroCard {
|
|
Layout.fillWidth: true
|
|
Layout.minimumWidth: 400
|
|
Layout.preferredHeight: 150
|
|
accentColor: DynamicColors.palette.m3secondary
|
|
icon: "desktop_windows"
|
|
mainLabel: qsTr("Usage")
|
|
mainValue: `${Math.round(SystemUsage.gpuPerc * 100)}%`
|
|
secondaryLabel: qsTr("Temp")
|
|
secondaryValue: root.displayTemp(SystemUsage.gpuTemp)
|
|
temperature: SystemUsage.gpuTemp
|
|
title: SystemUsage.gpuName ? `GPU - ${SystemUsage.gpuName}` : qsTr("GPU")
|
|
usage: SystemUsage.gpuPerc
|
|
visible: Config.dashboard.performance.showGpu && SystemUsage.gpuType !== "NONE"
|
|
}
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.normal
|
|
visible: Config.dashboard.performance.showMemory || Config.dashboard.performance.showStorage || Config.dashboard.performance.showNetwork
|
|
|
|
GaugeCard {
|
|
Layout.fillWidth: !Config.dashboard.performance.showStorage && !Config.dashboard.performance.showNetwork
|
|
Layout.minimumWidth: 250
|
|
Layout.preferredHeight: 220
|
|
accentColor: DynamicColors.palette.m3tertiary
|
|
icon: "memory_alt"
|
|
percentage: SystemUsage.memPerc
|
|
subtitle: {
|
|
const usedFmt = SystemUsage.formatKib(SystemUsage.memUsed);
|
|
const totalFmt = SystemUsage.formatKib(SystemUsage.memTotal);
|
|
return `${usedFmt.value.toFixed(1)} / ${Math.floor(totalFmt.value)} ${totalFmt.unit}`;
|
|
}
|
|
title: qsTr("Memory")
|
|
visible: Config.dashboard.performance.showMemory
|
|
}
|
|
|
|
StorageGaugeCard {
|
|
Layout.fillWidth: !Config.dashboard.performance.showNetwork
|
|
Layout.minimumWidth: 250
|
|
Layout.preferredHeight: 220
|
|
visible: Config.dashboard.performance.showStorage
|
|
}
|
|
|
|
NetworkCard {
|
|
Layout.fillWidth: true
|
|
Layout.minimumWidth: 200
|
|
Layout.preferredHeight: 220
|
|
visible: Config.dashboard.performance.showNetwork
|
|
}
|
|
}
|
|
}
|
|
|
|
BatteryTank {
|
|
Layout.preferredHeight: mainColumn.implicitHeight
|
|
Layout.preferredWidth: 120
|
|
visible: UPower.displayDevice.isLaptopBattery && Config.dashboard.performance.showBattery
|
|
}
|
|
}
|
|
|
|
component BatteryTank: CustomClippingRect {
|
|
id: batteryTank
|
|
|
|
property color accentColor: DynamicColors.palette.m3primary
|
|
property real animatedPercentage: 0
|
|
property bool isCharging: UPower.displayDevice.state === UPowerDeviceState.Charging
|
|
property real percentage: UPower.displayDevice.percentage
|
|
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
radius: Appearance.rounding.large - 10
|
|
|
|
Behavior on animatedPercentage {
|
|
Anim {
|
|
duration: Appearance.anim.durations.large
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: animatedPercentage = percentage
|
|
onPercentageChanged: animatedPercentage = percentage
|
|
|
|
// Background Fill
|
|
CustomRect {
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
color: Qt.alpha(batteryTank.accentColor, 0.15)
|
|
height: parent.height * batteryTank.animatedPercentage
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: Appearance.padding.large
|
|
spacing: Appearance.spacing.small
|
|
|
|
// Header Section
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.small
|
|
|
|
MaterialIcon {
|
|
color: batteryTank.accentColor
|
|
font.pointSize: Appearance.font.size.large
|
|
text: {
|
|
if (!UPower.displayDevice.isLaptopBattery) {
|
|
if (PowerProfiles.profile === PowerProfile.PowerSaver)
|
|
return "energy_savings_leaf";
|
|
|
|
if (PowerProfiles.profile === PowerProfile.Performance)
|
|
return "rocket_launch";
|
|
|
|
return "balance";
|
|
}
|
|
if (UPower.displayDevice.state === UPowerDeviceState.FullyCharged)
|
|
return "battery_full";
|
|
|
|
const perc = UPower.displayDevice.percentage;
|
|
const charging = [UPowerDeviceState.Charging, UPowerDeviceState.PendingCharge].includes(UPower.displayDevice.state);
|
|
if (perc >= 0.99)
|
|
return "battery_full";
|
|
|
|
let level = Math.floor(perc * 7);
|
|
if (charging && (level === 4 || level === 1))
|
|
level--;
|
|
|
|
return charging ? `battery_charging_${(level + 3) * 10}` : `battery_${level}_bar`;
|
|
}
|
|
}
|
|
|
|
CustomText {
|
|
Layout.fillWidth: true
|
|
color: DynamicColors.palette.m3onSurface
|
|
font.pointSize: Appearance.font.size.normal
|
|
text: qsTr("Battery")
|
|
}
|
|
}
|
|
|
|
Item {
|
|
Layout.fillHeight: true
|
|
}
|
|
|
|
// Bottom Info Section
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: -4
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignRight
|
|
color: batteryTank.accentColor
|
|
font.pointSize: Appearance.font.size.extraLarge
|
|
font.weight: Font.Medium
|
|
text: `${Math.round(batteryTank.percentage * 100)}%`
|
|
}
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignRight
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.smaller
|
|
text: {
|
|
if (UPower.displayDevice.state === UPowerDeviceState.FullyCharged)
|
|
return qsTr("Full");
|
|
|
|
if (batteryTank.isCharging)
|
|
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`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
component CardHeader: RowLayout {
|
|
property color accentColor: DynamicColors.palette.m3primary
|
|
property string icon
|
|
property string title
|
|
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.small
|
|
|
|
MaterialIcon {
|
|
color: parent.accentColor
|
|
fill: 1
|
|
font.pointSize: Appearance.spacing.large
|
|
text: parent.icon
|
|
}
|
|
|
|
CustomText {
|
|
Layout.fillWidth: true
|
|
elide: Text.ElideRight
|
|
font.pointSize: Appearance.font.size.normal
|
|
text: parent.title
|
|
}
|
|
}
|
|
component GaugeCard: CustomRect {
|
|
id: gaugeCard
|
|
|
|
property color accentColor: DynamicColors.palette.m3primary
|
|
property real animatedPercentage: 0
|
|
readonly property real arcStartAngle: 0.75 * Math.PI
|
|
readonly property real arcSweep: 1.5 * Math.PI
|
|
property string icon
|
|
property real percentage: 0
|
|
property string subtitle
|
|
property string title
|
|
|
|
clip: true
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
radius: Appearance.rounding.large - 10
|
|
|
|
Behavior on animatedPercentage {
|
|
Anim {
|
|
duration: Appearance.anim.durations.large
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: animatedPercentage = percentage
|
|
onPercentageChanged: animatedPercentage = percentage
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: Appearance.padding.large
|
|
spacing: Appearance.spacing.smaller
|
|
|
|
CardHeader {
|
|
accentColor: gaugeCard.accentColor
|
|
icon: gaugeCard.icon
|
|
title: gaugeCard.title
|
|
}
|
|
|
|
Item {
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
|
|
Canvas {
|
|
id: gaugeCanvas
|
|
|
|
anchors.centerIn: parent
|
|
height: width
|
|
width: Math.min(parent.width, parent.height)
|
|
|
|
Component.onCompleted: requestPaint()
|
|
onPaint: {
|
|
const ctx = getContext("2d");
|
|
ctx.reset();
|
|
const cx = width / 2;
|
|
const cy = height / 2;
|
|
const radius = (Math.min(width, height) - 12) / 2;
|
|
const lineWidth = 10;
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, radius, gaugeCard.arcStartAngle, gaugeCard.arcStartAngle + gaugeCard.arcSweep);
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.lineCap = "round";
|
|
ctx.strokeStyle = DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
|
|
ctx.stroke();
|
|
if (gaugeCard.animatedPercentage > 0) {
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, radius, gaugeCard.arcStartAngle, gaugeCard.arcStartAngle + gaugeCard.arcSweep * gaugeCard.animatedPercentage);
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.lineCap = "round";
|
|
ctx.strokeStyle = gaugeCard.accentColor;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
function onAnimatedPercentageChanged() {
|
|
gaugeCanvas.requestPaint();
|
|
}
|
|
|
|
target: gaugeCard
|
|
}
|
|
|
|
Connections {
|
|
function onPaletteChanged() {
|
|
gaugeCanvas.requestPaint();
|
|
}
|
|
|
|
target: DynamicColors
|
|
}
|
|
}
|
|
|
|
CustomText {
|
|
anchors.centerIn: parent
|
|
color: gaugeCard.accentColor
|
|
font.pointSize: Appearance.font.size.extraLarge
|
|
font.weight: Font.Medium
|
|
text: `${Math.round(gaugeCard.percentage * 100)}%`
|
|
}
|
|
}
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.smaller
|
|
text: gaugeCard.subtitle
|
|
}
|
|
}
|
|
}
|
|
component HeroCard: CustomClippingRect {
|
|
id: heroCard
|
|
|
|
property color accentColor: DynamicColors.palette.m3primary
|
|
property real animatedTemp: 0
|
|
property real animatedUsage: 0
|
|
property string icon
|
|
property string mainLabel
|
|
property string mainValue
|
|
readonly property real maxTemp: 100
|
|
property string secondaryLabel
|
|
property string secondaryValue
|
|
readonly property real tempProgress: Math.min(1, Math.max(0, temperature / maxTemp))
|
|
property real temperature: 0
|
|
property string title
|
|
property real usage: 0
|
|
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
radius: Appearance.rounding.large - 10
|
|
|
|
Behavior on animatedTemp {
|
|
Anim {
|
|
duration: Appearance.anim.durations.large
|
|
}
|
|
}
|
|
Behavior on animatedUsage {
|
|
Anim {
|
|
duration: Appearance.anim.durations.large
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: {
|
|
animatedUsage = usage;
|
|
animatedTemp = tempProgress;
|
|
}
|
|
onTempProgressChanged: animatedTemp = tempProgress
|
|
onUsageChanged: animatedUsage = usage
|
|
|
|
CustomRect {
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
color: Qt.alpha(heroCard.accentColor, 0.15)
|
|
width: parent.width * heroCard.animatedUsage
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.bottomMargin: Appearance.padding.normal
|
|
anchors.fill: parent
|
|
anchors.leftMargin: Appearance.padding.large
|
|
anchors.rightMargin: Appearance.padding.large
|
|
anchors.topMargin: Appearance.padding.normal
|
|
spacing: Appearance.spacing.small
|
|
|
|
CardHeader {
|
|
accentColor: heroCard.accentColor
|
|
icon: heroCard.icon
|
|
title: heroCard.title
|
|
}
|
|
|
|
RowLayout {
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.normal
|
|
|
|
Column {
|
|
Layout.alignment: Qt.AlignBottom
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.small
|
|
|
|
Row {
|
|
spacing: Appearance.spacing.small
|
|
|
|
CustomText {
|
|
font.pointSize: Appearance.font.size.normal
|
|
font.weight: Font.Medium
|
|
text: heroCard.secondaryValue
|
|
}
|
|
|
|
CustomText {
|
|
anchors.baseline: parent.children[0].baseline
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.small
|
|
text: heroCard.secondaryLabel
|
|
}
|
|
}
|
|
|
|
ProgressBar {
|
|
bgColor: Qt.alpha(heroCard.accentColor, 0.2)
|
|
fgColor: heroCard.accentColor
|
|
height: 6
|
|
value: heroCard.tempProgress
|
|
width: parent.width * 0.5
|
|
}
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
}
|
|
}
|
|
|
|
Column {
|
|
anchors.margins: Appearance.padding.large
|
|
anchors.right: parent.right
|
|
anchors.rightMargin: 32
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
spacing: 0
|
|
|
|
CustomText {
|
|
anchors.right: parent.right
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.normal
|
|
text: heroCard.mainLabel
|
|
}
|
|
|
|
CustomText {
|
|
anchors.right: parent.right
|
|
color: heroCard.accentColor
|
|
font.pointSize: Appearance.font.size.extraLarge
|
|
font.weight: Font.Medium
|
|
text: heroCard.mainValue
|
|
}
|
|
}
|
|
}
|
|
component NetworkCard: CustomRect {
|
|
id: networkCard
|
|
|
|
property color accentColor: DynamicColors.palette.m3primary
|
|
|
|
clip: true
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
radius: Appearance.rounding.large - 10
|
|
|
|
Ref {
|
|
service: NetworkUsage
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: Appearance.padding.large
|
|
spacing: Appearance.spacing.small
|
|
|
|
CardHeader {
|
|
accentColor: networkCard.accentColor
|
|
icon: "swap_vert"
|
|
title: qsTr("Network")
|
|
}
|
|
|
|
// Sparkline graph
|
|
Item {
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
|
|
Canvas {
|
|
id: sparklineCanvas
|
|
|
|
property int _lastTickCount: -1
|
|
property int _tickCount: 0
|
|
property var downHistory: NetworkUsage.downloadHistory
|
|
property real slideProgress: 0
|
|
property real smoothMax: targetMax
|
|
property real targetMax: 1024
|
|
property var upHistory: NetworkUsage.uploadHistory
|
|
|
|
function checkAndAnimate(): void {
|
|
const currentLength = (downHistory || []).length;
|
|
if (currentLength > 0 && _tickCount !== _lastTickCount) {
|
|
_lastTickCount = _tickCount;
|
|
updateMax();
|
|
}
|
|
}
|
|
|
|
function updateMax(): void {
|
|
const downHist = downHistory || [];
|
|
const upHist = upHistory || [];
|
|
const allValues = downHist.concat(upHist);
|
|
targetMax = Math.max(...allValues, 1024);
|
|
requestPaint();
|
|
}
|
|
|
|
anchors.fill: parent
|
|
|
|
NumberAnimation on slideProgress {
|
|
duration: Config.dashboard.resourceUpdateInterval
|
|
from: 0
|
|
loops: Animation.Infinite
|
|
running: true
|
|
to: 1
|
|
}
|
|
Behavior on smoothMax {
|
|
Anim {
|
|
duration: Appearance.anim.durations.large
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: updateMax()
|
|
onDownHistoryChanged: checkAndAnimate()
|
|
onPaint: {
|
|
const ctx = getContext("2d");
|
|
ctx.reset();
|
|
const w = width;
|
|
const h = height;
|
|
const downHist = downHistory || [];
|
|
const upHist = upHistory || [];
|
|
if (downHist.length < 2 && upHist.length < 2)
|
|
return;
|
|
|
|
const maxVal = smoothMax;
|
|
|
|
const drawLine = (history, color, fillAlpha) => {
|
|
if (history.length < 2)
|
|
return;
|
|
|
|
const len = history.length;
|
|
const stepX = w / (NetworkUsage.historyLength - 1);
|
|
const startX = w - (len - 1) * stepX - stepX * slideProgress + stepX;
|
|
ctx.beginPath();
|
|
ctx.moveTo(startX, h - (history[0] / maxVal) * h);
|
|
for (let i = 1; i < len; i++) {
|
|
const x = startX + i * stepX;
|
|
const y = h - (history[i] / maxVal) * h;
|
|
ctx.lineTo(x, y);
|
|
}
|
|
ctx.strokeStyle = color;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = "round";
|
|
ctx.lineJoin = "round";
|
|
ctx.stroke();
|
|
ctx.lineTo(startX + (len - 1) * stepX, h);
|
|
ctx.lineTo(startX, h);
|
|
ctx.closePath();
|
|
ctx.fillStyle = Qt.rgba(Qt.color(color).r, Qt.color(color).g, Qt.color(color).b, fillAlpha);
|
|
ctx.fill();
|
|
};
|
|
|
|
drawLine(upHist, DynamicColors.palette.m3secondary.toString(), 0.15);
|
|
drawLine(downHist, DynamicColors.palette.m3tertiary.toString(), 0.2);
|
|
}
|
|
onSlideProgressChanged: requestPaint()
|
|
onSmoothMaxChanged: requestPaint()
|
|
onUpHistoryChanged: checkAndAnimate()
|
|
|
|
Connections {
|
|
function onPaletteChanged() {
|
|
sparklineCanvas.requestPaint();
|
|
}
|
|
|
|
target: DynamicColors
|
|
}
|
|
|
|
Timer {
|
|
interval: Config.dashboard.resourceUpdateInterval
|
|
repeat: true
|
|
running: true
|
|
|
|
onTriggered: sparklineCanvas._tickCount++
|
|
}
|
|
}
|
|
|
|
// "No data" placeholder
|
|
CustomText {
|
|
anchors.centerIn: parent
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.small
|
|
opacity: 0.6
|
|
text: qsTr("Collecting data...")
|
|
visible: NetworkUsage.downloadHistory.length < 2
|
|
}
|
|
}
|
|
|
|
// Download row
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.normal
|
|
|
|
MaterialIcon {
|
|
color: DynamicColors.palette.m3tertiary
|
|
font.pointSize: Appearance.font.size.normal
|
|
text: "download"
|
|
}
|
|
|
|
CustomText {
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.small
|
|
text: qsTr("Download")
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
CustomText {
|
|
color: DynamicColors.palette.m3tertiary
|
|
font.pointSize: Appearance.font.size.normal
|
|
font.weight: Font.Medium
|
|
text: {
|
|
const fmt = NetworkUsage.formatBytes(NetworkUsage.downloadSpeed ?? 0);
|
|
return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Upload row
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.normal
|
|
|
|
MaterialIcon {
|
|
color: DynamicColors.palette.m3secondary
|
|
font.pointSize: Appearance.font.size.normal
|
|
text: "upload"
|
|
}
|
|
|
|
CustomText {
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.small
|
|
text: qsTr("Upload")
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
CustomText {
|
|
color: DynamicColors.palette.m3secondary
|
|
font.pointSize: Appearance.font.size.normal
|
|
font.weight: Font.Medium
|
|
text: {
|
|
const fmt = NetworkUsage.formatBytes(NetworkUsage.uploadSpeed ?? 0);
|
|
return fmt ? `${fmt.value.toFixed(1)} ${fmt.unit}` : "0.0 B/s";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Session totals
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Appearance.spacing.normal
|
|
|
|
MaterialIcon {
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.normal
|
|
text: "history"
|
|
}
|
|
|
|
CustomText {
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.small
|
|
text: qsTr("Total")
|
|
}
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
CustomText {
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.small
|
|
text: {
|
|
const down = NetworkUsage.formatBytesTotal(NetworkUsage.downloadTotal ?? 0);
|
|
const up = NetworkUsage.formatBytesTotal(NetworkUsage.uploadTotal ?? 0);
|
|
return (down && up) ? `↓${down.value.toFixed(1)}${down.unit} ↑${up.value.toFixed(1)}${up.unit}` : "↓0.0B ↑0.0B";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
component ProgressBar: CustomRect {
|
|
id: progressBar
|
|
|
|
property real animatedValue: 0
|
|
property color bgColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2)
|
|
property color fgColor: DynamicColors.palette.m3primary
|
|
property real value: 0
|
|
|
|
color: bgColor
|
|
radius: Appearance.rounding.full
|
|
|
|
Behavior on animatedValue {
|
|
Anim {
|
|
duration: Appearance.anim.durations.large
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: animatedValue = value
|
|
onValueChanged: animatedValue = value
|
|
|
|
CustomRect {
|
|
anchors.bottom: parent.bottom
|
|
anchors.left: parent.left
|
|
anchors.top: parent.top
|
|
color: progressBar.fgColor
|
|
radius: Appearance.rounding.full
|
|
width: parent.width * progressBar.animatedValue
|
|
}
|
|
}
|
|
component StorageGaugeCard: CustomRect {
|
|
id: storageGaugeCard
|
|
|
|
property color accentColor: DynamicColors.palette.m3secondary
|
|
property real animatedPercentage: 0
|
|
readonly property real arcStartAngle: 0.75 * Math.PI
|
|
readonly property real arcSweep: 1.5 * Math.PI
|
|
readonly property var currentDisk: SystemUsage.disks.length > 0 ? SystemUsage.disks[currentDiskIndex] : null
|
|
property int currentDiskIndex: 0
|
|
property int diskCount: 0
|
|
|
|
clip: true
|
|
color: DynamicColors.tPalette.m3surfaceContainer
|
|
radius: Appearance.rounding.large - 10
|
|
|
|
Behavior on animatedPercentage {
|
|
Anim {
|
|
duration: Appearance.anim.durations.large
|
|
}
|
|
}
|
|
|
|
Component.onCompleted: {
|
|
diskCount = SystemUsage.disks.length;
|
|
if (currentDisk)
|
|
animatedPercentage = currentDisk.perc;
|
|
}
|
|
onCurrentDiskChanged: {
|
|
if (currentDisk)
|
|
animatedPercentage = currentDisk.perc;
|
|
}
|
|
|
|
// Update diskCount and animatedPercentage when disks data changes
|
|
Connections {
|
|
function onDisksChanged() {
|
|
if (SystemUsage.disks.length !== storageGaugeCard.diskCount)
|
|
storageGaugeCard.diskCount = SystemUsage.disks.length;
|
|
|
|
// Update animated percentage when disk data refreshes
|
|
if (storageGaugeCard.currentDisk)
|
|
storageGaugeCard.animatedPercentage = storageGaugeCard.currentDisk.perc;
|
|
}
|
|
|
|
target: SystemUsage
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
|
|
onWheel: wheel => {
|
|
if (wheel.angleDelta.y > 0)
|
|
storageGaugeCard.currentDiskIndex = (storageGaugeCard.currentDiskIndex - 1 + storageGaugeCard.diskCount) % storageGaugeCard.diskCount;
|
|
else if (wheel.angleDelta.y < 0)
|
|
storageGaugeCard.currentDiskIndex = (storageGaugeCard.currentDiskIndex + 1) % storageGaugeCard.diskCount;
|
|
}
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: Appearance.padding.large
|
|
spacing: Appearance.spacing.smaller
|
|
|
|
CardHeader {
|
|
accentColor: storageGaugeCard.accentColor
|
|
icon: "hard_disk"
|
|
title: {
|
|
const base = qsTr("Storage");
|
|
if (!storageGaugeCard.currentDisk)
|
|
return base;
|
|
|
|
return `${base} - ${storageGaugeCard.currentDisk.mount}`;
|
|
}
|
|
|
|
// Scroll hint icon
|
|
MaterialIcon {
|
|
ToolTip.delay: 500
|
|
ToolTip.text: qsTr("Scroll to switch disks")
|
|
ToolTip.visible: hintHover.hovered
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.normal
|
|
opacity: 0.7
|
|
text: "unfold_more"
|
|
visible: storageGaugeCard.diskCount > 1
|
|
|
|
HoverHandler {
|
|
id: hintHover
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
Layout.fillHeight: true
|
|
Layout.fillWidth: true
|
|
|
|
Canvas {
|
|
id: storageGaugeCanvas
|
|
|
|
anchors.centerIn: parent
|
|
height: width
|
|
width: Math.min(parent.width, parent.height)
|
|
|
|
Component.onCompleted: requestPaint()
|
|
onPaint: {
|
|
const ctx = getContext("2d");
|
|
ctx.reset();
|
|
const cx = width / 2;
|
|
const cy = height / 2;
|
|
const radius = (Math.min(width, height) - 12) / 2;
|
|
const lineWidth = 10;
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, radius, storageGaugeCard.arcStartAngle, storageGaugeCard.arcStartAngle + storageGaugeCard.arcSweep);
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.lineCap = "round";
|
|
ctx.strokeStyle = DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHigh, 2);
|
|
ctx.stroke();
|
|
if (storageGaugeCard.animatedPercentage > 0) {
|
|
ctx.beginPath();
|
|
ctx.arc(cx, cy, radius, storageGaugeCard.arcStartAngle, storageGaugeCard.arcStartAngle + storageGaugeCard.arcSweep * storageGaugeCard.animatedPercentage);
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.lineCap = "round";
|
|
ctx.strokeStyle = storageGaugeCard.accentColor;
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
|
|
Connections {
|
|
function onAnimatedPercentageChanged() {
|
|
storageGaugeCanvas.requestPaint();
|
|
}
|
|
|
|
target: storageGaugeCard
|
|
}
|
|
|
|
Connections {
|
|
function onPaletteChanged() {
|
|
storageGaugeCanvas.requestPaint();
|
|
}
|
|
|
|
target: DynamicColors
|
|
}
|
|
}
|
|
|
|
CustomText {
|
|
anchors.centerIn: parent
|
|
color: storageGaugeCard.accentColor
|
|
font.pointSize: Appearance.font.size.extraLarge
|
|
font.weight: Font.Medium
|
|
text: storageGaugeCard.currentDisk ? `${Math.round(storageGaugeCard.currentDisk.perc * 100)}%` : "—"
|
|
}
|
|
}
|
|
|
|
CustomText {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
color: DynamicColors.palette.m3onSurfaceVariant
|
|
font.pointSize: Appearance.font.size.smaller
|
|
text: {
|
|
if (!storageGaugeCard.currentDisk)
|
|
return "—";
|
|
|
|
const usedFmt = SystemUsage.formatKib(storageGaugeCard.currentDisk.used);
|
|
const totalFmt = SystemUsage.formatKib(storageGaugeCard.currentDisk.total);
|
|
return `${usedFmt.value.toFixed(1)} / ${Math.floor(totalFmt.value)} ${totalFmt.unit}`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|