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>

4 files changed, 9 insertions, 10 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"