From a55ec55a13e4105fd3facdada1c2899190c52828 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Wed, 25 Apr 2018 14:03:11 +0200 Subject: Replace Material.buttonHeight with Material.touchTarget The visual height of a Material design Button is 36px in the normal variant, and 32px in the dense variant. The Button has 6px vertical insets to gain 48px touch target height. Rename the old buttonHeight property as touchTarget to make room for the visual buttonHeight that is needed when porting Button to use the newly introduced background insets. Change-Id: Ic2932f71ca75a626ff5e9b0ce9930e1b3f24cf00 Reviewed-by: Mitch Curtis --- src/imports/controls/material/BusyIndicator.qml | 4 ++-- src/imports/controls/material/Button.qml | 2 +- src/imports/controls/material/ComboBox.qml | 2 +- src/imports/controls/material/DelayButton.qml | 2 +- src/imports/controls/material/RoundButton.qml | 4 ++-- src/imports/controls/material/SpinBox.qml | 10 +++++----- src/imports/controls/material/TabButton.qml | 2 +- src/imports/controls/material/ToolButton.qml | 4 ++-- src/imports/controls/material/qquickmaterialstyle.cpp | 2 +- src/imports/controls/material/qquickmaterialstyle_p.h | 4 ++-- 10 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/imports/controls/material/BusyIndicator.qml b/src/imports/controls/material/BusyIndicator.qml index 7a86df06..18887669 100644 --- a/src/imports/controls/material/BusyIndicator.qml +++ b/src/imports/controls/material/BusyIndicator.qml @@ -50,8 +50,8 @@ T.BusyIndicator { padding: 6 contentItem: BusyIndicatorImpl { - implicitWidth: control.Material.buttonHeight - implicitHeight: control.Material.buttonHeight + implicitWidth: control.Material.touchTarget + implicitHeight: control.Material.touchTarget color: control.Material.accentColor running: control.running diff --git a/src/imports/controls/material/Button.qml b/src/imports/controls/material/Button.qml index 177e27b3..eed72906 100644 --- a/src/imports/controls/material/Button.qml +++ b/src/imports/controls/material/Button.qml @@ -80,7 +80,7 @@ T.Button { // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { implicitWidth: 64 - implicitHeight: control.Material.buttonHeight + implicitHeight: control.Material.touchTarget // external vertical padding is 6 (to increase touch area) y: 6 diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml index 3ce2632b..fd39651e 100644 --- a/src/imports/controls/material/ComboBox.qml +++ b/src/imports/controls/material/ComboBox.qml @@ -98,7 +98,7 @@ T.ComboBox { background: Rectangle { implicitWidth: 120 - implicitHeight: control.Material.buttonHeight + implicitHeight: control.Material.touchTarget // external vertical padding is 6 (to increase touch area) y: 6 diff --git a/src/imports/controls/material/DelayButton.qml b/src/imports/controls/material/DelayButton.qml index 052077ff..f666bc5f 100644 --- a/src/imports/controls/material/DelayButton.qml +++ b/src/imports/controls/material/DelayButton.qml @@ -73,7 +73,7 @@ T.DelayButton { // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { implicitWidth: 64 - implicitHeight: control.Material.buttonHeight + implicitHeight: control.Material.touchTarget // external vertical padding is 6 (to increase touch area) y: 6 diff --git a/src/imports/controls/material/RoundButton.qml b/src/imports/controls/material/RoundButton.qml index 0ecbd0cd..e243ae72 100644 --- a/src/imports/controls/material/RoundButton.qml +++ b/src/imports/controls/material/RoundButton.qml @@ -78,8 +78,8 @@ T.RoundButton { // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state background: Rectangle { - implicitWidth: control.Material.buttonHeight - implicitHeight: control.Material.buttonHeight + implicitWidth: control.Material.touchTarget + implicitHeight: control.Material.touchTarget // external vertical padding is 6 (to increase touch area) x: 6 diff --git a/src/imports/controls/material/SpinBox.qml b/src/imports/controls/material/SpinBox.qml index acfef487..d0a09a10 100644 --- a/src/imports/controls/material/SpinBox.qml +++ b/src/imports/controls/material/SpinBox.qml @@ -82,8 +82,8 @@ T.SpinBox { up.indicator: Item { x: control.mirrored ? 0 : parent.width - width - implicitWidth: control.Material.buttonHeight - implicitHeight: control.Material.buttonHeight + implicitWidth: control.Material.touchTarget + implicitHeight: control.Material.touchTarget height: parent.height width: height @@ -116,8 +116,8 @@ T.SpinBox { down.indicator: Item { x: control.mirrored ? parent.width - width : 0 - implicitWidth: control.Material.buttonHeight - implicitHeight: control.Material.buttonHeight + implicitWidth: control.Material.touchTarget + implicitHeight: control.Material.touchTarget height: parent.height width: height @@ -143,7 +143,7 @@ T.SpinBox { background: Item { implicitWidth: 192 - implicitHeight: control.Material.buttonHeight + implicitHeight: control.Material.touchTarget Rectangle { x: parent.width / 2 - width / 2 diff --git a/src/imports/controls/material/TabButton.qml b/src/imports/controls/material/TabButton.qml index 369be535..c5cd8f9b 100644 --- a/src/imports/controls/material/TabButton.qml +++ b/src/imports/controls/material/TabButton.qml @@ -68,7 +68,7 @@ T.TabButton { } background: Ripple { - implicitHeight: control.Material.buttonHeight + implicitHeight: control.Material.touchTarget clip: true pressed: control.pressed diff --git a/src/imports/controls/material/ToolButton.qml b/src/imports/controls/material/ToolButton.qml index c2cfe81f..55f1bd52 100644 --- a/src/imports/controls/material/ToolButton.qml +++ b/src/imports/controls/material/ToolButton.qml @@ -69,8 +69,8 @@ T.ToolButton { } background: Ripple { - implicitWidth: control.Material.buttonHeight - implicitHeight: control.Material.buttonHeight + implicitWidth: control.Material.touchTarget + implicitHeight: control.Material.touchTarget readonly property bool square: control.contentItem.width <= control.contentItem.height diff --git a/src/imports/controls/material/qquickmaterialstyle.cpp b/src/imports/controls/material/qquickmaterialstyle.cpp index 8d348026..365392a1 100644 --- a/src/imports/controls/material/qquickmaterialstyle.cpp +++ b/src/imports/controls/material/qquickmaterialstyle.cpp @@ -1139,7 +1139,7 @@ QColor QQuickMaterialStyle::shade(const QColor &color, Shade shade) const } } -int QQuickMaterialStyle::buttonHeight() const +int QQuickMaterialStyle::touchTarget() const { // https://material.io/guidelines/components/buttons.html#buttons-style return globalVariant == Dense ? 44 : 48; diff --git a/src/imports/controls/material/qquickmaterialstyle_p.h b/src/imports/controls/material/qquickmaterialstyle_p.h index 0cb168a9..31b63ca1 100644 --- a/src/imports/controls/material/qquickmaterialstyle_p.h +++ b/src/imports/controls/material/qquickmaterialstyle_p.h @@ -98,7 +98,7 @@ class QQuickMaterialStyle : public QQuickAttachedObject Q_PROPERTY(QColor toolTextColor READ toolTextColor NOTIFY paletteChanged FINAL) Q_PROPERTY(QColor spinBoxDisabledIconColor READ spinBoxDisabledIconColor NOTIFY paletteChanged FINAL) - Q_PROPERTY(int buttonHeight READ buttonHeight CONSTANT FINAL) + Q_PROPERTY(int touchTarget READ touchTarget 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) @@ -240,7 +240,7 @@ public: Q_INVOKABLE QColor color(Color color, Shade shade = Shade500) const; Q_INVOKABLE QColor shade(const QColor &color, Shade shade) const; - int buttonHeight() const; + int touchTarget() const; int delegateHeight() const; int dialogButtonBoxHeight() const; int frameVerticalPadding() const; -- cgit v1.2.3