Material: revise Button visuals

Pressed buttons were way too dark, and ripples weren't even visible
for highlighted buttons. Now that we have ripples, we don't need to
use so many different color shades to present various button states.
Also, visualize the checked state with a little accented bar like
the Android ToggleButton does.

Change-Id: Id717b658bfe70ba211e4da5a6addc6e10a2df3e5
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

2 files changed, 15 insertions, 27 deletions

diff --git a/src/imports/controls/material/Button.qml b/src/imports/controls/material/Button.qml
index b36b38fd..f69671ff 100644
--- a/src/imports/controls/material/Button.qml
+++ b/src/imports/controls/material/Button.qml
@@ -78,16 +78,19 @@ T.Button {
         width: parent.width
         height: parent.height - 12
         radius: 2
-        color: !control.enabled
-                    ? control.Material.buttonDisabledColor
-                : control.down
-                    ? control.highlighted ? control.Material.highlightedButtonPressColor
-                                          : control.Material.buttonPressColor
-                : control.visualFocus || control.checked
-                    ? control.highlighted ? control.Material.highlightedButtonHoverColor
-                                          : control.Material.buttonHoverColor
-                    : control.highlighted ? control.Material.highlightedButtonColor
-                                          : control.Material.buttonColor
+        color: !control.enabled ? control.Material.buttonDisabledColor :
+                control.highlighted ? control.Material.highlightedButtonColor : control.Material.buttonColor
+
+        PaddedRectangle {
+            y: parent.height - 4
+            width: parent.width
+            height: 4
+            radius: 2
+            topPadding: -2
+            clip: true
+            visible: control.checkable && (!control.highlighted || control.flat)
+            color: control.checked && control.enabled ? control.Material.accentColor : control.Material.secondaryTextColor
+        }
 
         Behavior on color {
             ColorAnimation {
@@ -111,7 +114,7 @@ T.Button {
             pressed: control.pressed
             anchor: control
             active: control.down || control.visualFocus || control.hovered
-            color: control.highlighted && !control.flat ? control.Material.checkBoxCheckedRippleColor : control.Material.checkBoxUncheckedRippleColor
+            color: control.Material.checkBoxUncheckedRippleColor
         }
     }
 }
diff --git a/src/imports/controls/material/qquickmaterialstyle.cpp b/src/imports/controls/material/qquickmaterialstyle.cpp
index b6fa7cd7..e38c71bd 100644
--- a/src/imports/controls/material/qquickmaterialstyle.cpp
+++ b/src/imports/controls/material/qquickmaterialstyle.cpp
@@ -418,16 +418,6 @@ static const QRgb checkBoxUncheckedRippleColorDark = 0x20FFFFFF;
 static const QRgb spinBoxDisabledIconColorLight = 0xFFCCCCCC;
 static const QRgb spinBoxDisabledIconColorDark = 0xFF666666;
 
-static QColor alphaBlend(const QColor &bg, const QColor &fg)
-{
-    QColor result;
-    result.setRedF(fg.redF() * fg.alphaF() + bg.redF() * (1.0 - fg.alphaF()));
-    result.setGreenF(fg.greenF() * fg.alphaF() + bg.greenF() * (1.0 - fg.alphaF()));
-    result.setBlueF(fg.blueF() * fg.alphaF() + bg.blueF() * (1.0 - fg.alphaF()));
-    result.setAlphaF(bg.alphaF() + fg.alphaF() * (1.0 - bg.alphaF()));
-    return result;
-}
-
 extern bool qt_is_dark_system_theme();
 
 static QQuickMaterialStyle::Theme effectiveTheme(QQuickMaterialStyle::Theme theme)
@@ -893,12 +883,7 @@ QColor QQuickMaterialStyle::buttonColor(bool highlighted, bool pressed, bool hov
         }
     }
 
-    if (pressed || hover) {
-        // Add overlaying black shadow 12% opacity
-        return alphaBlend(color, QColor::fromRgba(0x1F000000));
-    } else {
-        return color;
-    }
+    return color;
 }
 
 QColor QQuickMaterialStyle::buttonColor() const