mapwidgetcontextmenu: add a model delegate for the ListView

The ListView delegate is a simple Component with a parent Rectangle.
It contains a text field with the ListView action.

This patch also defines some properties for the delegate animations
and looks. The property maxItemWidth tracks the width of all item
text, and makes the width of all items be of that value.

The above prevents potential issues when a fixed width item is used
and some translated language string cannot be fit inside of it.

Signed-off-by: Lubomir I. Ivanov <neolit123@gmail.com>

1 files changed, 33 insertions, 0 deletions

diff --git a/mobile-widgets/qml/MapWidgetContextMenu.qml b/mobile-widgets/qml/MapWidgetContextMenu.qml
index 1c384d7d4..f40c192f9 100644
--- a/mobile-widgets/qml/MapWidgetContextMenu.qml
+++ b/mobile-widgets/qml/MapWidgetContextMenu.qml
@@ -45,4 +45,37 @@ Item {
 				append(menuItemData[i]);
 		}
 	}
+
+	property real maxItemWidth: 0.0
+	readonly property real itemTextPadding: 10.0
+	readonly property real itemHeight: 30.0
+	readonly property int itemAnimationDuration: 100
+	readonly property color colorItemBackground: "#dedede"
+	readonly property color colorItemBackgroundSelected: "grey"
+	readonly property color colorItemText: "black"
+	readonly property color colorItemTextSelected: "#dedede"
+	readonly property color colorItemBorder: "black"
+
+	Component {
+		id: listItemDelegate
+		Rectangle {
+			color: model.idx === listModel.selectedIdx ? colorItemBackgroundSelected : colorItemBackground
+			width: maxItemWidth
+			height: itemHeight
+			border.color: colorItemBorder
+			Text {
+				x: itemTextPadding
+				height: itemHeight
+				verticalAlignment: Text.AlignVCenter
+				text: model.itemText
+				color: model.idx === listModel.selectedIdx ? colorItemTextSelected : colorItemText
+				onWidthChanged: {
+					if (width + itemTextPadding * 2.0 > maxItemWidth)
+						maxItemWidth = width + itemTextPadding * 2.0
+				}
+				Behavior on color { ColorAnimation { duration: itemAnimationDuration }}
+			}
+			Behavior on color { ColorAnimation { duration: itemAnimationDuration }}
+		}
+	}
 }