feat: use circular gauges for dash resources
Also pause prog indicator wave anim when amplitude == 0
This commit is contained in:
parent
28a84a9611
commit
15498f8786
4 changed files with 41 additions and 58 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue