diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/quickcontrols/doc/src/external-pages.qdoc | 5 | ||||
-rw-r--r-- | src/quickcontrols/doc/src/qtquickcontrols-material.qdoc | 24 | ||||
-rw-r--r-- | src/quickcontrols/material/Button.qml | 45 | ||||
-rw-r--r-- | src/quickcontrols/material/DelayButton.qml | 5 | ||||
-rw-r--r-- | src/quickcontrols/material/RoundButton.qml | 9 | ||||
-rw-r--r-- | src/quickcontrols/material/impl/BoxShadow.qml | 17 | ||||
-rw-r--r-- | src/quickcontrols/material/impl/CMakeLists.txt | 1 | ||||
-rw-r--r-- | src/quickcontrols/material/impl/ElevationEffect.qml | 228 | ||||
-rw-r--r-- | src/quickcontrols/material/impl/RoundedElevationEffect.qml | 35 | ||||
-rw-r--r-- | src/quickcontrols/material/impl/qquickmaterialripple.cpp | 4 | ||||
-rw-r--r-- | src/quickcontrols/material/qquickmaterialstyle.cpp | 73 | ||||
-rw-r--r-- | src/quickcontrols/material/qquickmaterialstyle_p.h | 34 |
12 files changed, 285 insertions, 195 deletions
diff --git a/src/quickcontrols/doc/src/external-pages.qdoc b/src/quickcontrols/doc/src/external-pages.qdoc index 591533c2c7..d78f94cc12 100644 --- a/src/quickcontrols/doc/src/external-pages.qdoc +++ b/src/quickcontrols/doc/src/external-pages.qdoc @@ -10,3 +10,8 @@ \externalpage https://doc.qt.io/qtcreator/creator-project-creating.html#selecting-project-type \title Qt Creator: Project Types */ + +/*! + \externalpage https://m3.material.io/styles/shape/overview + \title Material Style: Shape +*/ diff --git a/src/quickcontrols/doc/src/qtquickcontrols-material.qdoc b/src/quickcontrols/doc/src/qtquickcontrols-material.qdoc index 36e3b96a97..7b17b23a59 100644 --- a/src/quickcontrols/doc/src/qtquickcontrols-material.qdoc +++ b/src/quickcontrols/doc/src/qtquickcontrols-material.qdoc @@ -19,6 +19,7 @@ \li \l {material-foreground-attached-prop}{\b foreground} : color \li \l {material-primary-attached-prop}{\b primary} : color \li \l {material-theme-attached-prop}{\b theme} : enumeration + \li \l {material-roundedScale-attached-prop}{\b roundedScale} : enumeration \endlist \section1 Attached Methods @@ -355,6 +356,29 @@ \endstyleproperty + \styleproperty {Material.roundedScale} {enumeration} {material-roundedScale-attached-prop} + \target material-roundedScale-attached-prop + This attached property holds the radius of rounded corners used on the + target control. The property can be attached to any window or item, but + only some controls support it. + + The default value is control-specific. + + Available scales: + \value Material.NotRounded Square corners + \value Material.ExtraSmallScale Extra small rounded corners + \value Material.SmallScale Small rounded corners + \value Material.MediumScale Medium rounded corners + \value Material.LargeScale Large rounded corners + \value Material.ExtraLargeScale Extra large rounded corners + \value Material.FullScale Fully rounded corners + + This property was added in Qt 6.5. + + See also: \l {Material Style: Shape}. + + \endstyleproperty + \section1 Attached Method Documentation \stylemethod2 {color} {color} {enumeration} {predefined} {enumeration} {shade} {material-color-attached-method} diff --git a/src/quickcontrols/material/Button.qml b/src/quickcontrols/material/Button.qml index f2828b1eeb..e2bbb58687 100644 --- a/src/quickcontrols/material/Button.qml +++ b/src/quickcontrols/material/Button.qml @@ -17,19 +17,22 @@ T.Button { topInset: 6 bottomInset: 6 - padding: 12 - horizontalPadding: padding - 4 - spacing: 6 + verticalPadding: 14 + // https://m3.material.io/components/buttons/specs#256326ad-f934-40e7-b05f-0bcb41aa4382 + leftPadding: !flat ? (!hasIcon ? 24 : 16) : 12 + rightPadding: !flat ? 24 : (!hasIcon ? 12 : 16) + spacing: 8 icon.width: 24 icon.height: 24 icon.color: !enabled ? Material.hintTextColor : - flat && highlighted ? Material.accentColor : + (control.flat && control.highlighted) || (control.checked && !control.highlighted) ? Material.accentColor : highlighted ? Material.primaryHighlightedTextColor : Material.foreground - Material.elevation: flat ? control.down || (enabled && control.hovered) ? 2 : 0 - : control.down ? 8 : 2 - Material.background: flat ? "transparent" : undefined + readonly property bool hasIcon: icon.name.length > 0 || icon.source.toString().length > 0 + + Material.elevation: control.down ? 8 : 2 + Material.roundedScale: Material.FullScale contentItem: IconLabel { spacing: control.spacing @@ -40,7 +43,7 @@ T.Button { text: control.text font: control.font color: !control.enabled ? control.Material.hintTextColor : - control.flat && control.highlighted ? control.Material.accentColor : + (control.flat && control.highlighted) || (control.checked && !control.highlighted) ? control.Material.accentColor : control.highlighted ? control.Material.primaryHighlightedTextColor : control.Material.foreground } @@ -48,32 +51,22 @@ T.Button { implicitWidth: 64 implicitHeight: control.Material.buttonHeight - radius: 2 - color: !control.enabled ? control.Material.buttonDisabledColor : - control.highlighted ? (control.checked ? control.Material.highlightedCheckedButtonColor : - 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 - } + radius: control.Material.roundedScale === Material.FullScale ? height / 2 : control.Material.roundedScale + color: control.Material.buttonColor(control.Material.theme, control.Material.background, + control.Material.accent, control.enabled, control.flat, control.highlighted, control.checked) // The layer is disabled when the button color is transparent so you can do // Material.background: "transparent" and get a proper flat button without needing // to set Material.elevation as well - layer.enabled: control.enabled && control.Material.buttonColor.a > 0 - layer.effect: ElevationEffect { + layer.enabled: control.enabled && color.a > 0 && !control.flat + layer.effect: RoundedElevationEffect { elevation: control.Material.elevation + roundedScale: control.background.radius } Ripple { - clipRadius: 2 + clip: true + clipRadius: parent.radius width: parent.width height: parent.height pressed: control.pressed diff --git a/src/quickcontrols/material/DelayButton.qml b/src/quickcontrols/material/DelayButton.qml index f050d57a39..b18550541c 100644 --- a/src/quickcontrols/material/DelayButton.qml +++ b/src/quickcontrols/material/DelayButton.qml @@ -43,7 +43,8 @@ T.DelayButton { implicitHeight: control.Material.buttonHeight radius: 2 - color: !control.enabled ? control.Material.buttonDisabledColor : control.Material.buttonColor + color: control.Material.buttonColor(control.Material.theme, control.Material.background, + control.Material.accent, control.enabled, false /*flat*/, false /*highlighted*/, false /*checked*/) PaddedRectangle { y: parent.height - 4 @@ -65,7 +66,7 @@ T.DelayButton { } } - layer.enabled: control.enabled && control.Material.buttonColor.a > 0 + layer.enabled: control.enabled && color.a > 0 && !control.flat layer.effect: ElevationEffect { elevation: control.Material.elevation } diff --git a/src/quickcontrols/material/RoundButton.qml b/src/quickcontrols/material/RoundButton.qml index 3484fb9460..4e3db36fca 100644 --- a/src/quickcontrols/material/RoundButton.qml +++ b/src/quickcontrols/material/RoundButton.qml @@ -28,8 +28,7 @@ T.RoundButton { flat && highlighted ? Material.accentColor : highlighted ? Material.primaryHighlightedTextColor : Material.foreground - Material.elevation: flat ? control.down || control.hovered ? 2 : 0 - : control.down ? 12 : 6 + Material.elevation: control.down ? 8 : 2 Material.background: flat ? "transparent" : undefined contentItem: IconLabel { @@ -51,8 +50,8 @@ T.RoundButton { implicitHeight: control.Material.buttonHeight radius: control.radius - color: !control.enabled ? control.Material.buttonDisabledColor - : control.checked || control.highlighted ? control.Material.highlightedButtonColor : control.Material.buttonColor + color: control.Material.buttonColor(control.Material.theme, control.Material.background, + control.Material.accent, control.enabled, control.flat, control.highlighted, false /*checked*/) Rectangle { width: parent.width @@ -73,7 +72,7 @@ T.RoundButton { // The layer is disabled when the button color is transparent so that you can do // Material.background: "transparent" and get a proper flat button without needing // to set Material.elevation as well - layer.enabled: control.enabled && control.Material.buttonColor.a > 0 + layer.enabled: control.enabled && color.a > 0 && !control.flat layer.effect: ElevationEffect { elevation: control.Material.elevation } diff --git a/src/quickcontrols/material/impl/BoxShadow.qml b/src/quickcontrols/material/impl/BoxShadow.qml index f77412d554..d702389cdf 100644 --- a/src/quickcontrols/material/impl/BoxShadow.qml +++ b/src/quickcontrols/material/impl/BoxShadow.qml @@ -16,6 +16,12 @@ RectangularGlow { property int blurRadius property int spreadRadius + // The strength of the shadow. We have this because RectangularGlow spreads + // out the shadow thinly, whereas lower elevation levels in Material 3 + // are less spread out and stronger. This is only used for items with fully-rounded + // corners, like buttons. + property real strength + // The source item the shadow is being applied to, used for correctly // calculating the corner radious property Item source @@ -23,6 +29,10 @@ RectangularGlow { property bool fullWidth property bool fullHeight + // qmllint disable unqualified + // Intentionally duck-typed (QTBUG-94807) + readonly property real sourceRadius: source && source.radius || 0 + x: (parent.width - width)/2 + offsetX y: (parent.height - height)/2 + offsetY @@ -32,8 +42,7 @@ RectangularGlow { width: implicitWidth + 2 * spreadRadius + (fullWidth ? 2 * cornerRadius : 0) height: implicitHeight + 2 * spreadRadius + (fullHeight ? 2 * cornerRadius : 0) glowRadius: blurRadius/2 - spread: 0.05 - // qmllint disable unqualified - // Intentionally duck-typed (QTBUG-94807) - cornerRadius: blurRadius + (source && source.radius || 0) + spread: strength + + cornerRadius: blurRadius + sourceRadius } diff --git a/src/quickcontrols/material/impl/CMakeLists.txt b/src/quickcontrols/material/impl/CMakeLists.txt index 8b8e2311b4..ebf3e1cbf3 100644 --- a/src/quickcontrols/material/impl/CMakeLists.txt +++ b/src/quickcontrols/material/impl/CMakeLists.txt @@ -12,6 +12,7 @@ set(qml_files "ElevationEffect.qml" "RadioIndicator.qml" "RectangularGlow.qml" + "RoundedElevationEffect.qml" "SliderHandle.qml" "SwitchIndicator.qml" ) diff --git a/src/quickcontrols/material/impl/ElevationEffect.qml b/src/quickcontrols/material/impl/ElevationEffect.qml index 6690567617..29ec742f4a 100644 --- a/src/quickcontrols/material/impl/ElevationEffect.qml +++ b/src/quickcontrols/material/impl/ElevationEffect.qml @@ -75,106 +75,113 @@ Item { The shadows to use for each possible elevation. There are three shadows that when combined make up the elevation. */ - readonly property var _shadows: [ - [{offset: 0, blur: 0, spread: 0}, - {offset: 0, blur: 0, spread: 0}, - {offset: 0, blur: 0, spread: 0}], - - [{offset: 1, blur: 3, spread: 0}, - {offset: 1, blur: 1, spread: 0}, - {offset: 2, blur: 1, spread: -1}], - - [{offset: 1, blur: 5, spread: 0}, - {offset: 2, blur: 2, spread: 0}, - {offset: 3, blur: 1, spread: -2}], - - [{offset: 1, blur: 8, spread: 0}, - {offset: 3, blur: 4, spread: 0}, - {offset: 3, blur: 3, spread: -2}], - - [{offset: 2, blur: 4, spread: -1}, - {offset: 4, blur: 5, spread: 0}, - {offset: 1, blur: 10, spread: 0}], - - [{offset: 3, blur: 5, spread: -1}, - {offset: 5, blur: 8, spread: 0}, - {offset: 1, blur: 14, spread: 0}], - - [{offset: 3, blur: 5, spread: -1}, - {offset: 6, blur: 10, spread: 0}, - {offset: 1, blur: 18, spread: 0}], - - [{offset: 4, blur: 5, spread: -2}, - {offset: 7, blur: 10, spread: 1}, - {offset: 2, blur: 16, spread: 1}], - - [{offset: 5, blur: 5, spread: -3}, - {offset: 8, blur: 10, spread: 1}, - {offset: 3, blur: 14, spread: 2}], - - [{offset: 5, blur: 6, spread: -3}, - {offset: 9, blur: 12, spread: 1}, - {offset: 3, blur: 16, spread: 2}], - - [{offset: 6, blur: 6, spread: -3}, - {offset: 10, blur: 14, spread: 1}, - {offset: 4, blur: 18, spread: 3}], - - [{offset: 6, blur: 7, spread: -4}, - {offset: 11, blur: 15, spread: 1}, - {offset: 4, blur: 20, spread: 3}], - - [{offset: 7, blur: 8, spread: -4}, - {offset: 12, blur: 17, spread: 2}, - {offset: 5, blur: 22, spread: 4}], - - [{offset: 7, blur: 8, spread: -4}, - {offset: 13, blur: 19, spread: 2}, - {offset: 5, blur: 24, spread: 4}], - - [{offset: 7, blur: 9, spread: -4}, - {offset: 14, blur: 21, spread: 2}, - {offset: 5, blur: 26, spread: 4}], - - [{offset: 8, blur: 9, spread: -5}, - {offset: 15, blur: 22, spread: 2}, - {offset: 6, blur: 28, spread: 5}], - - [{offset: 8, blur: 10, spread: -5}, - {offset: 16, blur: 24, spread: 2}, - {offset: 6, blur: 30, spread: 5}], - - [{offset: 8, blur: 11, spread: -5}, - {offset: 17, blur: 26, spread: 2}, - {offset: 6, blur: 32, spread: 5}], - - [{offset: 9, blur: 11, spread: -5}, - {offset: 18, blur: 28, spread: 2}, - {offset: 7, blur: 34, spread: 6}], - - [{offset: 9, blur: 12, spread: -6}, - {offset: 19, blur: 29, spread: 2}, - {offset: 7, blur: 36, spread: 6}], - - [{offset: 10, blur: 13, spread: -6}, - {offset: 20, blur: 31, spread: 3}, - {offset: 8, blur: 38, spread: 7}], - - [{offset: 10, blur: 13, spread: -6}, - {offset: 21, blur: 33, spread: 3}, - {offset: 8, blur: 40, spread: 7}], - - [{offset: 10, blur: 14, spread: -6}, - {offset: 22, blur: 35, spread: 3}, - {offset: 8, blur: 42, spread: 7}], - - [{offset: 11, blur: 14, spread: -7}, - {offset: 23, blur: 36, spread: 3}, - {offset: 9, blur: 44, spread: 8}], - - [{offset: 11, blur: 15, spread: -7}, - {offset: 24, blur: 38, spread: 3}, - {offset: 9, blur: 46, spread: 8}] + property var _shadows: _defaultShadows + + readonly property var _defaultShadows: [ + { // 0 + angularValues: [ + {offset: 0, blur: 0, spread: 0}, + {offset: 0, blur: 0, spread: 0}, + {offset: 0, blur: 0, spread: 0} + ], + strength: 0.05 + }, + { // 1 + angularValues: [ + {offset: 1, blur: 3, spread: 0}, + {offset: 1, blur: 1, spread: 0}, + {offset: 2, blur: 1, spread: -1} + ], + strength: 0.05 + }, + { // 2 + angularValues: [ + {offset: 1, blur: 5, spread: 0}, + {offset: 2, blur: 2, spread: 0}, + {offset: 3, blur: 1, spread: -2} + ], + strength: 0.05 + }, + { // 3 + angularValues: [ + {offset: 1, blur: 8, spread: 0}, + {offset: 3, blur: 4, spread: 0}, + {offset: 3, blur: 3, spread: -2} + ], + strength: 0.05 + }, + { // 4 + angularValues: [ + {offset: 2, blur: 4, spread: -1}, + {offset: 4, blur: 5, spread: 0}, + {offset: 1, blur: 10, spread: 0} + ], + strength: 0.05 + }, + { // 5 + angularValues: [ + {offset: 3, blur: 5, spread: -1}, + {offset: 5, blur: 8, spread: 0}, + {offset: 1, blur: 14, spread: 0} + ], + strength: 0.05 + }, + { // 6 + angularValues: [ + {offset: 3, blur: 5, spread: -1}, + {offset: 6, blur: 10, spread: 0}, + {offset: 1, blur: 18, spread: 0} + ], + strength: 0.05 + }, + { // 7 + angularValues: [ + {offset: 4, blur: 5, spread: -2}, + {offset: 7, blur: 10, spread: 1}, + {offset: 2, blur: 16, spread: 1} + ], + strength: 0.05 + }, + { // 8 + angularValues: [ + {offset: 5, blur: 5, spread: -3}, + {offset: 8, blur: 10, spread: 1}, + {offset: 3, blur: 14, spread: 2} + ], + strength: 0.05 + }, + { // 9 + angularValues: [ + {offset: 5, blur: 6, spread: -3}, + {offset: 9, blur: 12, spread: 1}, + {offset: 3, blur: 16, spread: 2} + ], + strength: 0.05 + }, + { // 10 + angularValues: [ + {offset: 6, blur: 6, spread: -3}, + {offset: 10, blur: 14, spread: 1}, + {offset: 4, blur: 18, spread: 3} + ], + strength: 0.05 + }, + { // 11 + angularValues: [ + {offset: 6, blur: 7, spread: -4}, + {offset: 11, blur: 15, spread: 1}, + {offset: 4, blur: 20, spread: 3} + ], + strength: 0.05 + }, + { // 12 + angularValues: [ + {offset: 7, blur: 8, spread: -4}, + {offset: 12, blur: 17, spread: 2}, + {offset: 5, blur: 22, spread: 4} + ], + strength: 0.05 + } ] /* @@ -202,9 +209,10 @@ Item { // the size of the parent, so we don't need to worry about the extra padding // in the parent Item BoxShadow { - offsetY: effect._shadow[0].offset - blurRadius: effect._shadow[0].blur - spreadRadius: effect._shadow[0].spread + offsetY: effect._shadow.angularValues[0].offset + blurRadius: effect._shadow.angularValues[0].blur + spreadRadius: effect._shadow.angularValues[0].spread + strength: effect._shadow.strength color: Qt.rgba(0,0,0, 0.2) fullWidth: effect.fullWidth @@ -213,9 +221,10 @@ Item { } BoxShadow { - offsetY: effect._shadow[1].offset - blurRadius: effect._shadow[1].blur - spreadRadius: effect._shadow[1].spread + offsetY: effect._shadow.angularValues[1].offset + blurRadius: effect._shadow.angularValues[1].blur + spreadRadius: effect._shadow.angularValues[1].spread + strength: effect._shadow.strength color: Qt.rgba(0,0,0, 0.14) fullWidth: effect.fullWidth @@ -224,9 +233,10 @@ Item { } BoxShadow { - offsetY: effect._shadow[2].offset - blurRadius: effect._shadow[2].blur - spreadRadius: effect._shadow[2].spread + offsetY: effect._shadow.angularValues[2].offset + blurRadius: effect._shadow.angularValues[2].blur + spreadRadius: effect._shadow.angularValues[2].spread + strength: effect._shadow.strength color: Qt.rgba(0,0,0, 0.12) fullWidth: effect.fullWidth diff --git a/src/quickcontrols/material/impl/RoundedElevationEffect.qml b/src/quickcontrols/material/impl/RoundedElevationEffect.qml new file mode 100644 index 0000000000..c197823dc6 --- /dev/null +++ b/src/quickcontrols/material/impl/RoundedElevationEffect.qml @@ -0,0 +1,35 @@ +// Copyright (C) 2022 The Qt Company Ltd. +// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only + +import QtQuick.Controls.Material +import QtQuick.Controls.Material.impl + +ElevationEffect { + required property int roundedScale + + _shadows: roundedScale === Material.NotRounded ? _defaultShadows : roundedShadows() + + function roundedShadows() { + // Make a deep copy. + let shadows = [..._defaultShadows] + for (let i = 0, strength = 0.95; i < shadows.length; ++i) { + // See comment on BoxShadow's strength property for why we do this. + shadows[i].strength = strength + // We don't want the strength to be too high for the controls with very slightly rounded + // corners, as they are quite close to the non-rounded ones in terms of not needing adjustments. + // This is still not great for the higher elevations for ExtraSmallScale, but it's as good + // as I can get it. + strength = Math.max(0.05, strength - (roundedScale > Material.ExtraSmallScale ? 0.1 : 0.3)) + + // The values at index 0 are already 0, and we don't want our Math.max(1, ...) code to affect them. + if (i > 0) { + // The blur values for e.g. buttons with rounded corners are too large, so we reduce them. + for (let angularShadowIndex = 0; angularShadowIndex < shadows[i].angularValues.length; ++angularShadowIndex) { + shadows[i].angularValues[angularShadowIndex].blur = + Math.max(1, Math.floor(shadows[i].angularValues[angularShadowIndex].blur / 4)) + } + } + } + return shadows + } +} diff --git a/src/quickcontrols/material/impl/qquickmaterialripple.cpp b/src/quickcontrols/material/impl/qquickmaterialripple.cpp index 04e171f190..89648182d4 100644 --- a/src/quickcontrols/material/impl/qquickmaterialripple.cpp +++ b/src/quickcontrols/material/impl/qquickmaterialripple.cpp @@ -227,7 +227,6 @@ void QQuickMaterialRipple::setClipRadius(qreal radius) return; m_clipRadius = radius; - setClip(!qFuzzyIsNull(radius)); update(); } @@ -323,8 +322,7 @@ QSGNode *QQuickMaterialRipple::updatePaintNode(QSGNode *oldNode, UpdatePaintNode QQuickItemPrivate *d = QQuickItemPrivate::get(this); QQuickDefaultClipNode *clipNode = d->clipNode(); if (clipNode) { - // TODO: QTBUG-51894 - // clipNode->setRadius(m_clipRadius); + clipNode->setRadius(m_clipRadius); clipNode->setRect(boundingRect()); clipNode->update(); } diff --git a/src/quickcontrols/material/qquickmaterialstyle.cpp b/src/quickcontrols/material/qquickmaterialstyle.cpp index dbe7347acc..ce745500a2 100644 --- a/src/quickcontrols/material/qquickmaterialstyle.cpp +++ b/src/quickcontrols/material/qquickmaterialstyle.cpp @@ -486,8 +486,6 @@ void QQuickMaterialStyle::themeChange() emit themeChanged(); emit themeOrAccentChanged(); emit primaryHighlightedTextColor(); - emit buttonColorChanged(); - emit buttonDisabledColorChanged(); emit dialogColorChanged(); emit tooltipColorChanged(); emit toolBarColorChanged(); @@ -619,7 +617,6 @@ void QQuickMaterialStyle::accentChange() { emit accentChanged(); emit themeOrAccentChanged(); - emit buttonColorChanged(); } QVariant QQuickMaterialStyle::foreground() const @@ -753,7 +750,6 @@ void QQuickMaterialStyle::resetBackground() void QQuickMaterialStyle::backgroundChange() { emit backgroundChanged(); - emit buttonColorChanged(); emit dialogColorChanged(); emit tooltipColorChanged(); emit toolBarColorChanged(); @@ -781,7 +777,25 @@ void QQuickMaterialStyle::resetElevation() void QQuickMaterialStyle::elevationChange() { emit elevationChanged(); - emit buttonDisabledColorChanged(); +} + +QQuickMaterialStyle::RoundedScale QQuickMaterialStyle::roundedScale() const +{ + return m_roundedScale; +} + +void QQuickMaterialStyle::setRoundedScale(RoundedScale roundedScale) +{ + if (m_roundedScale == roundedScale) + return; + + m_roundedScale = roundedScale; + emit roundedScaleChanged(); +} + +void QQuickMaterialStyle::resetRoundedScale() +{ + setRoundedScale(RoundedScale::NotRounded); } QColor QQuickMaterialStyle::primaryColor() const @@ -874,9 +888,24 @@ QColor QQuickMaterialStyle::iconDisabledColor() const return QColor::fromRgba(m_theme == Light ? iconDisabledColorLight : iconDisabledColorDark); } -QColor QQuickMaterialStyle::buttonColor(bool highlighted, bool checked) const +QColor QQuickMaterialStyle::buttonColor(Theme theme, const QVariant &background, const QVariant &accent, + bool enabled, bool flat, bool highlighted, bool checked) const { + if (flat) + return Qt::transparent; + + if (!enabled) { + return QColor::fromRgba(m_theme == Light + ? raisedButtonDisabledColorLight : raisedButtonDisabledColorDark); + } + + // We don't use theme (and other arguments) here even though we pass it in, as it's + // simpler to just re-use themeShade. We still need the arguments because they allow + // us to be re-called whenever they change. Shade shade = themeShade(); + Q_UNUSED(theme); + Q_UNUSED(background); + Q_UNUSED(accent); QColor color = Qt::transparent; @@ -891,7 +920,8 @@ QColor QQuickMaterialStyle::buttonColor(bool highlighted, bool checked) const // A highlighted + checked button should become darker. color = accentColor(checked ? Shade100 : shade); } - } else if (elevation() > 0) { + } else { + // Even if the elevation is zero, it should still have a background if it's not flat. color = QColor::fromRgba(m_theme == Light ? raisedButtonColorLight : raisedButtonColorDark); } @@ -899,31 +929,6 @@ QColor QQuickMaterialStyle::buttonColor(bool highlighted, bool checked) const return color; } -QColor QQuickMaterialStyle::buttonColor() const -{ - return buttonColor(false); -} - -QColor QQuickMaterialStyle::buttonDisabledColor() const -{ - if (elevation() > 0) { - return QColor::fromRgba(m_theme == Light ? raisedButtonDisabledColorLight - : raisedButtonDisabledColorDark); - } else { - return Qt::transparent; - } -} - -QColor QQuickMaterialStyle::highlightedButtonColor() const -{ - return buttonColor(true); -} - -QColor QQuickMaterialStyle::highlightedCheckedButtonColor() const -{ - return buttonColor(true, true); -} - QColor QQuickMaterialStyle::frameColor() const { return QColor::fromRgba(m_theme == Light ? frameColorLight : frameColorDark); @@ -1168,8 +1173,8 @@ int QQuickMaterialStyle::touchTarget() const int QQuickMaterialStyle::buttonHeight() const { - // https://material.io/guidelines/components/buttons.html#buttons-style - return globalVariant == Dense ? 32 : 36; + // https://m3.material.io/components/buttons/specs#256326ad-f934-40e7-b05f-0bcb41aa4382 + return globalVariant == Dense ? 32 : 40; } int QQuickMaterialStyle::delegateHeight() const diff --git a/src/quickcontrols/material/qquickmaterialstyle_p.h b/src/quickcontrols/material/qquickmaterialstyle_p.h index 99344a6192..56e541ce07 100644 --- a/src/quickcontrols/material/qquickmaterialstyle_p.h +++ b/src/quickcontrols/material/qquickmaterialstyle_p.h @@ -30,6 +30,8 @@ class QQuickMaterialStyle : public QQuickAttachedPropertyPropagator Q_PROPERTY(QVariant foreground READ foreground WRITE setForeground RESET resetForeground NOTIFY foregroundChanged FINAL) Q_PROPERTY(QVariant background READ background WRITE setBackground RESET resetBackground NOTIFY backgroundChanged FINAL) Q_PROPERTY(int elevation READ elevation WRITE setElevation RESET resetElevation NOTIFY elevationChanged FINAL) + Q_PROPERTY(RoundedScale roundedScale READ roundedScale WRITE setRoundedScale RESET resetRoundedScale + NOTIFY roundedScaleChanged FINAL) Q_PROPERTY(QColor primaryColor READ primaryColor NOTIFY primaryChanged FINAL) // TODO: remove? Q_PROPERTY(QColor accentColor READ accentColor NOTIFY accentChanged FINAL) // TODO: remove? @@ -43,10 +45,6 @@ class QQuickMaterialStyle : public QQuickAttachedPropertyPropagator Q_PROPERTY(QColor dividerColor READ dividerColor NOTIFY themeChanged FINAL) Q_PROPERTY(QColor iconColor READ iconColor NOTIFY themeChanged FINAL) Q_PROPERTY(QColor iconDisabledColor READ iconDisabledColor NOTIFY themeChanged FINAL) - Q_PROPERTY(QColor buttonColor READ buttonColor NOTIFY buttonColorChanged FINAL) - Q_PROPERTY(QColor buttonDisabledColor READ buttonDisabledColor NOTIFY buttonDisabledColorChanged FINAL) - Q_PROPERTY(QColor highlightedButtonColor READ highlightedButtonColor NOTIFY buttonColorChanged FINAL) - Q_PROPERTY(QColor highlightedCheckedButtonColor READ highlightedCheckedButtonColor NOTIFY buttonColorChanged FINAL REVISION(6, 2)) Q_PROPERTY(QColor frameColor READ frameColor NOTIFY themeChanged FINAL) Q_PROPERTY(QColor rippleColor READ rippleColor NOTIFY themeChanged FINAL) Q_PROPERTY(QColor highlightedRippleColor READ highlightedRippleColor NOTIFY themeOrAccentChanged FINAL) @@ -134,10 +132,21 @@ public: ShadeA700, }; + enum class RoundedScale { + NotRounded, + ExtraSmallScale = 4, + SmallScale = 8, + MediumScale = 12, + LargeScale = 16, + ExtraLargeScale = 28, + FullScale = 0xFF // For full we use half the height of the item. + }; + Q_ENUM(Theme) Q_ENUM(Variant) Q_ENUM(Color) Q_ENUM(Shade) + Q_ENUM(RoundedScale) explicit QQuickMaterialStyle(QObject *parent = nullptr); @@ -183,6 +192,10 @@ public: void resetElevation(); void elevationChange(); + RoundedScale roundedScale() const; + void setRoundedScale(RoundedScale roundedScale); + void resetRoundedScale(); + QColor primaryColor() const; QColor accentColor() const; QColor backgroundColor() const; @@ -195,11 +208,8 @@ public: QColor dividerColor() const; QColor iconColor() const; QColor iconDisabledColor() const; - QColor buttonColor() const; - QColor buttonDisabledColor() const; - QColor highlightedButtonColor() const; - QColor highlightedCheckedButtonColor() const; - QColor highlightedButtonDisabledColor() const; + Q_INVOKABLE QColor buttonColor(Theme theme, const QVariant &background, const QVariant &accent, + bool enabled, bool flat, bool highlighted, bool checked) const; QColor frameColor() const; QColor rippleColor() const; QColor highlightedRippleColor() const; @@ -249,12 +259,11 @@ Q_SIGNALS: void themeOrAccentChanged(); void primaryHighlightedTextColorChanged(); - void buttonColorChanged(); - void buttonDisabledColorChanged(); void dialogColorChanged(); void tooltipColorChanged(); void toolBarColorChanged(); void toolTextColorChanged(); + void roundedScaleChanged(); protected: void attachedParentChange(QQuickAttachedPropertyPropagator *newParent, QQuickAttachedPropertyPropagator *oldParent) override; @@ -265,7 +274,7 @@ private: QColor backgroundColor(Shade shade) const; QColor accentColor(Shade shade) const; - QColor buttonColor(bool highlighted, bool checked = false) const; + Shade themeShade() const; // These reflect whether a color value was explicitly set on the specific @@ -295,6 +304,7 @@ private: uint m_foreground = 0; uint m_background = 0; int m_elevation = 0; + RoundedScale m_roundedScale = RoundedScale::NotRounded; }; QT_END_NAMESPACE |