monero-gui/components/SearchInput.qml
2014-07-11 00:18:36 +02:00

192 lines
5.8 KiB
QML

import QtQuick 2.0
Item {
id: item
signal searchClicked(string text, int option)
height: 50
Rectangle {
anchors.fill: parent
color: "#DBDBDB"
radius: 4
}
Rectangle {
anchors.fill: parent
anchors.topMargin: 1
color: "#FFFFFF"
radius: 4
Item {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
width: 45
Image {
anchors.centerIn: parent
source: "../images/magnifier.png"
}
}
Input {
id: input
anchors.left: parent.left
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: dropdown.left
anchors.leftMargin: 45
verticalAlignment: TextInput.AlignVCenter
placeholderText: qsTr("Search by...")
}
Item {
id: dropdown
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: button.left
width: 154
function hide() { droplist.height = 0 }
function containsPoint(px, py) {
if(px < 0)
return false
if(px > width)
return false
if(py < 0)
return false
if(py > height + droplist.height)
return false
return true
}
Row {
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
Text {
id: dropText
width: 114 - 12
anchors.verticalCenter: parent.verticalCenter
font.family: "Arial"
font.pixelSize: 12
font.bold: true
font.letterSpacing: -1
color: "#4A4747"
text: "NAME"
}
Image {
anchors.verticalCenter: parent.verticalCenter
source: "../images/hseparator.png"
}
Item {
height: dropdown.height
width: 38
Image {
id: dropIndicator
anchors.centerIn: parent
source: "../images/dropIndicator.png"
rotation: droplist.height === 0 ? 0 : 180
}
}
}
MouseArea {
anchors.fill: parent
onClicked: {
if(droplist.height === 0) {
appWindow.currentItem = dropdown
droplist.height = dropcolumn.height
} else {
droplist.height = 0
}
}
}
}
Rectangle {
id: droplist
property int currentOption: 0
width: 154
height: 0
clip: true
x: dropdown.x
y: dropdown.height
color: "#FFFFFF"
Behavior on height {
NumberAnimation { duration: 100; easing.type: Easing.InQuad }
}
ListModel {
id: dropdownModel
ListElement { name: "NAME" }
ListElement { name: "DESCRIPTION" }
ListElement { name: "ADDRESS" }
}
Column {
id: dropcolumn
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
Repeater {
model: dropdownModel
delegate: Rectangle {
property bool isCurrent: name === dropText.text
anchors.left: parent.left
anchors.right: parent.right
height: 30
color: delegateArea.pressed || isCurrent ? "#4A4646" : "#FFFFFF"
Text {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: parent.right
elide: Text.ElideRight
anchors.leftMargin: 12
anchors.rightMargin: 12
font.family: "Arial"
font.bold: true
font.letterSpacing: -1
font.pixelSize: 12
color: delegateArea.pressed || parent.isCurrent ? "#FFFFFF" : "#4A4646"
text: name
}
MouseArea {
id: delegateArea
anchors.fill: parent
onClicked: {
droplist.currentOption = index
droplist.height = 0
dropText.text = name
}
}
}
}
}
}
StandardButton {
id: button
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
anchors.margins: 6
width: 80
shadowReleasedColor: "#C60F00"
shadowPressedColor: "#8C0B00"
pressedColor: "#C60F00"
releasedColor: "#FF4F41"
text: qsTr("SEARCH")
onClicked: item.searchClicked(input.text, droplist.currentOption)
}
}
}