Possibly size Combobox correctly

TeroStyle/ComboBox.qml

@@ -1,31 +1,35 @@
 import QtQuick
 import QtQuick.Templates as T
 import QtQuick.Controls
+import QtQuick.Controls.impl
 
 T.ComboBox {
     id: control
 
     font: Typography.body
-    implicitHeight: background.height
+    implicitHeight: implicitContentHeight + topInset + bottomInset
-    padding: Dimensions.m
 
     background: Rectangle {
         border.color: Colors.interactive
         border.width: 1
         color: Colors.mantle
-        height: 47
+        height: parent.height
         radius: Dimensions.radius
+        width: parent.width
     }
     contentItem: T.TextField {
         autoScroll: control.editable
         color: Colors.foreground
         enabled: control.editable
         font: Typography.body
+        implicitHeight: Typography.body.pointSize + topPadding + bottomPadding
         inputMethodHints: control.inputMethodHints
+        padding: Dimensions.m
         readOnly: control.down
         selectByMouse: control.selectTextByMouse
         text: control.editable ? control.editText : control.displayText
         validator: control.validator
+        width: control.width - indicator.width
     }
     delegate: MenuItem {
         id: menuItem
@@ -44,29 +48,44 @@ T.ComboBox {
             width: menuItem.width
         }
     }
-    indicator: Label {
+    indicator: Rectangle {
-        height: control.height
+        id: indicator
-        horizontalAlignment: Text.AlignHCenter
-        padding: Dimensions.s
-        text: "▼"
-        verticalAlignment: Text.AlignVCenter
-        width: contentWidth + Dimensions.s * 2
-        x: control.width - width
 
-        background: Rectangle {
-            anchors.fill: parent
         border.color: Colors.interactive
         bottomRightRadius: Dimensions.radius
         color: Colors.primary
+        height: control.height
         topRightRadius: Dimensions.radius
+        width: 20 + Dimensions.s * 2
+        x: control.width - width
+        y: 0
+        z: 2
+
+        IconLabel {
+            anchors.fill: parent
+            bottomPadding: Dimensions.s
+            icon.color: Colors.foreground
+            icon.source: "qrc:/images/ChevronDown.svg"
+            leftPadding: Dimensions.s
+            rightPadding: Dimensions.s
+            topPadding: Dimensions.s
+        }
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+
+            onPressed: () => {
+                control.popup.visible = true;
+                control.popup.focus = true
+            }
         }
     }
     popup: T.Popup {
-        width: control.width
-        height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
-        topMargin: 6
         bottomMargin: 6
+        height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
         padding: 1
+        topMargin: 6
+        width: control.width
 
         background: Rectangle {
             border.color: Colors.interactive
@@ -79,8 +98,8 @@ T.ComboBox {
             implicitHeight: contentHeight
             model: control.popup.visible ? control.delegateModel : null
 
-            T.ScrollBar.vertical: ScrollBar { }
+            T.ScrollBar.vertical: ScrollBar {
-
+            }
             highlight: Rectangle {
                 color: Colors.primary
                 opacity: Colors.highlightOpacity

pyqcrm.qrc

@@ -7,6 +7,7 @@
         <file>images/filter.svg</file>
         <file>images/menu.svg</file>
         <file>images/search.svg</file>
+        <file>images/ChevronDown.svg</file>
         <file>sounds/error.ogg</file>
         <file>sounds/fail2c.ogg</file>
         <file>sounds/puzzerr.ogg</file>