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 <neolit123@gmail.com>

1 files changed, 41 insertions, 0 deletions

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
+	}
 }