ui changes

This commit is contained in:
lasan
2026-06-30 18:19:32 +05:30
parent acaddae5ea
commit c61c59dbb8
6 changed files with 169 additions and 90 deletions
+12 -70
View File
@@ -1,18 +1,16 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Shapes
Rectangle {
id: rootItem
// Explicit sizes so parent containers know how to space them
width: 100
height: 130
height: 110 // Reduced slightly since the progress outer bounds are gone
color: "transparent"
// --- CUSTOM ARGUMENTS (PROPERTIES) ---
property string deviceName: "Unknown Device"
property real progressValue: 0.0 // Value between 0.0 and 1.0
property string iconSource: "qrc:icons/smartphone.svg"
ColumnLayout {
@@ -21,85 +19,29 @@ Rectangle {
anchors.right: parent.right
spacing: 5
// --- ICON CONTAINER WITH PROGRESS RINGS ---
// --- ICON CONTAINER ---
Item {
id: iconContainer
implicitWidth: 72
implicitHeight: 72
implicitWidth: 60
implicitHeight: 60
Layout.alignment: Qt.AlignHCenter
// Target angle calculated using the custom dynamic argument
property real targetAngle: 360 * rootItem.progressValue
Behavior on targetAngle {
NumberAnimation {
duration: 300
easing.type: Easing.OutQuad
}
}
// Background Gray Track Ring
Shape {
anchors.fill: parent
layer.enabled: true
layer.samples: 8
antialiasing: true
ShapePath {
strokeColor: "#E0E4E8"
strokeWidth: 4
fillColor: "transparent"
PathAngleArc {
centerX: iconContainer.width / 2
centerY: iconContainer.height / 2
radiusX: 32
radiusY: 32
startAngle: -90
sweepAngle: 360
}
}
}
// Active Progress Ring
Shape {
anchors.fill: parent
layer.enabled: true
layer.samples: 8
antialiasing: true
ShapePath {
strokeColor: "#00658F"
strokeWidth: 4
fillColor: "transparent"
capStyle: ShapePath.RoundCap
PathAngleArc {
centerX: iconContainer.width / 2
centerY: iconContainer.height / 2
radiusX: 32
radiusY: 32
startAngle: -90
sweepAngle: iconContainer.targetAngle
}
}
}
// Icon Circle
// Icon Circle Background
Rectangle {
width: 60
height: 60
anchors.centerIn: parent
id: iconCircle
anchors.fill: parent
color: "#6EA7B6"
radius: 30
radius: width / 2
Button {
id: iconButton
icon.source: rootItem.iconSource
anchors.fill: parent
anchors.margins: 5
icon.color: "white"
icon.height: height
icon.width: width
icon.height: iconCircle.height
icon.width: iconCircle.width
background: Rectangle {
color: "transparent"
}