feat: use circular gauges for dash resources

Also pause prog indicator wave anim when amplitude == 0
This commit is contained in:
2 * r + 2 * t 2026-04-23 23:31:24 +10:00
parent 28a84a9611
commit 15498f8786
4 changed files with 41 additions and 58 deletions

View file

@ -23,7 +23,7 @@ Item {
property bool wavy: false
property alias waveFrequency: wave.frequency
property alias waveAmplitude: wave.amplitudeMultiplier
property alias wavePaused: waveProgAnim.paused
property bool wavePaused
property alias waveDuration: waveProgAnim.duration
readonly property real size: Math.min(width, height)
@ -86,6 +86,7 @@ Item {
id: waveProgAnim
running: true
paused: root.wavePaused || wave.amplitudeMultiplier === 0
from: 0
to: 1
duration: 2000

View file

@ -220,6 +220,8 @@ ProgressBar {
}
component Wave: WavyLine {
id: wave
anchors.verticalCenter: parent.verticalCenter
implicitHeight: lineWidth * amplitudeMultiplier * 2 + lineWidth
@ -232,7 +234,7 @@ ProgressBar {
Anim on waveProgress {
running: true
paused: root.wavePaused
paused: wave.amplitudeMultiplier === 0 || root.wavePaused
from: 0
to: 1
duration: root.waveDuration

View file

@ -1,87 +1,67 @@
import QtQuick
import QtQuick.Layouts
import Caelestia.Config
import qs.components
import qs.components.controls
import qs.components.misc
import qs.services
Row {
Item {
id: root
anchors.top: parent.top
anchors.bottom: parent.bottom
padding: Tokens.padding.large
spacing: Tokens.spacing.medium
implicitWidth: layout.implicitWidth + layout.anchors.margins * 2
Ref {
service: SystemUsage
}
ColumnLayout {
id: layout
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.margins: Tokens.padding.large
spacing: Tokens.spacing.medium
Resource {
icon: "memory"
value: SystemUsage.cpuPerc
colour: Colours.palette.m3primary
}
Resource {
icon: "memory_alt"
value: SystemUsage.memPerc
colour: Colours.palette.m3secondary
fgColour: Colours.palette.m3tertiary
}
Resource {
icon: "hard_disk"
value: SystemUsage.storagePerc
colour: Colours.palette.m3tertiary
fgColour: Colours.palette.m3secondary
}
component Resource: Item {
}
component Resource: CircularProgress {
id: res
required property string icon
required property real value
required property color colour
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.margins: Tokens.padding.large
implicitWidth: icon.implicitWidth
Layout.fillHeight: true
implicitSize: height
strokeWidth: Tokens.sizes.dashboard.resourceProgressThickness
StyledRect {
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.bottom: icon.top
anchors.bottomMargin: Tokens.spacing.small
implicitWidth: Tokens.sizes.dashboard.resourceProgressThickness
color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
radius: Tokens.rounding.full
StyledRect {
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
implicitHeight: res.value * parent.height
color: res.colour
radius: Tokens.rounding.full
}
Behavior on value {
Anim {}
}
MaterialIcon {
id: icon
anchors.bottom: parent.bottom
anchors.centerIn: parent
text: res.icon
color: res.colour
}
Behavior on value {
Anim {
type: Anim.StandardLarge
}
font: Tokens.font.icon.large
color: res.fgColour
}
}
}

View file

@ -185,7 +185,7 @@ class DashboardTokens : public ConfigObject {
CONFIG_PROPERTY(int, mediaWidth, 200)
CONFIG_PROPERTY(int, mediaProgressSweep, 180)
CONFIG_PROPERTY(int, mediaProgressThickness, 6)
CONFIG_PROPERTY(int, resourceProgressThickness, 10)
CONFIG_PROPERTY(int, resourceProgressThickness, 6)
CONFIG_PROPERTY(int, weatherWidth, 275)
CONFIG_PROPERTY(int, mediaCoverArtSize, 150)
CONFIG_PROPERTY(int, mediaVisualiserSize, 80)