QML UI: replace combobox with custom text field with hints

Signed-off-by: Marco Martin <notmart@gmail.com>

3 files changed, 89 insertions, 22 deletions

diff --git a/mobile-widgets/qml/DiveDetailsEdit.qml b/mobile-widgets/qml/DiveDetailsEdit.qml
index 43432fd60..c5a8318fa 100644
--- a/mobile-widgets/qml/DiveDetailsEdit.qml
+++ b/mobile-widgets/qml/DiveDetailsEdit.qml
@@ -1,7 +1,5 @@
 import QtQuick 2.3
 import QtQuick.Controls 2.0
-import QtQuick.Controls 1.2 as QQC1
-import QtQuick.Controls.Styles 1.2
 import QtQuick.Dialogs 1.2
 import QtQuick.Layouts 1.1
 import org.subsurfacedivelog.mobile 1.0
@@ -161,45 +159,33 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: qsTr("Suit:")
 			}
-			QQC1.ComboBox {
+			HintsTextEdit {
 				id: suitBox
-				editable: true
 				model: diveDetailsListView.currentItem ? diveDetailsListView.currentItem.modelData.dive.suitList : null
 				inputMethodHints: Qt.ImhNoPredictiveText
 				Layout.fillWidth: true
-				style: ComboBoxStyle {
-					dropDownButtonWidth: 0
-				}
 			}
 
 			Kirigami.Label {
 				Layout.alignment: Qt.AlignRight
 				text: qsTr("Buddy:")
 			}
-			QQC1.ComboBox {
+			HintsTextEdit {
 				id: buddyBox
-				editable: true
 				model: diveDetailsListView.currentItem ? diveDetailsListView.currentItem.modelData.dive.buddyList : null
 				inputMethodHints: Qt.ImhNoPredictiveText
 				Layout.fillWidth: true
-				style: ComboBoxStyle {
-					dropDownButtonWidth: 0
-				}
 			}
 
 			Kirigami.Label {
 				Layout.alignment: Qt.AlignRight
 				text: qsTr("Divemaster:")
 			}
-			QQC1.ComboBox {
+			HintsTextEdit {
 				id: divemasterBox
-				editable: true
 				model: diveDetailsListView.currentItem ? diveDetailsListView.currentItem.modelData.dive.divemasterList : null
 				inputMethodHints: Qt.ImhNoPredictiveText
 				Layout.fillWidth: true
-				style: ComboBoxStyle {
-					dropDownButtonWidth: 0
-				}
 			}
 
 			Kirigami.Label {
@@ -216,15 +202,11 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: qsTr("Cylinder:")
 			}
-			QQC1.ComboBox {
+			HintsTextEdit {
 				id: cylinderBox
-				editable: true
 				model: diveDetailsListView.currentItem ? diveDetailsListView.currentItem.modelData.dive.cylinderList : null
 				inputMethodHints: Qt.ImhNoPredictiveText
 				Layout.fillWidth: true
-				style: ComboBoxStyle {
-					dropDownButtonWidth: 0
-				}
 			}
 
 			Kirigami.Label {
diff --git a/mobile-widgets/qml/HintsTextEdit.qml b/mobile-widgets/qml/HintsTextEdit.qml
new file mode 100644
index 000000000..5f066890c
--- /dev/null
+++ b/mobile-widgets/qml/HintsTextEdit.qml
@@ -0,0 +1,84 @@
+import QtQuick 2.6
+import QtQuick.Controls 2.0
+import QtGraphicalEffects 1.0
+import QtQuick.Layouts 1.2
+import org.kde.kirigami 2.0 as Kirigami
+
+TextField {
+	id: root
+	z: focus ? 999 : 0
+	property alias model: hintsView.model
+	property alias currentIndex: hintsView.currentIndex
+	inputMethodHints: Qt.ImhNoPredictiveText
+	onTextChanged: {
+		textUpdateTimer.restart();
+	}
+	Keys.onUpPressed: {
+		hintsView.currentIndex--;
+	}
+	Keys.onDownPressed: {
+		hintsView.currentIndex++;
+	}
+	Timer {
+		id: textUpdateTimer
+		interval: 300
+		onTriggered: {
+			if (root.text.length == 0) {
+				return;
+			}
+			for (var i = 0; i < hintsView.count; ++i) {
+				var m = model[i].match(root.text);
+				if (m !== null && model[i].startsWith(root.text)) {
+					hintsView.currentIndex = i;
+					root.text = model[i];
+					root.select(m[0].length, model[i].length);
+					textUpdateTimer.running = false;
+					break;
+				}
+			}
+		}
+	}
+	Frame {
+		z: 9000
+		y: parent.height
+		visible: root.focus
+		width: root.width
+		leftPadding: 0
+		rightPadding: 0
+		topPadding: 2
+		bottomPadding: 2
+		height: Math.max(Kirigami.Units.gridUnit*4, hintsView.contentHeight + topPadding + bottomPadding)
+		background: Rectangle {
+			color: Kirigami.Theme.backgroundColor
+			radius: 2
+			layer.enabled: true
+			layer.effect: DropShadow {
+				horizontalOffset: 0
+				verticalOffset: 1
+				radius: Kirigami.Units.gridUnit
+				samples: 32
+				color: Qt.rgba(0, 0, 0, 0.5)
+			}
+		}
+		ListView {
+			id: hintsView
+			anchors.fill: parent
+			clip: true
+			onCurrentIndexChanged: root.text = model[currentIndex];
+			
+			delegate: Kirigami.BasicListItem {
+				label: modelData
+				topPadding: 0
+				bottomPadding: 0
+				leftPadding: 0
+				rightPadding: 0
+				implicitHeight: Kirigami.Units.gridUnit*2
+				checked: hintsView.currentIndex == index
+				onClicked: {
+					hintsView.currentIndex = index
+					root.text = modelData
+				}
+			}
+		}
+	}
+}
diff --git a/mobile-widgets/qml/mobile-resources.qrc b/mobile-widgets/qml/mobile-resources.qrc
index a0247acb0..f91d3bd45 100644
--- a/mobile-widgets/qml/mobile-resources.qrc
+++ b/mobile-widgets/qml/mobile-resources.qrc
@@ -10,6 +10,7 @@
 		<file>DiveDetailsView.qml</file>
 		<file>DownloadFromDiveComputer.qml</file>
 		<file>GpsList.qml</file>
+		<file>HintsTextEdit.qml</file>
 		<file>Log.qml</file>
 		<file>ThemeTest.qml</file>
 		<file>StartPage.qml</file>