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 <mitch.curtis@qt.io>

6 files changed, 25 insertions, 25 deletions

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;