monero-gui/components/TableDropdown.qml

import QtQuick 2.0

Item {
    id: dropdown
    property bool expanded: false
    signal collapsed()
    signal optionClicked(int index)
    width: 72
    height: 37

    onExpandedChanged: if(expanded) appWindow.currentItem = dropdown
    function hide() { dropdown.expanded = false }
    function containsPoint(px, py) {
        if(px < 0)
            return false
        if(px > width)
            return false
        if(py < 0)
            return false
        if(py > height + dropArea.height)
            return false
        return true
    }

    Item {
        id: head
        anchors.fill: parent

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            height: parent.height - 1
            y: dropdown.expanded || dropArea.height > 0 ? 0 : 1
            radius: 3
            color: dropdown.expanded || dropArea.height > 0 ? "#888888" : "#DBDBDB"
        }

        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            height: parent.height - 1
            y: dropdown.expanded || dropArea.height > 0 ? 1 : 0
            radius: 3
            color: dropdown.expanded || dropArea.height > 0 ? "#DBDBDB" : "#F0EEEE"
        }

        Rectangle {
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            height: 3
            width: 3
            color: "#DBDBDB"
            visible: dropdown.expanded || dropArea.height > 0
        }

        Rectangle {
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            height: 3
            width: 3
            color: "#DBDBDB"
            visible: dropdown.expanded || dropArea.height > 0
        }

        Image {
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 10
            source: "../images/tableOptions.png"
        }

        Rectangle {
            anchors.centerIn: parent
            anchors.horizontalCenterOffset: 1
            height: 23
            width: 1
            color: dropdown.expanded || dropArea.height > 0 ? "#FFFFFF" : "#DBDBDB"
        }

        Image {
            anchors.verticalCenter: parent.verticalCenter
            anchors.right: parent.right
            anchors.rightMargin: 10
            source: "../images/dropIndicator.png"
        }

        MouseArea {
            anchors.fill: parent
            onPressed: dropdown.expanded = !dropdown.expanded
        }
    }

    Item {
        id: dropArea
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: head.bottom
        height: dropdown.expanded ? column.height : 0
        onHeightChanged: if(height === 0) dropdown.collapsed()
        clip: true

        Behavior on height {
            NumberAnimation { duration: 100; easing.type: Easing.InQuad }
        }

        Column {
            id: column
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top

            ListModel {
                id: dataModel
                ListElement { name: "<b>Add to adress book</b>"; icon: "../images/dropdownOption1.png" }
                ListElement { name: "<b>Send to same destination</b>"; icon: "../images/dropdownSend.png" }
                ListElement { name: "<b>Find similar transactions</b>"; icon: "../images/dropdownSearch.png" }
            }

            Repeater {
                id: repeater
                model: dataModel

                delegate: Rectangle {
                    id: delegate
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 30
                    color: delegateArea.containsMouse ? "#F0EEEE" : "#DBDBDB"
                    radius: index === repeater.count - 1 ? 5 : 0

                    Rectangle {
                        anchors.left: parent.left
                        anchors.top: parent.top
                        width: 5
                        height: 5
                        color: delegate.color
                    }

                    Rectangle {
                        anchors.right: parent.right
                        anchors.top: parent.top
                        width: 5
                        height: 5
                        color: delegate.color
                    }

                    Image {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        source: icon
                    }

                    MouseArea {
                        id: delegateArea
                        hoverEnabled: true
                        anchors.fill: parent
                        onEntered: {
                            var pos = rootItem.mapFromItem(delegate, 30, -20)
                            tipItem.text = name
                            tipItem.x = pos.x
                            if(tipItem.height > 30)
                                pos.y -= tipItem.height - 30
                            tipItem.y = pos.y
                            tipItem.visible = true
                        }
                        onExited: tipItem.visible = false
                        onClicked: {
                            dropdown.optionClicked(index)
                            tipItem.visible = false
                            dropdown.expanded = false
                        }
                    }
                }
            }
        }
    }
}