app/qml/components/ConnectionDelegate.qml

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 = "red"
                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" ? "#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: 360 * ( status.progress / 100 )
            colorCircle: "grey"
            onColorCircleChanged: prog.repaint()
            onArcEndChanged: prog.repaint()

            Behavior on opacity {
                NumberAnimation {
                    duration: 200
                }
            }
        }
    }
}