From 18d910f6a72c07b58da4a042b21993b5b5d0fbbd Mon Sep 17 00:00:00 2001 From: "Lubomir I. Ivanov" Date: Fri, 21 Jul 2017 00:49:31 +0300 Subject: [PATCH] mapwidgetcontextmenu: add the ListView component NOTES: - the ListView object uses lsitItemDelagate to display all elements from the model listModel - onCountChanged() is used to adjust the x position based on the maxItemWidth property which is calculated when the items are populated with text - onVisibleChanged() is used to deselect the last selected item by calling listModel.selectedIdx = -1 - onOpacityChanged() i sued to make sure that the View is hidden if the opacity becomes 0.0 - inside the View there is a MouseAre which obtains the selected item via indexAt(x,y) - there is a Timer with id listViewVisibleTimer, which is called each time the user selects an item from the list and the timer performs a "delayed hide" - a couple of State and a Transition objects are used to preform smooth fade-in / out animation when the ListView is hidden or becomes visible Signed-off-by: Lubomir I. Ivanov --- mobile-widgets/qml/MapWidgetContextMenu.qml | 41 +++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/mobile-widgets/qml/MapWidgetContextMenu.qml b/mobile-widgets/qml/MapWidgetContextMenu.qml index 767697b79..88c75491c 100644 --- a/mobile-widgets/qml/MapWidgetContextMenu.qml +++ b/mobile-widgets/qml/MapWidgetContextMenu.qml @@ -81,4 +81,45 @@ Item { } property int listViewIsVisible: -1 + + ListView { + id: listView + y: contextMenuImage.y + contextMenuImage.height + 10; + width: maxItemWidth; + height: listModel.count * itemHeight + visible: false + opacity: 0.0 + interactive: false + model: listModel + delegate: listItemDelegate + + onCountChanged: x = -maxItemWidth + onVisibleChanged: listModel.selectedIdx = -1 + onOpacityChanged: visible = opacity != 0.0 + + MouseArea { + anchors.fill: parent + onClicked: { + if (opacity < 1.0) + return; + listModel.selectedIdx = listView.indexAt(mouseX, mouseY) + listViewVisibleTimer.restart() + } + } + states: [ + State { when: listViewIsVisible === 1; PropertyChanges { target: listView; opacity: 1.0 }}, + State { when: listViewIsVisible === 0; PropertyChanges { target: listView; opacity: 0.0 }} + ] + transitions: Transition { + NumberAnimation { properties: "opacity"; easing.type: Easing.InOutQuad } + } + } + + Timer { + id: listViewVisibleTimer + running: false + repeat: false + interval: itemAnimationDuration + 50 + onTriggered: listViewIsVisible = 0 + } }