From bafe2ca913f6268829088326b86ec90b41277c36 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Wed, 25 Apr 2018 14:09:11 +0200 Subject: Material: use background insets Allows easily configuring the insets from the outside. Buttons have normally 6px insets, but for example a large Floating Action Button doesn't. Task-number: QTBUG-60156 Change-Id: I49121c5bd588ff83e7ab9032de42a93872e999e4 Reviewed-by: Mitch Curtis --- src/imports/controls/material/Button.qml | 9 +++------ src/imports/controls/material/ComboBox.qml | 8 ++++---- src/imports/controls/material/DelayButton.qml | 11 ++++------- src/imports/controls/material/RoundButton.qml | 14 ++++++-------- src/imports/controls/material/qquickmaterialstyle.cpp | 6 ++++++ src/imports/controls/material/qquickmaterialstyle_p.h | 2 ++ 6 files changed, 25 insertions(+), 25 deletions(-) (limited to 'src/imports') diff --git a/src/imports/controls/material/Button.qml b/src/imports/controls/material/Button.qml index eed72906..62afe2cb 100644 --- a/src/imports/controls/material/Button.qml +++ b/src/imports/controls/material/Button.qml @@ -49,7 +49,8 @@ T.Button { implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) - // external vertical padding is 6 (to increase touch area) + topInset: 6 + bottomInset: 6 padding: 12 horizontalPadding: padding - 4 spacing: 6 @@ -80,12 +81,8 @@ T.Button { // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { implicitWidth: 64 - implicitHeight: control.Material.touchTarget + implicitHeight: control.Material.buttonHeight - // external vertical padding is 6 (to increase touch area) - y: 6 - width: parent.width - height: parent.height - 12 radius: 2 color: !control.enabled ? control.Material.buttonDisabledColor : control.highlighted ? control.Material.highlightedButtonColor : control.Material.buttonColor diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml index fd39651e..5db53d1c 100644 --- a/src/imports/controls/material/ComboBox.qml +++ b/src/imports/controls/material/ComboBox.qml @@ -51,6 +51,9 @@ T.ComboBox { implicitContentHeight + topPadding + bottomPadding, implicitIndicatorHeight + topPadding + bottomPadding) + topInset: 6 + bottomInset: 6 + leftPadding: padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing) rightPadding: padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing) @@ -98,11 +101,8 @@ T.ComboBox { background: Rectangle { implicitWidth: 120 - implicitHeight: control.Material.touchTarget + implicitHeight: control.Material.buttonHeight - // external vertical padding is 6 (to increase touch area) - y: 6 - height: parent.height - 12 radius: control.flat ? 0 : 2 color: !control.editable ? control.Material.dialogColor : "transparent" diff --git a/src/imports/controls/material/DelayButton.qml b/src/imports/controls/material/DelayButton.qml index f666bc5f..fddd49e4 100644 --- a/src/imports/controls/material/DelayButton.qml +++ b/src/imports/controls/material/DelayButton.qml @@ -49,9 +49,10 @@ T.DelayButton { implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) - // external vertical padding is 6 (to increase touch area) + topInset: 6 + bottomInset: 6 padding: 12 - verticalPadding: padding - 4 + horizontalPadding: padding - 4 Material.elevation: control.down ? 8 : 2 @@ -73,12 +74,8 @@ T.DelayButton { // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { implicitWidth: 64 - implicitHeight: control.Material.touchTarget + implicitHeight: control.Material.buttonHeight - // external vertical padding is 6 (to increase touch area) - y: 6 - width: parent.width - height: parent.height - 12 radius: 2 color: !control.enabled ? control.Material.buttonDisabledColor : control.Material.buttonColor diff --git a/src/imports/controls/material/RoundButton.qml b/src/imports/controls/material/RoundButton.qml index e243ae72..fafc92c7 100644 --- a/src/imports/controls/material/RoundButton.qml +++ b/src/imports/controls/material/RoundButton.qml @@ -49,7 +49,10 @@ T.RoundButton { implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) - // external vertical padding is 6 (to increase touch area) + topInset: 6 + leftInset: 6 + rightInset: 6 + bottomInset: 6 padding: 12 spacing: 6 @@ -78,14 +81,9 @@ T.RoundButton { // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { - implicitWidth: control.Material.touchTarget - implicitHeight: control.Material.touchTarget + implicitWidth: control.Material.buttonHeight + implicitHeight: control.Material.buttonHeight - // external vertical padding is 6 (to increase touch area) - x: 6 - y: 6 - width: parent.width - 12 - height: parent.height - 12 radius: control.radius color: !control.enabled ? control.Material.buttonDisabledColor : control.checked || control.highlighted ? control.Material.highlightedButtonColor : control.Material.buttonColor diff --git a/src/imports/controls/material/qquickmaterialstyle.cpp b/src/imports/controls/material/qquickmaterialstyle.cpp index 365392a1..5cbd87ea 100644 --- a/src/imports/controls/material/qquickmaterialstyle.cpp +++ b/src/imports/controls/material/qquickmaterialstyle.cpp @@ -1145,6 +1145,12 @@ int QQuickMaterialStyle::touchTarget() const return globalVariant == Dense ? 44 : 48; } +int QQuickMaterialStyle::buttonHeight() const +{ + // https://material.io/guidelines/components/buttons.html#buttons-style + return globalVariant == Dense ? 32 : 36; +} + int QQuickMaterialStyle::delegateHeight() const { // https://material.io/guidelines/components/lists.html#lists-specs diff --git a/src/imports/controls/material/qquickmaterialstyle_p.h b/src/imports/controls/material/qquickmaterialstyle_p.h index 31b63ca1..0f209a6f 100644 --- a/src/imports/controls/material/qquickmaterialstyle_p.h +++ b/src/imports/controls/material/qquickmaterialstyle_p.h @@ -99,6 +99,7 @@ class QQuickMaterialStyle : public QQuickAttachedObject Q_PROPERTY(QColor spinBoxDisabledIconColor READ spinBoxDisabledIconColor NOTIFY paletteChanged FINAL) Q_PROPERTY(int touchTarget READ touchTarget CONSTANT FINAL) + Q_PROPERTY(int buttonHeight READ buttonHeight CONSTANT FINAL) Q_PROPERTY(int delegateHeight READ delegateHeight CONSTANT FINAL) Q_PROPERTY(int dialogButtonBoxHeight READ dialogButtonBoxHeight CONSTANT FINAL) Q_PROPERTY(int frameVerticalPadding READ frameVerticalPadding CONSTANT FINAL) @@ -241,6 +242,7 @@ public: Q_INVOKABLE QColor shade(const QColor &color, Shade shade) const; int touchTarget() const; + int buttonHeight() const; int delegateHeight() const; int dialogButtonBoxHeight() const; int frameVerticalPadding() const; -- cgit v1.2.3