app/resources/qml/Components/SelectorPopup.qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.3

Dialog {
    id: control

    property var dataObj
    property string subTitle: ""

    signal selectionFinished(int index, var data)
    signal linkActivated(string link)

    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: headerLa.height + headerTopSpacerItm.height + (control.subTitle ? headerSubLa.height:0)

        Item {
            id: headerTopSpacerItm
            height: control.padding
            width: parent.width
        }

        MovingLabel {
            id: headerLa

            anchors.horizontalCenter: parent.horizontalCenter
            width: selectorPuHeaderCol.width - control.padding * 2

            font.bold: true
            font.pixelSize: 16

            text: control.title

            onLinkActivated: control.linkActivated(link)
        }

        Label {
            id: headerSubLa

            anchors.horizontalCenter: parent.horizontalCenter
            width: selectorPuHeaderCol.width - control.padding * 2

            wrapMode: Text.Wrap
            topPadding: 5
            bottomPadding: 0
            font.bold: true
            font.pixelSize: 16

            text: control.subTitle

            onLinkActivated: {
                control.linkActivated(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
        }
    }
}