app/resources/qml/components/StateIndicator.qml

import QtQuick 2.0

Rectangle {
    id: control

    property color successColor: "green"
    property color warningColor: "orange"
    property color errorColor: "red"
    property color unknownColor: "grey"
    property color backgroundColor: "white"

    height: app.height * 0.9
    width: height * 0.8

    color: backgroundColor

    border.width: Math.min(width * 0.1, height * 0.1)
    border.color: "green"
    radius: border.width * 0.5

    state: "success"


    Rectangle {
        id: higherRect

        property int totalWidth: Math.abs(Math.sin(rotation * Math.PI / 180) * (height))
        property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height))

        radius: width * 0.5

        color: "green"

    }

    Rectangle {
        id: lowerRect

        property int totalWidth: Math.abs(Math.sin(rotation * Math.PI / 180) * (height))
        property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height))

        radius: width * 0.5

        color: "green"
    }

    states: [
        State {
            name: "unknown"
            PropertyChanges {
                target: control
                border.color: control.unknownColor
            }

            PropertyChanges {
                target: higherRect

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2

                width: control.border.width
                height: Math.min(parent.width * 0.7, parent.height * 0.7)

                color: control.unknownColor

                rotation: 90
            }

            PropertyChanges {
                target: lowerRect

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2

                width: control.border.width
                height: Math.min(parent.width * 0.7, parent.height * 0.7)

                color: control.unknownColor

                rotation: -90
            }
        },

        State {
            name: "error"
            PropertyChanges {
                target: control
                border.color: control.errorColor
            }

            PropertyChanges {
                target: higherRect

                x: (parent.width - width) / 2
                y: parent.height * 0.15

                width: control.border.width
                height: parent.height * 0.5

                color: control.errorColor
            }

            PropertyChanges {
                target: lowerRect

                x: (parent.width - width) / 2
                y: parent.height - (parent.height * 0.15 + height)

                width: control.border.width * 1.3
                height: width

                color: control.errorColor
            }
        },

        State {
            name: "warn"
            PropertyChanges {
                target: control
                border.color: control.warningColor
            }

            PropertyChanges {
                target: higherRect

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2

                width: control.border.width
                height: Math.min(parent.width * 0.7, parent.height * 0.7)

                color: control.warningColor

                rotation: 45
            }

            PropertyChanges {
                target: lowerRect

                x: (parent.width - width) / 2
                y: (parent.height - height) / 2

                width: control.border.width
                height: Math.min(parent.width * 0.7, parent.height * 0.7)

                color: control.warningColor

                rotation: -45
            }
        },

        State {
            id: tickState

            property int bottomX: (control.width) / 2 - (higherRect.totalWidth - (lowerRect.totalWidth + higherRect.totalWidth) / 2 )
            property int bottomY: (control.height + higherRect.totalHeight) / 2 - lowerRect.radius

            name: "success"

            PropertyChanges {
                      target: control
                      border.color: control.successColor
                  }

            PropertyChanges {
                target: higherRect

                x: tickState.bottomX - width / 2 + (Math.sin(rotation * Math.PI / 180) * (height / 2 - radius))
                y: tickState.bottomY - height / 2 - (Math.cos(rotation * Math.PI / 180) * (height / 2 - radius))

                width: control.border.width
                height: Math.min(parent.width * 0.6, parent.height * 0.6)

                rotation: 40

                color: control.successColor
            }

            PropertyChanges {
                target: lowerRect

                x: tickState.bottomX - width / 2 + (Math.sin(rotation * Math.PI / 180) * (height / 2 - radius))
                y: tickState.bottomY - height / 2 - (Math.cos(rotation * Math.PI / 180) *(height / 2 - radius))

                width: control.border.width
                height: Math.min(parent.width * 0.3, parent.height * 0.3)

                rotation: -40

                color: control.successColor
            }
        }
    ]

    transitions: [
        Transition {
            NumberAnimation {
                properties: "height,width,rotation,x,y"
                duration: 400
                easing.type: Easing.InOutQuad
            }


            ColorAnimation {
                properties: "color,border.color"
                duration: 400
                easing.type: Easing.InOutQuad
            }
        }
    ]

}