app/SettingsDialog.qml

import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Popup {
    id: root
    x: startButt.x
    y: startButt.y
    width: startButt.width
    height: startButt.height
    modal: false
    enabled: false

    enter: Transition {
        NumberAnimation { properties: "scale"; from: 0; to: 1; duration: 500; easing.type: Easing.InCubic }
    }

    exit: Transition {
        NumberAnimation { properties: "scale"; from: 1; to: 0; duration: 500; easing.type: Easing.OutCubic }
    }

    function delay(delayTime, cb) {
        timer = new Timer();
        timer.interval = delayTime;
        timer.repeat = false;
        //timer.triggered.connect(cb);
        timer.start();
    }

    background: Rectangle {
        radius: width * 0.5
        color: "white"
        border.color: "grey"
        border.width: 1
        Label {
            text: "Options"
            font.pixelSize: headlineUnderline.width * 0.1
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: parent.top
                topMargin: headlineUnderline.anchors.topMargin / 2 - height / 2
            }
        }

        Rectangle {
            id: headlineUnderline
            height: 1
            width: parent.width
            color: "grey"
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
                topMargin: parent.height * 0.15
                rightMargin: parent.radius - Math.sqrt(Math.pow(parent.radius,2)-Math.pow(parent.radius-anchors.topMargin,2))
                leftMargin: parent.radius - Math.sqrt(Math.pow(parent.radius,2)-Math.pow(parent.radius-anchors.topMargin,2))
            }
        }
    }

    ProgressCircle {
        id: prog
        property string text: "connecting.."
        anchors.centerIn: parent
        size: parent.height * 1.03
        //colorCircle: "grey"
        opacity: 0
        lineWidth: 5

        arcBegin: 0
        arcEnd: 0

        Timer {
            running: opacity === 1
            interval: 1
            repeat: true
            onTriggered: {
                prog.arcEnd = 360 * ( _cppBuzzerConn.get("connection_progress") / 100 )
            }
        }

        Label {
            id: content
            text: parent.text
            anchors.centerIn: parent
            font.pixelSize: parent.width * 0.1

        }
    }

    Column {
        id: settings_col
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.right: parent.right

        ItemDelegate {
            id: connect_del
            width: parent.width
            text: _cppBuzzerConn.get("connected")===1 ? "connected to buzzer":"connect to buzzer"
            Timer {
                running: connect_del.scale === 1
                repeat: true
                interval: 10
                onTriggered: {
                    connect_del.text = _cppBuzzerConn.get("connected")===1 ? "connected to buzzer":"connect to buzzer"
                }
            }

            onClicked: {
                root.modal = true
                root.closePolicy = Popup.NoAutoClose
                prog.colorCircle = "grey"
                prog.opacity = 1
                prog.text = "connecting..."

                connect_del.enabled = false

                if(_cppBuzzerConn.connect()){
                    prog.arcEnd = 360
                    prog.colorCircle = "green"
                    prog.text = "success!"
                }
                else {
                    prog.arcEnd = 360
                    prog.colorCircle = "red"
                    prog.colorBackground = "red"
                    prog.text = "error!"
                }

                //make a short delay and go back to normal options
                shortDelay.start()
            }
            Timer {
                id: shortDelay
                running: false
                repeat: false
                interval: 1000
                onTriggered: {
                    connect_del.enabled = true;
                    prog.opacity = 0;
                    root.modal = false;
                    root.closePolicy = Popup.CloseOnPressOutside;
                }
            }
        }
    }
}