marcin
10 years ago
parent
9256e5dfac
commit
f4279a9800
@ -0,0 +1,233 @@
|
||||
import QtQuick 2.0
|
||||
|
||||
Item {
|
||||
id: dropdown
|
||||
property string shadowPressedColor
|
||||
property string shadowReleasedColor
|
||||
property string pressedColor
|
||||
property string releasedColor
|
||||
property string textColor: "#FFFFFF"
|
||||
property alias currentIndex: column.currentIndex
|
||||
property bool expanded: false
|
||||
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 + droplist.height)
|
||||
return false
|
||||
return true
|
||||
}
|
||||
|
||||
Item {
|
||||
id: head
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
height: 37
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: parent.height - 1
|
||||
y: dropdown.expanded || droplist.height > 0 ? 0 : 1
|
||||
color: dropdown.expanded || droplist.height > 0 ? dropdown.shadowPressedColor : dropdown.shadowReleasedColor
|
||||
radius: 4
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: parent.height - 1
|
||||
y: dropdown.expanded || droplist.height > 0 ? 1 : 0
|
||||
color: dropdown.expanded || droplist.height > 0 ? dropdown.pressedColor : dropdown.releasedColor
|
||||
radius: 4
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.bottom: parent.bottom
|
||||
height: 3
|
||||
width: 3
|
||||
color: dropdown.pressedColor
|
||||
visible: dropdown.expanded || droplist.height > 0
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
height: 3
|
||||
width: 3
|
||||
color: dropdown.pressedColor
|
||||
visible: dropdown.expanded || droplist.height > 0
|
||||
}
|
||||
|
||||
Text {
|
||||
id: firstColText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
elide: Text.ElideRight
|
||||
font.family: "Arial"
|
||||
font.bold: true
|
||||
font.pixelSize: 12
|
||||
color: "#FFFFFF"
|
||||
text: repeater.model.get(column.currentIndex).column1
|
||||
}
|
||||
|
||||
Text {
|
||||
id: secondColText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: separator.left
|
||||
anchors.rightMargin: 12
|
||||
width: dropdown.expanded ? w : (separator.x - 12) - (firstColText.x + firstColText.width + 5)
|
||||
font.family: "Arial"
|
||||
font.pixelSize: 12
|
||||
color: "#FFFFFF"
|
||||
text: repeater.model.get(column.currentIndex).column2
|
||||
|
||||
property int w: 0
|
||||
Component.onCompleted: w = implicitWidth
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: separator
|
||||
anchors.right: dropIndicator.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: 18
|
||||
width: 1
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
|
||||
Item {
|
||||
id: dropIndicator
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.right: parent.right
|
||||
width: 32
|
||||
|
||||
Image {
|
||||
anchors.centerIn: parent
|
||||
source: "../images/whiteDropIndicator.png"
|
||||
rotation: dropdown.expanded ? 180 : 0
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: dropArea
|
||||
anchors.fill: parent
|
||||
onClicked: dropdown.expanded = !dropdown.expanded
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: droplist
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: head.bottom
|
||||
clip: true
|
||||
height: dropdown.expanded ? column.height : 0
|
||||
color: dropdown.pressedColor
|
||||
radius: 4
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
width: 3; height: 3
|
||||
color: dropdown.pressedColor
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
width: 3; height: 3
|
||||
color: dropdown.pressedColor
|
||||
}
|
||||
|
||||
Behavior on height {
|
||||
NumberAnimation { duration: 100; easing.type: Easing.InQuad }
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: testModel
|
||||
ListElement { column1: "LOW"; column2: "( fee: 0.0002 )" }
|
||||
ListElement { column1: "MEDIUM"; column2: "( fee: 0.0004 )" }
|
||||
ListElement { column1: "HIGH"; column2: "( fee: 0.0008 )" }
|
||||
}
|
||||
|
||||
Column {
|
||||
id: column
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
property int currentIndex: 0
|
||||
|
||||
Repeater {
|
||||
id: repeater
|
||||
model: testModel
|
||||
|
||||
delegate: Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: 30
|
||||
radius: index === repeater.count - 1 ? 4 : 0
|
||||
color: itemArea.containsMouse || index === column.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
|
||||
|
||||
Text {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.right: col2Text.left
|
||||
anchors.leftMargin: 12
|
||||
anchors.rightMargin: column2.length > 0 ? 12 : 0
|
||||
font.family: "Arial"
|
||||
font.bold: true
|
||||
font.pixelSize: 12
|
||||
color: "#FFFFFF"
|
||||
text: column1
|
||||
}
|
||||
|
||||
Text {
|
||||
id: col2Text
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 45
|
||||
font.family: "Arial"
|
||||
font.pixelSize: 12
|
||||
color: "#FFFFFF"
|
||||
text: column2
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
width: 3; height: 3
|
||||
color: parent.color
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
width: 3; height: 3
|
||||
color: parent.color
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: itemArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
dropdown.expanded = false
|
||||
column.currentIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 462 B |
|
After Width: | Height: | Size: 254 B |
@ -1,5 +1,55 @@
|
||||
import QtQuick 2.0
|
||||
import "../components"
|
||||
|
||||
Rectangle {
|
||||
color: "#0000FF"
|
||||
color: "#F0EEEE"
|
||||
|
||||
Label {
|
||||
id: amountLabel
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.margins: 17
|
||||
text: qsTr("Amount")
|
||||
}
|
||||
|
||||
Label {
|
||||
id: transactionPriority
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 17
|
||||
x: (parent.width - 17) / 2 + 17
|
||||
text: qsTr("Transaction prority")
|
||||
}
|
||||
|
||||
Row {
|
||||
anchors.top: amountLabel.bottom
|
||||
anchors.topMargin: 17
|
||||
width: (parent.width - 17) / 2
|
||||
Item {
|
||||
width: 37
|
||||
height: 37
|
||||
|
||||
Image {
|
||||
anchors.centerIn: parent
|
||||
source: "../images/moneroIcon.png"
|
||||
}
|
||||
}
|
||||
|
||||
LineEdit {
|
||||
placeholderText: qsTr("Amount...")
|
||||
width: parent.width - 37 - 17
|
||||
}
|
||||
}
|
||||
|
||||
StandardDropdown {
|
||||
anchors.top: transactionPriority.bottom
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 17
|
||||
anchors.topMargin: 17
|
||||
anchors.left: transactionPriority.left
|
||||
shadowReleasedColor: "#FF4304"
|
||||
shadowPressedColor: "#B32D00"
|
||||
releasedColor: "#FF6C3C"
|
||||
pressedColor: "#FF4304"
|
||||
z: 1
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue