mobile/UI: correctly theme combo boxes

Again, the fact that you basically need to completely reimplement the
ComboBox in order to change some colors is frustrating.

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

1 files changed, 77 insertions, 0 deletions

diff --git a/mobile-widgets/qml/TemplateComboBox.qml b/mobile-widgets/qml/TemplateComboBox.qml
index 4ebaa7584..c5190e3ab 100644
--- a/mobile-widgets/qml/TemplateComboBox.qml
+++ b/mobile-widgets/qml/TemplateComboBox.qml
@@ -5,8 +5,85 @@ import QtQuick.Layouts 1.11
 import org.kde.kirigami 2.4 as Kirigami
 
 ComboBox {
+	id: cb
 	Layout.fillWidth: true
 	Layout.preferredHeight: Kirigami.Units.gridUnit * 2.5
 	inputMethodHints: Qt.ImhNoPredictiveText
 	font.pointSize: subsurfaceTheme.regularPointSize
+	delegate: ItemDelegate {
+		width: cb.width
+		contentItem: Text {
+			text: modelData
+			color: subsurfaceTheme.textColor
+			font: cb.font
+			elide: Text.ElideRight
+			verticalAlignment: Text.AlignVCenter
+		}
+		highlighted: cb.highlightedIndex === index
+	}
+
+	indicator: Canvas {
+		id: canvas
+		x: cb.width - width - cb.rightPadding
+		y: cb.topPadding + (cb.availableHeight - height) / 2
+		width: Kirigami.Units.gridUnit
+		height: width * 0.66
+		contextType: "2d"
+
+		Connections {
+			target: cb
+			function onPressedChanged() { canvas.requestPaint(); }
+		}
+
+		onPaint: {
+			context.reset();
+			context.moveTo(0, 0);
+			context.lineTo(width, 0);
+			context.lineTo(width / 2, height);
+			context.closePath();
+			context.fillStyle = subsurfaceTheme.textColor;
+			context.fill();
+		}
+	}
+
+	contentItem: Text {
+		leftPadding: Kirigami.Units.smallSpacing
+		rightPadding: cb.indicator.width + cb.spacing
+		text: cb.displayText
+		font: cb.font
+		color: subsurfaceTheme.textColor
+		verticalAlignment: Text.AlignVCenter
+		elide: Text.ElideRight
+	}
+
+	background: Rectangle {
+		implicitWidth: cb.width
+		implicitHeight: cb.height
+		border.color: subsurfaceTheme.darkerPrimaryColor
+		border.width: cb.visualFocus ? 2 : 1
+		color: subsurfaceTheme.backgroundColor
+		radius: 2
+	}
+
+	popup: Popup {
+		y: cb.height - 1
+		width: cb.width
+		implicitHeight: contentItem.implicitHeight
+		padding: 1
+
+		contentItem: ListView {
+			clip: true
+			implicitHeight: contentHeight
+			model: cb.popup.visible ? cb.delegateModel : null
+			currentIndex: cb.highlightedIndex
+
+			ScrollIndicator.vertical: ScrollIndicator { }
+		}
+
+		background: Rectangle {
+			border.color: subsurfaceTheme.darkerPrimaryColor
+			color: subsurfaceTheme.backgroundColor
+			radius: 2
+		}
+	}
 }