diff --git a/modules/dashboard/Performance.qml b/modules/dashboard/Performance.qml index 9b3c9a69..c6e75d19 100644 --- a/modules/dashboard/Performance.qml +++ b/modules/dashboard/Performance.qml @@ -109,22 +109,6 @@ Item { spacing: Tokens.spacing.medium visible: Config.dashboard.performance.showMemory || Config.dashboard.performance.showStorage || Config.dashboard.performance.showNetwork - GaugeCard { - Layout.minimumWidth: 250 - Layout.preferredHeight: 220 - Layout.fillWidth: !Config.dashboard.performance.showStorage && !Config.dashboard.performance.showNetwork - icon: "memory_alt" - title: qsTr("Memory") - 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}`; - } - accentColor: Colours.palette.m3tertiary - visible: Config.dashboard.performance.showMemory - } - StorageCard { Layout.fillHeight: true visible: Config.dashboard.performance.showStorage @@ -136,6 +120,11 @@ Item { Layout.preferredHeight: 220 visible: Config.dashboard.performance.showNetwork } + + MemoryCard { + Layout.fillHeight: true + visible: Config.dashboard.performance.showMemory + } } } @@ -287,102 +276,6 @@ Item { } } - component ProgressBar: StyledRect { - id: progressBar - - property real value: 0 - property color fgColor: Colours.palette.m3primary - property color bgColor: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2) - property real animatedValue: 0 - - color: bgColor - radius: Tokens.rounding.full - Component.onCompleted: animatedValue = value - onValueChanged: animatedValue = value - - StyledRect { - anchors.left: parent.left - anchors.top: parent.top - anchors.bottom: parent.bottom - width: parent.width * progressBar.animatedValue - color: progressBar.fgColor - radius: Tokens.rounding.full - } - - Behavior on animatedValue { - Anim { - type: Anim.StandardLarge - } - } - } - - component GaugeCard: StyledRect { - id: gaugeCard - - property string icon - property string title - property real percentage: 0 - property string subtitle - property color accentColor: Colours.palette.m3primary - readonly property real arcStartAngle: 0.75 * Math.PI - readonly property real arcSweep: 1.5 * Math.PI - property real animatedPercentage: 0 - - color: Colours.tPalette.m3surfaceContainer - radius: Tokens.rounding.extraLarge - clip: true - Component.onCompleted: animatedPercentage = percentage - onPercentageChanged: animatedPercentage = percentage - - ColumnLayout { - anchors.fill: parent - anchors.margins: Tokens.padding.large - spacing: Tokens.spacing.medium - - CardHeader { - icon: gaugeCard.icon - title: gaugeCard.title - accentColor: gaugeCard.accentColor - } - - Item { - Layout.fillWidth: true - Layout.fillHeight: true - - ArcGauge { - anchors.centerIn: parent - width: Math.min(parent.width, parent.height) - height: width - percentage: gaugeCard.animatedPercentage - accentColor: gaugeCard.accentColor - trackColor: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2) - startAngle: gaugeCard.arcStartAngle - sweepAngle: gaugeCard.arcSweep - } - - StyledText { - anchors.centerIn: parent - text: `${Math.round(gaugeCard.percentage * 100)}%` - font: Tokens.font.body.builders.large.size(28).weight(Font.Medium).build() - color: gaugeCard.accentColor - } - } - - StyledText { - Layout.alignment: Qt.AlignHCenter - text: gaugeCard.subtitle - font: Tokens.font.body.small - color: Colours.palette.m3onSurfaceVariant - } - } - - Behavior on animatedPercentage { - Anim { - type: Anim.StandardLarge - } - } - } - component NetworkCard: StyledRect { id: networkCard diff --git a/modules/dashboard/performance/MemoryCard.qml b/modules/dashboard/performance/MemoryCard.qml new file mode 100644 index 00000000..c4f8a56d --- /dev/null +++ b/modules/dashboard/performance/MemoryCard.qml @@ -0,0 +1,89 @@ +import QtQuick +import QtQuick.Layouts +import Caelestia.Config +import qs.components +import qs.components.controls +import qs.services + +StyledRect { + id: root + + readonly property color accent: Colours.palette.m3tertiary + + color: Colours.tPalette.m3surfaceContainer + radius: Tokens.rounding.medium + + implicitWidth: layout.implicitWidth + Tokens.padding.extraLargeIncreased * 2 + implicitHeight: layout.implicitHeight + Tokens.padding.large * 2 + + ColumnLayout { + id: layout + + anchors.centerIn: parent + spacing: Tokens.spacing.extraSmall + + RowLayout { + Layout.leftMargin: -Tokens.padding.extraSmall + spacing: Tokens.spacing.small + + MaterialIcon { + text: "memory_alt" + fill: 1 + color: root.accent + fontStyle: Tokens.font.icon.builders.medium.weight(Font.DemiBold).build() // DemiBold to fix fill issues + } + + StyledText { + text: qsTr("Memory") + font: Tokens.font.title.medium + } + } + + CircularProgress { + Layout.topMargin: Tokens.spacing.large + Layout.alignment: Qt.AlignHCenter + implicitSize: usageColumn.implicitHeight + thickness + Tokens.padding.largeIncreased * 2 + startAngle: -225 + sweepAngle: 270 + + fgColour: root.accent + value: SystemUsage.memPerc + + Behavior on clampedVal { + Anim {} + } + + ColumnLayout { + id: usageColumn + + anchors.centerIn: parent + anchors.verticalCenterOffset: Tokens.padding.extraSmall + spacing: 0 + + StyledText { + Layout.alignment: Qt.AlignHCenter + text: Math.round(SystemUsage.memPerc * 100) + "%" + font: Tokens.font.title.builders.large.width(90).build() + color: root.accent + } + + StyledText { + Layout.alignment: Qt.AlignHCenter + text: qsTr("Used") + font: Tokens.font.body.small + color: Colours.palette.m3onSurfaceVariant + } + } + } + + StyledText { + Layout.alignment: Qt.AlignHCenter + text: { + const usedFmt = SystemUsage.formatKib(SystemUsage.memUsed); + const totalFmt = SystemUsage.formatKib(SystemUsage.memTotal); + return `${usedFmt.value.toFixed(1)} / ${Math.floor(totalFmt.value)} ${totalFmt.unit}`; + } + font: Tokens.font.body.medium + } + } +} diff --git a/modules/dashboard/performance/StorageCard.qml b/modules/dashboard/performance/StorageCard.qml index c143121d..92b0d7a2 100644 --- a/modules/dashboard/performance/StorageCard.qml +++ b/modules/dashboard/performance/StorageCard.qml @@ -13,7 +13,7 @@ StyledRect { readonly property real percentage: SystemUsage.primaryDisk?.perc ?? 0 color: Colours.tPalette.m3surfaceContainer - radius: Tokens.rounding.extraLarge + radius: Tokens.rounding.extraExtraLarge implicitWidth: layout.implicitWidth + layout.anchors.margins * 2 implicitHeight: layout.implicitHeight + Tokens.padding.large * 2