diff options
| -rw-r--r-- | mobile-widgets/qml/TemplateComboBox.qml | 77 |
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 + } + } } |