From e5b1fc64aa98a3efae2415f7d4253187231ee578 Mon Sep 17 00:00:00 2001 From: J-P Nurmi Date: Wed, 20 Jul 2016 13:49:33 +0200 Subject: 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 --- src/imports/controls/material/Button.qml | 25 ++++++++++++---------- .../controls/material/qquickmaterialstyle.cpp | 17 +-------------- 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 -- cgit v1.2.3