import QtQuick 2.0 import QtQuick.Controls 2.2 SmoothItemDelegate { id: control property var status property string oldState: "" 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() } else { disconnect() } } onStatusChanged: { if(oldState !== status.status) { if(status.status === "disconnected" && oldState === "connecting") { statusIndicator.color_override = appTheme.theme.colors.error shortDelay.start() } oldState = status.status } } 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" ? appTheme.theme.colors.success:"transparent":color_override opacity: status.status === "connecting" ? 0:1 radius: height * 0.5 border.color: appTheme.theme.colors.line border.width: 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: 1 arcBegin: 0 arcEnd: 360 * ( status.progress / 100 ) colorCircle: appTheme.theme.colors.line onColorCircleChanged: prog.repaint() onArcEndChanged: prog.repaint() Behavior on opacity { NumberAnimation { duration: 200 } } } } }