mobile/UI: add template for editable combo box

This makes the code easier to read and manage.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>

3 files changed, 31 insertions, 40 deletions

diff --git a/mobile-widgets/qml/DiveDetailsEdit.qml b/mobile-widgets/qml/DiveDetailsEdit.qml
index d885a54fd..d605d2919 100644
--- a/mobile-widgets/qml/DiveDetailsEdit.qml
+++ b/mobile-widgets/qml/DiveDetailsEdit.qml
@@ -154,14 +154,10 @@ Item {
 				Layout.alignment: Qt.AlignRight
 				text: qsTr("Location:")
 			}
-			TemplateComboBox {
+			TemplateEditComboBox {
 				id: locationBox
-				editable: true
-				flat: true
 				model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
-					manager.locationList : null
-				inputMethodHints: Qt.ImhNoPredictiveText
-				Layout.fillWidth: true
+					       manager.locationList : null
 				onAccepted: {
 					focus = false
 					gpsText = manager.getGpsFromSiteName(editText)
@@ -261,20 +257,10 @@ Item {
 				font.pointSize: subsurfaceTheme.smallPointSize
 				color: subsurfaceTheme.textColor
 			}
-			TemplateComboBox {
+			TemplateEditComboBox  {
 				id: suitBox
-				editable: true
-				flat: true
 				model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
-					manager.suitList : null
-				inputMethodHints: Qt.ImhNoPredictiveText
-				Layout.fillWidth: true
-				onActivated: {
-					focus = false
-				}
-				onAccepted: {
-					focus = false
-				}
+					       manager.suitList : null
 			}
 
 			Controls.Label {
@@ -283,19 +269,10 @@ Item {
 				font.pointSize: subsurfaceTheme.smallPointSize
 				color: subsurfaceTheme.textColor
 			}
-			TemplateComboBox {
+			TemplateEditComboBox {
 				id: buddyBox
-				editable: true
 				model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
-					manager.buddyList : null
-				inputMethodHints: Qt.ImhNoPredictiveText
-				Layout.fillWidth: true
-				onActivated: {
-					focus = false
-				}
-				onAccepted: {
-					focus = false
-				}
+					       manager.buddyList : null
 			}
 
 			Controls.Label {
@@ -304,19 +281,10 @@ Item {
 				font.pointSize: subsurfaceTheme.smallPointSize
 				color: subsurfaceTheme.textColor
 			}
-			TemplateComboBox {
+			TemplateEditComboBox {
 				id: divemasterBox
-				editable: true
 				model: diveDetailsListView.currentItem && diveDetailsListView.currentItem.modelData !== null ?
-					manager.divemasterList : null
-				inputMethodHints: Qt.ImhNoPredictiveText
-				Layout.fillWidth: true
-				onActivated: {
-					focus = false
-				}
-				onAccepted: {
-					focus = false
-				}
+					       manager.divemasterList : null
 			}
 
 			Controls.Label {
diff --git a/mobile-widgets/qml/TemplateEditComboBox.qml b/mobile-widgets/qml/TemplateEditComboBox.qml
new file mode 100644
index 000000000..0019d04f2
--- /dev/null
+++ b/mobile-widgets/qml/TemplateEditComboBox.qml
@@ -0,0 +1,22 @@
+// SPDX-License-Identifier: GPL-2.0
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.11
+import org.kde.kirigami 2.4 as Kirigami
+
+// this reuses our themed combo box, but makes it editable and behave consistently
+// for the dive edit page - this reduces redundant code on that page
+TemplateComboBox {
+	id: ecb
+	editable: true
+	inputMethodHints: Qt.ImhNoPredictiveText
+	onActivated: {
+		focus = false
+	}
+	onAccepted: {
+		focus = false
+	}
+	onEditTextChanged: { // this allows us to set the initial text in DiveDetails / startEditMode()
+		displayText = editText
+	}
+}
diff --git a/mobile-widgets/qml/mobile-resources.qrc b/mobile-widgets/qml/mobile-resources.qrc
index 78b5f2ed3..debafd80b 100644
--- a/mobile-widgets/qml/mobile-resources.qrc
+++ b/mobile-widgets/qml/mobile-resources.qrc
@@ -4,6 +4,7 @@
 		<file>TemplateButton.qml</file>
 		<file>TemplateCheckBox.qml</file>
 		<file>TemplateComboBox.qml</file>
+		<file>TemplateEditComboBox.qml</file>
 		<file>TemplateLabel.qml</file>
 		<file>TemplateLabelSmall.qml</file>
 		<file>TemplateLine.qml</file>