mathtrainingstuff/qml/components/GameComboBox.qml

import QtQuick 2.0
import QtQuick.Controls 2.2
import "./"

Item {
    id: root
    property string clickedColor: "#BDBDBD"
    property string normalColor: "#e0e0e0"
    property string color: normalColor
    property int currentIndex: 0
    property var model: ["None", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"]

    onCurrentIndexChanged: popup.close()

    Rectangle {
        color: parent.color
        width: parent.width
        height: parent.height
        TextArea {
            anchors.verticalCenter: parent.verticalCenter
            text: root.model[root.currentIndex]
        }
    }

    MouseArea {
        x: 0
        y: 0
        width: parent.width
        height: parent.height
        onPressed: parent.color = parent.clickedColor
        onReleased: parent.color = parent.normalColor
        onClicked: {
            popup.open()
        }
    }

    Popup {
        id: popup
        x: root.x
        y: root.y
        width: root.width
        height: model.length*root.height
        background: Rectangle {
            color: "#e0e0e0"
            border.width: 5
        }
        Repeater {
            id: repeater
            model: root.model.length
            anchors {
                top: parent.top
                left: parent.left
            }
            Item {
                id: delegate
                anchors {
                    top: parent.top
                    left: parent.left
                }
                Rectangle {
                    width: root.width
                    height: root.height
                    border.width: 5
                    anchors {
                        top: parent.top
                        topMargin: index*root.height
                    }
                    Text {
                        text: "x: " + x + " y: " + y
                    }
                }
                MouseArea {
                    width: root.width
                    height: root.height
                    anchors {
                        top: parent.top
                        topMargin: index*root.height
                    }
                    onClicked: {
                        root.currentIndex = index
                    }
                }
            }
        }

        /*
        ListModel {
            id: weekDayModel
            ListElement {
                weekDay: "Monday"
            }
            ListElement {
                weekDay: "Tuesday"
            }
            ListElement {
                weekDay: "Wednesday"
            }
        }
        ListView {
            width: root.width
            height: root.height
            model: weekDayModel
            delegate: Component {
                Item {
                    width: root.width
                    height: root.height
                    Text {
                        text: weekDay
                    }
                }
            }
            highlight: Rectangle {
                color: "lightsteelblue"
            }
        }
        */
    }
}