91 lines
3.1 KiB
QML
91 lines
3.1 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
|
|
// ── SysInfoRow ────────────────────────────────────────────────────────────────
|
|
// Metric row with icon badge, label, right-aligned value, and an optional
|
|
// animated progress bar underneath.
|
|
Item {
|
|
id: root
|
|
|
|
property string icon: ""
|
|
property string label: ""
|
|
property string value: "—"
|
|
property color iconColor: "#ffffffff"
|
|
property color dimColor: "#997a8996"
|
|
property color textColor: "#ffe8eef2"
|
|
property bool showBar: false
|
|
property int barPct: 0 // 0-100
|
|
property color barColor: iconColor
|
|
property color trackColor: "#15ffffff"
|
|
|
|
implicitHeight: col.implicitHeight
|
|
implicitWidth: col.implicitWidth
|
|
|
|
ColumnLayout {
|
|
id: col
|
|
anchors { left: parent.left; right: parent.right }
|
|
spacing: 5
|
|
|
|
// ── Label row ─────────────────────────────────────────────────────────
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 10
|
|
|
|
// Icon in a tinted pill badge
|
|
Rectangle {
|
|
width: 18; height: 18
|
|
radius: 4
|
|
color: Qt.alpha(root.iconColor, 0.15)
|
|
Layout.alignment: Qt.AlignVCenter
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: root.icon
|
|
color: root.iconColor
|
|
font.pixelSize: 12
|
|
}
|
|
}
|
|
|
|
Text {
|
|
text: root.label
|
|
color: root.dimColor
|
|
font.pixelSize: 12
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignVCenter
|
|
}
|
|
|
|
Text {
|
|
text: root.value
|
|
color: root.textColor
|
|
font.pixelSize: 12
|
|
font.weight: Font.Medium
|
|
Layout.alignment: Qt.AlignVCenter
|
|
}
|
|
}
|
|
|
|
// ── Progress bar (optional) ───────────────────────────────────────────
|
|
Rectangle {
|
|
visible: root.showBar
|
|
Layout.fillWidth: true
|
|
height: 3
|
|
radius: 2
|
|
color: root.trackColor
|
|
|
|
Rectangle {
|
|
width: parent.width * Math.max(0, Math.min(root.barPct, 100)) / 100
|
|
height: parent.height
|
|
radius: parent.radius
|
|
color: root.barColor
|
|
|
|
// smooth fill transitions on data refresh
|
|
Behavior on width {
|
|
NumberAnimation { duration: 800; easing.type: Easing.OutCubic }
|
|
}
|
|
Behavior on color {
|
|
ColorAnimation { duration: 300 }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|