ComboBox: prepare the internal layouts for editable combos

The text field of an editable ComboBox must cover the whole control
excluding the indicator button. This ensures that user interaction
works as expected over the whole editor area (there must be no "dead"
paddings), and that the whole editor area gets the appropriate caret
or ibeam mouse cursor.

Previously, the indicator was laid out inside/over the content item.
To help with getting the layout right, this change injects empty
padding into the indicator images of the Universal and Material styles
(the Default style already had padding).

Task-number: QTBUG-53876
Change-Id: I62e10ffb7f5ed4559523513f04ff7e2ea0e57ef5
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

11 files changed, 20 insertions, 23 deletions

diff --git a/src/imports/controls/ComboBox.qml b/src/imports/controls/ComboBox.qml
index f461b34e..46dc7525 100644
--- a/src/imports/controls/ComboBox.qml
+++ b/src/imports/controls/ComboBox.qml
@@ -50,10 +50,8 @@ T.ComboBox {
                                       indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
-    spacing: 8
-    padding: 6
-    leftPadding: padding + 6
-    rightPadding: padding + 6
+    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
 
     //! [delegate]
     delegate: ItemDelegate {
@@ -67,7 +65,7 @@ T.ComboBox {
 
     //! [indicator]
     indicator: Image {
-        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        x: control.mirrored ? control.padding : control.width - width - control.padding
         y: control.topPadding + (control.availableHeight - height) / 2
         source: "image://default/double-arrow/" + (control.visualFocus ? Default.focusColor : Default.textColor)
         sourceSize.width: width
@@ -78,8 +76,10 @@ T.ComboBox {
 
     //! [contentItem]
     contentItem: Text {
-        leftPadding: control.mirrored && control.indicator ? control.indicator.width + control.spacing : 0
-        rightPadding: !control.mirrored && control.indicator ? control.indicator.width + control.spacing : 0
+        leftPadding: 12
+        rightPadding: 12
+        topPadding: 6 - control.padding
+        bottomPadding: 6 - control.padding
 
         text: control.displayText
         font: control.font
diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml
index 8ad1fd36..aa96f946 100644
--- a/src/imports/controls/material/ComboBox.qml
+++ b/src/imports/controls/material/ComboBox.qml
@@ -51,11 +51,8 @@ T.ComboBox {
                                       indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
-    spacing: 6
-    // external vertical padding is 6 (to increase touch area)
-    padding: 12
-    leftPadding: padding - 4
-    rightPadding: padding - 4
+    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
 
     Material.elevation: flat ? control.pressed || control.hovered ? 2 : 0
                              : control.pressed ? 8 : 2
@@ -71,14 +68,15 @@ T.ComboBox {
     }
 
     indicator: Image {
-        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        x: control.mirrored ? control.padding : control.width - width - control.padding
         y: control.topPadding + (control.availableHeight - height) / 2
         source: "image://material/drop-indicator/" + (control.enabled ? control.Material.primaryTextColor : control.Material.hintTextColor)
     }
 
     contentItem: Text {
-        leftPadding: control.mirrored && control.indicator ? control.indicator.width + control.spacing : 0
-        rightPadding: !control.mirrored && control.indicator ? control.indicator.width + control.spacing : 0
+        padding: 6
+        leftPadding: 12
+        rightPadding: 12
 
         text: control.displayText
         font: control.font
diff --git a/src/imports/controls/material/images/drop-indicator.png b/src/imports/controls/material/images/drop-indicator.png
index 08bb4855..03c77486 100644
--- a/src/imports/controls/material/images/drop-indicator.png
+++ b/src/imports/controls/material/images/drop-indicator.png
diff --git a/src/imports/controls/material/images/drop-indicator@2x.png b/src/imports/controls/material/images/drop-indicator@2x.png
index ccdfc2b1..6656f753 100644
--- a/src/imports/controls/material/images/drop-indicator@2x.png
+++ b/src/imports/controls/material/images/drop-indicator@2x.png
diff --git a/src/imports/controls/material/images/drop-indicator@3x.png b/src/imports/controls/material/images/drop-indicator@3x.png
index 00cae691..97f12895 100644
--- a/src/imports/controls/material/images/drop-indicator@3x.png
+++ b/src/imports/controls/material/images/drop-indicator@3x.png
diff --git a/src/imports/controls/material/images/drop-indicator@4x.png b/src/imports/controls/material/images/drop-indicator@4x.png
index 0a61cb01..0046692f 100644
--- a/src/imports/controls/material/images/drop-indicator@4x.png
+++ b/src/imports/controls/material/images/drop-indicator@4x.png
diff --git a/src/imports/controls/universal/ComboBox.qml b/src/imports/controls/universal/ComboBox.qml
index 2d768a1d..536782c7 100644
--- a/src/imports/controls/universal/ComboBox.qml
+++ b/src/imports/controls/universal/ComboBox.qml
@@ -50,11 +50,8 @@ T.ComboBox {
                                       indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
-    spacing: 10
-    padding: 12
-    topPadding: padding - 7
-    rightPadding: padding - 2
-    bottomPadding: padding - 5
+    leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
+    rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
 
     delegate: ItemDelegate {
         width: control.popup.width
@@ -64,7 +61,7 @@ T.ComboBox {
     }
 
     indicator: Image {
-        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
+        x: control.mirrored ? control.padding : control.width - width - control.padding
         y: control.topPadding + (control.availableHeight - height) / 2
         source: "image://universal/downarrow/" + (!control.enabled ? control.Universal.baseLowColor : control.Universal.baseMediumHighColor)
         sourceSize.width: width
@@ -72,8 +69,10 @@ T.ComboBox {
     }
 
     contentItem: Text {
-        leftPadding: control.mirrored && control.indicator ? control.indicator.width + control.spacing : 0
-        rightPadding: !control.mirrored && control.indicator ? control.indicator.width + control.spacing : 0
+        leftPadding: 12
+        rightPadding: 10
+        topPadding: 5 - control.topPadding
+        bottomPadding: 7 - control.bottomPadding
 
         text: control.displayText
         font: control.font
diff --git a/src/imports/controls/universal/images/downarrow.png b/src/imports/controls/universal/images/downarrow.png
index fef7b0f2..9ac84a23 100644
--- a/src/imports/controls/universal/images/downarrow.png
+++ b/src/imports/controls/universal/images/downarrow.png
diff --git a/src/imports/controls/universal/images/downarrow@2x.png b/src/imports/controls/universal/images/downarrow@2x.png
index eabf658a..8dafab94 100644
--- a/src/imports/controls/universal/images/downarrow@2x.png
+++ b/src/imports/controls/universal/images/downarrow@2x.png
diff --git a/src/imports/controls/universal/images/downarrow@3x.png b/src/imports/controls/universal/images/downarrow@3x.png
index f9d39a2c..17ab1cf8 100644
--- a/src/imports/controls/universal/images/downarrow@3x.png
+++ b/src/imports/controls/universal/images/downarrow@3x.png
diff --git a/src/imports/controls/universal/images/downarrow@4x.png b/src/imports/controls/universal/images/downarrow@4x.png
index b252b588..0e145e2d 100644
--- a/src/imports/controls/universal/images/downarrow@4x.png
+++ b/src/imports/controls/universal/images/downarrow@4x.png