monero-gui/components/TableDropdown.qml
2014-07-09 16:18:48 +02:00

156 lines
4.9 KiB
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.fill: parent
anchors.topMargin: dropdown.expanded || dropArea.height > 0 ? 0 : 1
radius: 3
color: dropdown.expanded || dropArea.height > 0 ? "#888888" : "#DBDBDB"
}
Rectangle {
anchors.fill: parent
anchors.bottomMargin: dropdown.expanded || dropArea.height > 0 ? 0 : 1
radius: 3
color: dropdown.expanded || dropArea.height > 0 ? "#DBDBDB" : "#F0EEEE"
}
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
}
}
}
}
}
}
}