Style Combobox

2025-03-14 11:57:17 +01:00
parent ef77e4c17d
commit 9ff0a0fbce
12 changed files with 84 additions and 17 deletions
--- a/TeroStyle/ComboBox.qml
+++ b/TeroStyle/ComboBox.qml
@@ -0,0 +1,75 @@
+import QtQuick
+import QtQuick.Templates as T
+import QtQuick.Controls
+
+T.ComboBox {
+    id: control
+
+    font: Typography.body
+    implicitHeight: background.height
+    padding: Dimensions.m
+
+    background: Rectangle {
+        border.color: Colors.interactive
+        border.width: 1
+        color: Colors.mantle
+        height: 47
+        radius: Dimensions.radius
+    }
+
+    delegate: T.ItemDelegate {
+        width: control.width
+        height: implicitContentHeight + topPadding + bottomPadding
+        padding: Dimensions.s
+        leftPadding: control.leftPadding
+        contentItem: Label {
+            text: control.textRole ? model[control.textRole] : modelData
+            color: Colors.foreground
+            elide: Text.ElideRight
+            verticalAlignment: Text.AlignVCenter
+        }
+        highlighted: control.highlightedIndex === index
+    }
+    indicator: Label {
+        x: control.width - width
+        height: control.height
+        width: contentWidth + Dimensions.s * 2
+        text: "▼"
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        padding: Dimensions.s
+
+        background:  Rectangle {
+            anchors.fill: parent
+            color: Colors.primary
+            topRightRadius: Dimensions.radius
+            bottomRightRadius: Dimensions.radius
+            border.color: Colors.interactive
+        }
+    }
+
+    popup: T.Popup {
+        y: control.height
+        z: 2
+        width: control.width
+        contentItem: ListView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.popup.visible ? control.delegateModel : null
+            currentIndex: control.highlightedIndex
+
+            highlight: Rectangle {
+                color: Colors.primary
+                opacity: Colors.highlightOpacity
+            }
+
+            ScrollIndicator.vertical: ScrollIndicator {}
+        }
+
+        background: Rectangle {
+            color: Colors.mantle
+            border.color: Colors.interactive
+            radius: Dimensions.radius
+        }
+    }
+}