Add support for flat Buttons

Task-number: QTBUG-51054
Change-Id: Ib4b23b624bc34d16c5acc1568881b609d3fd64b8
Reviewed-by: Nikita Krupenko <krnekit@gmail.com>
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

6 files changed, 41 insertions, 11 deletions

diff --git a/src/imports/controls/Button.qml b/src/imports/controls/Button.qml
index 45203a36..b461fdfe 100644
--- a/src/imports/controls/Button.qml
+++ b/src/imports/controls/Button.qml
@@ -67,11 +67,12 @@ T.Button {
         implicitWidth: 100
         implicitHeight: 40
         opacity: enabled ? 1 : 0.3
+        visible: !control.flat || control.down || control.checked || control.highlighted
         color: control.checked || control.highlighted ?
             (control.visualFocus ? (control.down ? "#599bff" : "#0066ff") : (control.down ? "#585a5c" : "#353637")) :
             (control.visualFocus ? (control.down ? "#cce0ff" : "#f0f6ff") : (control.down ? "#d6d6d6" : "#f6f6f6"))
         border.color: control.visualFocus ? "#0066ff" : (control.down ? "#26282a" : "#353637")
-        border.width: control.checked || control.highlighted ? 0 : (control.visualFocus ? 2 : 1)
+        border.width: control.flat || control.checked || control.highlighted ? 0 : (control.visualFocus ? 2 : 1)
     }
     //! [background]
 }
diff --git a/src/imports/controls/material/Button.qml b/src/imports/controls/material/Button.qml
index a1903f3e..7eb28282 100644
--- a/src/imports/controls/material/Button.qml
+++ b/src/imports/controls/material/Button.qml
@@ -42,15 +42,6 @@ import QtQuick.Controls.Material.impl 2.0
 T.Button {
     id: control
 
-    // TODO: Add a flat property to T.Button, and make this:
-    // flat ? control.down || control.hovered ? 2 : 0
-    //      : control.down ? 8 : 2
-    // See https://bugreports.qt.io/browse/QTBUG-51054
-    // NOTE: Flat buttons should be transparent by default and have no elevation when pressed
-    // However, on the desktop, flat buttons can be colored and have a 2dp when pressed
-    // This is called a flat raised button
-    Material.elevation: control.down ? 8 : 2
-
     implicitWidth: Math.max(background ? background.implicitWidth : 0,
                             contentItem.implicitWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(background ? background.implicitHeight : 0,
@@ -62,11 +53,16 @@ T.Button {
     leftPadding: 8
     rightPadding: 8
 
+    Material.elevation: flat ? control.down || control.hovered ? 2 : 0
+                             : control.down ? 8 : 2
+    Material.background: flat ? "transparent" : undefined
+
     //! [contentItem]
     contentItem: Text {
         text: control.text
         font: control.font
         color: !control.enabled ? control.Material.hintTextColor :
+            control.flat && control.highlighted ? control.Material.accentColor :
             control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.primaryTextColor
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
diff --git a/src/imports/controls/universal/Button.qml b/src/imports/controls/universal/Button.qml
index fbe79b6b..f31c5381 100644
--- a/src/imports/controls/universal/Button.qml
+++ b/src/imports/controls/universal/Button.qml
@@ -72,6 +72,7 @@ T.Button {
         implicitWidth: 32
         implicitHeight: 32
 
+        visible: !control.flat || control.down || control.checked || control.highlighted
         color: control.down ? control.Universal.baseMediumLowColor :
                control.enabled && (control.highlighted || control.checked) ? control.Universal.accent :
                                                                              control.Universal.baseLowColor
diff --git a/src/imports/templates/plugins.qmltypes b/src/imports/templates/plugins.qmltypes
index 434aee4d..17c5117a 100644
--- a/src/imports/templates/plugins.qmltypes
+++ b/src/imports/templates/plugins.qmltypes
@@ -72,6 +72,7 @@ Module {
         Property { name: "checkable"; type: "bool" }
         Property { name: "autoRepeat"; type: "bool" }
         Property { name: "highlighted"; type: "bool" }
+        Property { name: "flat"; type: "bool" }
     }
     Component {
         name: "QQuickCheckBox"
diff --git a/src/quicktemplates2/qquickbutton.cpp b/src/quicktemplates2/qquickbutton.cpp
index cb5b2963..465e82de 100644
--- a/src/quicktemplates2/qquickbutton.cpp
+++ b/src/quicktemplates2/qquickbutton.cpp
@@ -97,11 +97,12 @@ class QQuickButtonPrivate : public QQuickAbstractButtonPrivate
 public:
     QQuickButtonPrivate();
 
+    bool flat;
     bool highlighted;
 };
 
 QQuickButtonPrivate::QQuickButtonPrivate() :
-    highlighted(false)
+    flat(false), highlighted(false)
 {
 }
 
@@ -166,4 +167,29 @@ void QQuickButton::setHighlighted(bool highlighted)
     emit highlightedChanged();
 }
 
+/*!
+    \qmlproperty bool QtQuick.Controls::Button::flat
+
+    This property holds whether the button is flat.
+
+    A flat button typically does not draw a background unless it is pressed or checked.
+
+    The default value is \c false.
+*/
+bool QQuickButton::isFlat() const
+{
+    Q_D(const QQuickButton);
+    return d->flat;
+}
+
+void QQuickButton::setFlat(bool flat)
+{
+    Q_D(QQuickButton);
+    if (flat == d->flat)
+        return;
+
+    d->flat = flat;
+    emit flatChanged();
+}
+
 QT_END_NAMESPACE
diff --git a/src/quicktemplates2/qquickbutton_p.h b/src/quicktemplates2/qquickbutton_p.h
index 36eb4359..fafce150 100644
--- a/src/quicktemplates2/qquickbutton_p.h
+++ b/src/quicktemplates2/qquickbutton_p.h
@@ -60,6 +60,7 @@ class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickButton : public QQuickAbstractButto
     Q_PROPERTY(bool checkable READ isCheckable WRITE setCheckable NOTIFY checkableChanged FINAL)
     Q_PROPERTY(bool autoRepeat READ autoRepeat WRITE setAutoRepeat NOTIFY autoRepeatChanged FINAL)
     Q_PROPERTY(bool highlighted READ isHighlighted WRITE setHighlighted NOTIFY highlightedChanged FINAL)
+    Q_PROPERTY(bool flat READ isFlat WRITE setFlat NOTIFY flatChanged FINAL)
 
 public:
     explicit QQuickButton(QQuickItem *parent = nullptr);
@@ -67,10 +68,14 @@ public:
     bool isHighlighted() const;
     void setHighlighted(bool highlighted);
 
+    bool isFlat() const;
+    void setFlat(bool flat);
+
 Q_SIGNALS:
     void checkableChanged();
     void autoRepeatChanged();
     void highlightedChanged();
+    void flatChanged();
 
 protected:
     void checkableChange() override;