mobile/UI: improve layout of styled ComboBox and TextField

This makes the TextFields (and the editable ComboBoxes with them) have a
tighter visual experience.

It also moves the indicater closer to the right edge in the ComboBox and
doesn't use preferredWidth for the slim combo box as that implies a
maximum width which could lead to unnecessary clipping.

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

3 files changed, 27 insertions, 2 deletions

diff --git a/mobile-widgets/qml/SsrfTextField.qml b/mobile-widgets/qml/SsrfTextField.qml
index d91e13c2d..083235435 100644
--- a/mobile-widgets/qml/SsrfTextField.qml
+++ b/mobile-widgets/qml/SsrfTextField.qml
@@ -11,9 +11,30 @@ Controls.TextField {
 	property var flickable
 	property bool firstTime: true
 
+	/**
+	 * set inComboBox if the TextField is used in an editable ComboBox
+	 * this ensures that the baseline that is used to visually indicate that the user can
+	 * edit the text as well as use the drop down is placed much closer to the actual text
+	 */
+	property bool inComboBox: false
+
 	id: stf
+	background: Item {
+		Rectangle {
+			width: parent.width - Kirigami.Units.smallSpacing
+			x: inComboBox ? Kirigami.Units.smallSpacing : -1
+			height: 1
+			color: stf.focus ? subsurfaceTheme.primaryColor : Qt.darker(subsurfaceTheme.backgroundColor, 1.2)
+			anchors.bottom: parent.bottom
+			anchors.bottomMargin: inComboBox ? Kirigami.Units.largeSpacing : 1
+			visible: !stf.readOnly
+		}
+	}
 
 	// while we are at it, let's put some common settings here into the shared element
+	font.pointSize: subsurfaceTheme.regularPointSize
+	topPadding: 0
+	bottomPadding: 0
 	color: subsurfaceTheme.textColor
 	onEditingFinished: {
 		focus = false
diff --git a/mobile-widgets/qml/TemplateComboBox.qml b/mobile-widgets/qml/TemplateComboBox.qml
index 82b5fbf9f..10ffdb93e 100644
--- a/mobile-widgets/qml/TemplateComboBox.qml
+++ b/mobile-widgets/qml/TemplateComboBox.qml
@@ -6,10 +6,12 @@ import org.kde.kirigami 2.4 as Kirigami
 
 ComboBox {
 	id: cb
+	editable: false
 	Layout.fillWidth: true
-	Layout.preferredHeight: Kirigami.Units.gridUnit * 2.5
+	Layout.preferredHeight: Kirigami.Units.gridUnit * 2.0
 	inputMethodHints: Qt.ImhNoPredictiveText
 	font.pointSize: subsurfaceTheme.regularPointSize
+	rightPadding: Kirigami.Units.smallSpacing
 	property var flickable // used to ensure the combobox is visible on screen
 	delegate: ItemDelegate {
 		width: cb.width
@@ -49,6 +51,7 @@ ComboBox {
 	}
 
 	contentItem: SsrfTextField {
+		inComboBox: cb.editable
 		readOnly: !cb.editable
 		anchors.right: indicator.left
 		anchors.left: cb.left
@@ -59,6 +62,7 @@ ComboBox {
 		font: cb.font
 		color: subsurfaceTheme.textColor
 		verticalAlignment: Text.AlignVCenter
+
 		onPressed: {
 			if (readOnly) {
 				if (cb.popup.opened) {
diff --git a/mobile-widgets/qml/TemplateSlimComboBox.qml b/mobile-widgets/qml/TemplateSlimComboBox.qml
index 36137770a..896871be1 100644
--- a/mobile-widgets/qml/TemplateSlimComboBox.qml
+++ b/mobile-widgets/qml/TemplateSlimComboBox.qml
@@ -8,7 +8,7 @@ TemplateComboBox {
 	id: cb
 	Layout.fillWidth: false
 	Layout.preferredHeight: Kirigami.Units.gridUnit * 2
-	Layout.preferredWidth: Kirigami.Units.gridUnit * 8
+	Layout.minimumWidth: Kirigami.Units.gridUnit * 8
 	contentItem: Text {
 		text: cb.displayText
 		font.pointSize: subsurfaceTheme.regularPointSize