app/resources/qml/Components/SelectorPopup.qml

import QtQuick 2.9
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.3

Dialog {
    id: control

    property var dataObj
    property string subTitle: ""
    property int implicitY: parent.height - implicitHeight

    signal selectionFinished(int index, var data)

    parent: Overlay.overlay

    x: 0
    y: parent.height - implicitHeight

    opacity: 1

    width: parent.width
    implicitWidth: width
    contentHeight: Math.min(parent.height * 0.7, implicitContentHeight)
    implicitHeight: contentHeight + topPadding + bottomPadding + header.height
    padding: 30

    modal: true
    focus: true

    title: ""

    header: Column {
        id: selectorPuHeaderCol

        width: control.width
        height: headerSubLa.text !== "" && headerLa.text !== "" ? 73 : 40

        Label {
            id: headerLa

            visible: control.title

            width: selectorPuHeaderCol.width

            elide: "ElideRight"
            padding: control.padding
            bottomPadding: 0
            font.bold: true
            font.pixelSize: 16

            text: control.title

            onLinkActivated: {
                console.log("Opening " + link)
                Qt.openUrlExternally(link)
            }
        }

        Label {
            id: headerSubLa

            visible: control.subTitle

            width: selectorPuHeaderCol.width

            elide: "ElideRight"
            padding: control.padding
            topPadding: 5
            bottomPadding: 0
            font.bold: true
            font.pixelSize: 16

            text: control.subTitle

            onLinkActivated: {
                console.log("Opening " + link)
                Qt.openUrlExternally(link)
            }

        }
    }

    background: Item {
        Rectangle {
            id: backgroundRect
            anchors {
                fill: parent
                bottomMargin: -radius
            }

            radius: control.leftPadding

            color: control.Material.dialogColor
        }
    }

    function appear(dataObj, title, subTitle) {

        if(dataObj.length > 0){
            control.dataObj = dataObj
        }
        else {
            control.dataObj = undefined
        }

        control.title = title
        control.subTitle = subTitle === undefined ? "":subTitle
        control.open()
    }

    enter: Transition {
        NumberAnimation {
            property: "opacity";
            from: 0
            to: 1.0
            easing.type: Easing.Linear
        }

        NumberAnimation {
            property: "y"
            from: control.parent.height - control.implicitHeight * 0.7
            to: control.parent.height - control.implicitHeight
        }
    }

    exit: Transition {
        NumberAnimation {
            property: "opacity";
            from: 1
            to: 0
        }

        NumberAnimation {
            property: "y"
            from: control.parent.height - control.implicitHeight
            to: control.parent.height - control.implicitHeight * 0.7
        }
    }
}