import QtQuick 2.0 import QtQuick.Controls 2.2 SmoothItemDelegate { id: control property var status property var connect property var disconnect property string type text: qsTr(type) enabled: (status.status === "disconnected" && control.connect !== undefined) || ( status.status === "connected" && control.disconnect !== undefined ) onClicked: { if(status.status === "disconnected"){ connect() if(status.status !== "connected"){ statusIndicator.color_override = "red" shortDelay.start() } } else { disconnect() } } Timer { id: shortDelay running: false repeat: false interval: 1500 onTriggered: { statusIndicator.color_override = "" } } Item { id: statusItem anchors { right: parent.right rightMargin: ( height / control.height / 2 ) * height verticalCenter: parent.verticalCenter } height: control.height * 0.4 width: height Rectangle { id: statusIndicator property string color_override: "" anchors.fill: parent color: color_override === "" ? status.status === "connected" ? "#c1ff32":"transparent":color_override opacity: status.status === "connecting" ? 0:1 radius: height * 0.5 border.color: "grey" border.width: height * 0.1 Behavior on color { ColorAnimation { duration: 200 } } Behavior on opacity { NumberAnimation { duration: 800 } } } ProgressCircle { id: prog anchors.fill: parent opacity: status.status === "connecting" ? 1:0 lineWidth: height * 0.1 arcBegin: 0 arcEnd: 0 colorCircle: "grey" onColorCircleChanged: prog.repaint() Timer { id: prog_refresh running: status.status === "connecting" interval: 1 repeat: true onTriggered: { prog.arcEnd = 360 * ( status.progress / 100 ) } } Behavior on opacity { NumberAnimation { duration: 200 } } } } }