diff options
Diffstat (limited to 'modules/lock')
| -rw-r--r-- | modules/lock/Content.qml | 6 | ||||
| -rw-r--r-- | modules/lock/Resources.qml | 148 |
2 files changed, 153 insertions, 1 deletions
diff --git a/modules/lock/Content.qml b/modules/lock/Content.qml index 5bf0ee8..f74f2d9 100644 --- a/modules/lock/Content.qml +++ b/modules/lock/Content.qml @@ -69,11 +69,15 @@ RowLayout { StyledRect { Layout.fillWidth: true - Layout.fillHeight: true + implicitHeight: resources.implicitHeight topRightRadius: Appearance.rounding.large radius: Appearance.rounding.small color: Colours.tPalette.m3surfaceContainer + + Resources { + id: resources + } } StyledRect { diff --git a/modules/lock/Resources.qml b/modules/lock/Resources.qml new file mode 100644 index 0000000..473dfe3 --- /dev/null +++ b/modules/lock/Resources.qml @@ -0,0 +1,148 @@ +import qs.components +import qs.components.misc +import qs.services +import qs.config +import QtQuick +import QtQuick.Layouts +import QtQuick.Shapes + +GridLayout { + id: root + + anchors.left: parent.left + anchors.right: parent.right + anchors.margins: Appearance.padding.large + + rowSpacing: Appearance.spacing.large + columnSpacing: Appearance.spacing.large + rows: 2 + columns: 2 + + Ref { + service: SystemUsage + } + + Resource { + Layout.topMargin: Appearance.padding.large + icon: "memory" + value: SystemUsage.cpuPerc + colour: Colours.palette.m3primary + } + + Resource { + Layout.topMargin: Appearance.padding.large + icon: "thermostat" + value: Math.min(1, SystemUsage.cpuTemp / 90) + colour: Colours.palette.m3secondary + } + + Resource { + Layout.bottomMargin: Appearance.padding.large + icon: "memory_alt" + value: SystemUsage.memPerc + colour: Colours.palette.m3secondary + } + + Resource { + Layout.bottomMargin: Appearance.padding.large + icon: "hard_disk" + value: SystemUsage.storagePerc + colour: Colours.palette.m3tertiary + } + + component Resource: StyledRect { + id: res + + required property string icon + required property real value + required property color colour + + readonly property int thickness: Appearance.padding.normal + readonly property real arcRadius: (width - Appearance.padding.large * 3 - thickness) / 2 + readonly property real vValue: value || 1 / 360 + readonly property real gapAngle: ((Appearance.spacing.small + thickness) / (arcRadius || 1)) * (180 / Math.PI) + + Layout.fillWidth: true + implicitHeight: width + + color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2) + radius: Appearance.rounding.large + + Shape { + anchors.fill: parent + preferredRendererType: Shape.CurveRenderer + + ShapePath { + fillColor: "transparent" + strokeColor: Colours.layer(Colours.palette.m3surfaceContainerHighest, 3) + strokeWidth: res.thickness + capStyle: ShapePath.RoundCap + + PathAngleArc { + startAngle: -90 + 360 * res.vValue + res.gapAngle + sweepAngle: 360 * (1 - res.vValue) - res.gapAngle * 2 + radiusX: res.arcRadius + radiusY: res.arcRadius + centerX: res.width / 2 + centerY: res.width / 2 + } + + Behavior on strokeColor { + ColorAnimation { + duration: Appearance.anim.durations.large + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + } + + ShapePath { + fillColor: "transparent" + strokeColor: res.colour + strokeWidth: res.thickness + capStyle: ShapePath.RoundCap + + PathAngleArc { + startAngle: -90 + sweepAngle: 360 * res.vValue + radiusX: res.arcRadius + radiusY: res.arcRadius + centerX: res.width / 2 + centerY: res.width / 2 + } + + Behavior on strokeColor { + ColorAnimation { + duration: Appearance.anim.durations.large + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + } + } + + MaterialIcon { + id: icon + + anchors.centerIn: parent + text: res.icon + color: res.colour + font.pointSize: (parent.width / 4) || 1 + font.weight: 600 + } + + Behavior on value { + NumberAnimation { + duration: Appearance.anim.durations.large + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } + } + } + + component Anim: ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.standard + } +} |