diff options
| author | Nikita Krupenko <krnekit@gmail.com> | 2016-01-29 00:06:43 +0200 |
|---|---|---|
| committer | Nikita Krupenko <krnekit@gmail.com> | 2016-01-29 20:12:54 +0000 |
| commit | 509b610267fd1f9eef5e22267a0cab6fae4a3752 (patch) | |
| tree | cc819c8bea8a56a50bf73e51c17c52201e969a79 /src/imports/controls/material | |
| parent | 5199f3e4f0c4aa08d6713beebb8c7b90f5c29e42 (diff) | |
Material: adjust sizes of checkable controls
Made Switch indicator and handle smaller to be more like the native
switch on Android. Also, increased the sizes of Switch and its Ripple
CheckBox, and RadioButton to to correspond minimum touch target size
48x48.
Change-Id: Icce70215910b677d989182fbb3b40161033601f8
Reviewed-by: J-P Nurmi <jpnurmi@theqtcompany.com>
Reviewed-by: Nikita Krupenko <krnekit@gmail.com>
Reviewed-by: Mitch Curtis <mitch.curtis@theqtcompany.com>
Diffstat (limited to 'src/imports/controls/material')
| -rw-r--r-- | src/imports/controls/material/CheckBox.qml | 7 | ||||
| -rw-r--r-- | src/imports/controls/material/RadioButton.qml | 7 | ||||
| -rw-r--r-- | src/imports/controls/material/Switch.qml | 16 |
3 files changed, 18 insertions, 12 deletions
diff --git a/src/imports/controls/material/CheckBox.qml b/src/imports/controls/material/CheckBox.qml index 939d5a31..e7fbadaa 100644 --- a/src/imports/controls/material/CheckBox.qml +++ b/src/imports/controls/material/CheckBox.qml @@ -50,8 +50,11 @@ T.CheckBox { indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding) baselineOffset: label ? label.y + label.baselineOffset : 0 - padding: 6 - spacing: 6 + spacing: 8 + topPadding: 14 + leftPadding: 8 + rightPadding: 8 + bottomPadding: 14 //! [indicator] indicator: Rectangle { diff --git a/src/imports/controls/material/RadioButton.qml b/src/imports/controls/material/RadioButton.qml index 96605311..25d91a5c 100644 --- a/src/imports/controls/material/RadioButton.qml +++ b/src/imports/controls/material/RadioButton.qml @@ -50,8 +50,11 @@ T.RadioButton { indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding) baselineOffset: label ? label.y + label.baselineOffset : 0 - padding: 6 - spacing: 6 + spacing: 8 + topPadding: 14 + leftPadding: 8 + rightPadding: 8 + bottomPadding: 14 //! [indicator] indicator: Rectangle { diff --git a/src/imports/controls/material/Switch.qml b/src/imports/controls/material/Switch.qml index 7c8e4395..f44fb31a 100644 --- a/src/imports/controls/material/Switch.qml +++ b/src/imports/controls/material/Switch.qml @@ -51,20 +51,20 @@ T.Switch { indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding) baselineOffset: label ? label.y + label.baselineOffset : 0 - padding: 6 - spacing: 6 + padding: 8 + spacing: 8 //! [indicator] indicator: Item { x: text ? (control.mirrored ? control.width - width - control.rightPadding : control.leftPadding) : control.leftPadding + (control.availableWidth - width) / 2 y: control.topPadding + (control.availableHeight - height) / 2 - implicitWidth: 40 - implicitHeight: 20 + implicitWidth: 38 + implicitHeight: 32 Ripple { x: handle.x + handle.width / 2 - width / 2 y: handle.y + handle.height / 2 - height / 2 - width: handle.width - 4 + width: handle.width height: width control: control colored: control.checked @@ -73,7 +73,7 @@ T.Switch { Rectangle { width: parent.width - height: 16 + height: 14 radius: height / 2 y: parent.height / 2 - height / 2 color: control.enabled ? (control.checked ? control.Material.switchCheckedTrackColor : control.Material.switchUncheckedTrackColor) @@ -84,8 +84,8 @@ T.Switch { id: handle x: Math.max(0, Math.min(parent.width - width, control.visualPosition * parent.width - (width / 2))) y: (parent.height - height) / 2 - width: 24 - height: 24 + width: 20 + height: 20 radius: width / 2 color: control.enabled ? (control.checked ? control.Material.switchCheckedHandleColor : control.Material.switchUncheckedHandleColor) : control.Material.switchDisabledHandleColor |