nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: improve dash perf memory card

Browse source
This commit is contained in:
2 * r + 2 * t 2026-04-25 22:28:12 +10:00
parent 3ae676c040
commit 430f9ddd1c
3 changed files with 95 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
modules/dashboard/Performance.qml
View file

@ -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

89
modules/dashboard/performance/MemoryCard.qml Normal file
View file

@ -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
}
}
}

2
modules/dashboard/performance/StorageCard.qml
View file

@ -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