From 1864020f5f3387b6c3fe0baf7ed82c9f8595f584 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Fri, 28 Oct 2016 13:56:17 +0200 Subject: 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 --- src/imports/controls/ComboBox.qml | 14 +++++++------- src/imports/controls/material/ComboBox.qml | 14 ++++++-------- src/imports/controls/material/images/drop-indicator.png | Bin 192 -> 165 bytes .../controls/material/images/drop-indicator@2x.png | Bin 221 -> 222 bytes .../controls/material/images/drop-indicator@3x.png | Bin 256 -> 283 bytes .../controls/material/images/drop-indicator@4x.png | Bin 289 -> 345 bytes src/imports/controls/universal/ComboBox.qml | 15 +++++++-------- src/imports/controls/universal/images/downarrow.png | Bin 200 -> 233 bytes src/imports/controls/universal/images/downarrow@2x.png | Bin 263 -> 325 bytes src/imports/controls/universal/images/downarrow@3x.png | Bin 329 -> 387 bytes src/imports/controls/universal/images/downarrow@4x.png | Bin 358 -> 423 bytes 11 files changed, 20 insertions(+), 23 deletions(-) (limited to 'src') 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 Binary files a/src/imports/controls/material/images/drop-indicator.png and b/src/imports/controls/material/images/drop-indicator.png differ 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 Binary files a/src/imports/controls/material/images/drop-indicator@2x.png and b/src/imports/controls/material/images/drop-indicator@2x.png differ 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 Binary files a/src/imports/controls/material/images/drop-indicator@3x.png and b/src/imports/controls/material/images/drop-indicator@3x.png differ 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 Binary files a/src/imports/controls/material/images/drop-indicator@4x.png and b/src/imports/controls/material/images/drop-indicator@4x.png differ 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 Binary files a/src/imports/controls/universal/images/downarrow.png and b/src/imports/controls/universal/images/downarrow.png differ diff --git a/src/imports/controls/universal/images/downarrow@2x.png b/src/imports/controls/universal/images/downarrow@2x.png index eabf658a..8dafab94 100644 Binary files a/src/imports/controls/universal/images/downarrow@2x.png and b/src/imports/controls/universal/images/downarrow@2x.png differ diff --git a/src/imports/controls/universal/images/downarrow@3x.png b/src/imports/controls/universal/images/downarrow@3x.png index f9d39a2c..17ab1cf8 100644 Binary files a/src/imports/controls/universal/images/downarrow@3x.png and b/src/imports/controls/universal/images/downarrow@3x.png differ diff --git a/src/imports/controls/universal/images/downarrow@4x.png b/src/imports/controls/universal/images/downarrow@4x.png index b252b588..0e145e2d 100644 Binary files a/src/imports/controls/universal/images/downarrow@4x.png and b/src/imports/controls/universal/images/downarrow@4x.png differ -- cgit v1.2.3