StandardDropdown: Add Flickable and ScrollBar to droplist

This commit adds a Flickable and ScrollBar to the
StandardDropdown component. The use case is for the list
of fiat currencies which is flowing off-screen. Tested on
ASUSTek laptop touchpad.

Fixes: 302490e ("Add additional fiat currencies")
This commit is contained in:
reemuru 2022-03-20 15:24:46 -05:00
parent 002fe8eefa
commit 6778e7261b
No known key found for this signature in database
GPG key ID: 5EDBFEFFA9E9A7AB

View file

@ -146,78 +146,105 @@ ColumnLayout {
padding: 0 padding: 0
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
Rectangle { Flickable {
id: droplist id: flickable
anchors.left: parent.left flickableDirection: Flickable.VerticalFlick
width: dropdown.width
y: head.y + head.height
clip: true clip: true
height: dropdown.expanded ? columnid.height : 0 boundsBehavior: Flickable.StopAtBounds
color: dropdown.pressedColor contentHeight: contentItem.childrenRect.height
contentWidth: contentItem.childrenRect.width
Behavior on height { width: dropdown.width
NumberAnimation { duration: 100; easing.type: Easing.InQuad } height: 240
y: head.height + head.y
flickDeceleration: 35000
onAtYEndChanged: {
if (flickable.atYEnd) {
// hack for getting that last item Flickable seems to hate showing
}
} }
// put a mouse area on the flickable since we don't have access to the previous one
Column { MouseArea {
id: columnid id: dropArea2
anchors.fill: parent
onClicked: dropdown.expanded ? popup.close() : popup.open()
hoverEnabled: true
cursorShape: Qt.ArrowCursor
onPressed: flickable.interactive = false
onReleased: flickable.interactive = true
}
ScrollBar.vertical: ScrollBar {}
Rectangle {
id: droplist
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right width: dropdown.width
anchors.top: parent.top clip: true
property int currentIndex: 0 height: dropdown.expanded ? columnid.height : 0
color: dropdown.pressedColor
Repeater { Behavior on height {
id: repeater NumberAnimation { duration: 100; easing.type: Easing.InQuad }
}
// Workaround for translations in listElements. All translated strings needs to be listed in this file. Column {
property string stringAutomatic: qsTr("Automatic") + translationManager.emptyString id: columnid
property string stringSlow: qsTr("Slow (x0.2 fee)") + translationManager.emptyString anchors.left: parent.left
property string stringNormal: qsTr("Normal (x1 fee)") + translationManager.emptyString anchors.right: parent.right
property string stringFast: qsTr("Fast (x5 fee)") + translationManager.emptyString anchors.top: parent.top
property string stringFastest: qsTr("Fastest (x200 fee)") + translationManager.emptyString property int currentIndex: 0
delegate: Rectangle { Repeater {
anchors.left: parent.left id: repeater
anchors.right: parent.right
height: (dropdown.dropdownHeight * 0.75)
//radius: index === repeater.count - 1 ? 4 : 0
color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
MoneroComponents.TextPlain { // Workaround for translations in listElements. All translated strings needs to be listed in this file.
id: col1Text property string stringAutomatic: qsTr("Automatic") + translationManager.emptyString
anchors.verticalCenter: parent.verticalCenter property string stringSlow: qsTr("Slow (x0.2 fee)") + translationManager.emptyString
property string stringNormal: qsTr("Normal (x1 fee)") + translationManager.emptyString
property string stringFast: qsTr("Fast (x5 fee)") + translationManager.emptyString
property string stringFastest: qsTr("Fastest (x200 fee)") + translationManager.emptyString
delegate: Rectangle {
anchors.left: parent.left anchors.left: parent.left
anchors.right: col2Text.left
anchors.leftMargin: 12
anchors.rightMargin: 0
font.family: MoneroComponents.Style.fontRegular.name
font.bold: false
font.pixelSize: fontItemSize
color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? "#FA6800" : "#FFFFFF"
text: qsTr(column1) + translationManager.emptyString
}
MoneroComponents.TextPlain {
id: col2Text
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 45 height: (dropdown.dropdownHeight * 0.75)
font.family: MoneroComponents.Style.fontRegular.name //radius: index === repeater.count - 1 ? 4 : 0
font.pixelSize: 14 color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? dropdown.releasedColor : dropdown.pressedColor
color: "#FFFFFF"
text: ""
}
MouseArea { MoneroComponents.TextPlain {
id: itemArea id: col1Text
anchors.fill: parent anchors.verticalCenter: parent.verticalCenter
hoverEnabled: true anchors.left: parent.left
cursorShape: Qt.ArrowCursor anchors.right: col2Text.left
anchors.leftMargin: 12
anchors.rightMargin: 0
font.family: MoneroComponents.Style.fontRegular.name
font.bold: false
font.pixelSize: fontItemSize
color: itemArea.containsMouse || index === columnid.currentIndex || itemArea.containsMouse ? "#FA6800" : "#FFFFFF"
text: qsTr(column1) + translationManager.emptyString
}
onClicked: { MoneroComponents.TextPlain {
popup.close() id: col2Text
columnid.currentIndex = index anchors.verticalCenter: parent.verticalCenter
changed(); anchors.right: parent.right
anchors.rightMargin: 45
font.family: MoneroComponents.Style.fontRegular.name
font.pixelSize: 14
color: "#FFFFFF"
text: ""
}
MouseArea {
id: itemArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.ArrowCursor
onClicked: {
popup.close()
columnid.currentIndex = index
changed();
}
} }
} }
} }