summaryrefslogtreecommitdiffstats
path: root/mobile-widgets/qml/TemplateComboBox.qml
blob: e51c7d0609f1a416bd0094b66ac0a6e892e42c9d (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// 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

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(); }
		}
		// if the theme changes, we need to force a repaint of the indicator
		property color sttc: subsurfaceTheme.textColor
		onSttcChanged: { 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: TextField {
		readOnly: !cb.editable
		anchors.right: indicator.left
		anchors.left: cb.left
		leftPadding: Kirigami.Units.smallSpacing
		rightPadding: Kirigami.Units.smallSpacing
		text: cb.displayText
		font: cb.font
		color: subsurfaceTheme.textColor
		verticalAlignment: Text.AlignVCenter
		onPressed: {
			if (readOnly) {
				if (cb.popup.opened) {
					cb.popup.close()
				} else {
					cb.popup.open()
				}
			}
		}
	}

	background: Rectangle {
		border.color: cb.focus ? subsurfaceTheme.darkerPrimaryColor : subsurfaceTheme.backgroundColor
		border.width: cb.visualFocus ? 2 : 1
		color: Qt.darker(subsurfaceTheme.backgroundColor, 1.1)
		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
		}
	}
}