aboutsummaryrefslogtreecommitdiffstats
path: root/src/quickcontrols
diff options
context:
space:
mode:
Diffstat (limited to 'src/quickcontrols')
-rw-r--r--src/quickcontrols/doc/src/external-pages.qdoc5
-rw-r--r--src/quickcontrols/doc/src/qtquickcontrols-material.qdoc24
-rw-r--r--src/quickcontrols/material/Button.qml45
-rw-r--r--src/quickcontrols/material/DelayButton.qml5
-rw-r--r--src/quickcontrols/material/RoundButton.qml9
-rw-r--r--src/quickcontrols/material/impl/BoxShadow.qml17
-rw-r--r--src/quickcontrols/material/impl/CMakeLists.txt1
-rw-r--r--src/quickcontrols/material/impl/ElevationEffect.qml228
-rw-r--r--src/quickcontrols/material/impl/RoundedElevationEffect.qml35
-rw-r--r--src/quickcontrols/material/impl/qquickmaterialripple.cpp4
-rw-r--r--src/quickcontrols/material/qquickmaterialstyle.cpp73
-rw-r--r--src/quickcontrols/material/qquickmaterialstyle_p.h34
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
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-09 21:53:18 +0000