From d7f47127dadc10adb2c98f1803f5a8d2966491ba Mon Sep 17 00:00:00 2001 From: Mitch Curtis Date: Mon, 30 Jan 2023 17:42:44 +0800 Subject: Update Material Dialog to Material 3 Fixes: QTBUG-109035 Pick-to: 6.5 Change-Id: Idf4bf0a114529dd1715c4b9db0b3fdeea5b78bf1 Reviewed-by: Oliver Eftevaag --- src/quickcontrols/material/Dialog.qml | 25 +++++++++++++++++-------- src/quickcontrols/material/DialogButtonBox.qml | 7 ++++--- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/src/quickcontrols/material/Dialog.qml b/src/quickcontrols/material/Dialog.qml index 72f11ffd22..33d8ce97d1 100644 --- a/src/quickcontrols/material/Dialog.qml +++ b/src/quickcontrols/material/Dialog.qml @@ -19,10 +19,17 @@ T.Dialog { + (implicitHeaderHeight > 0 ? implicitHeaderHeight + spacing : 0) + (implicitFooterHeight > 0 ? implicitFooterHeight + spacing : 0)) + // https://m3.material.io/components/dialogs/specs#7dbad5e0-f001-4eae-a536-694aeca90ba6 padding: 24 - topPadding: 20 + topPadding: 16 + // https://m3.material.io/components/dialogs/guidelines#812cedf1-5c45-453f-97fc-7fd9bba7522b + modal: true - Material.elevation: 24 + // https://m3.material.io/components/dialogs/specs#401a48c3-f50c-4fa9-b798-701f5adcf155 + // Specs say level 3 (6 dp) is the default, yet the screenshots there show 0. Native Android defaults to non-zero. + Material.elevation: 6 + // https://m3.material.io/components/dialogs/specs#6771d107-624e-47cc-b6d8-2b7b620ba2f1 + Material.roundedScale: Material.ExtraLargeScale enter: Transition { // grow_fade_in @@ -37,12 +44,14 @@ T.Dialog { } background: Rectangle { - radius: 2 + // FullScale doesn't make sense for Dialog. + radius: control.Material.roundedScale color: control.Material.dialogColor layer.enabled: control.Material.elevation > 0 - layer.effect: ElevationEffect { + layer.effect: RoundedElevationEffect { elevation: control.Material.elevation + roundedScale: control.background.radius } } @@ -53,12 +62,12 @@ T.Dialog { padding: 24 bottomPadding: 0 // TODO: QPlatformTheme::TitleBarFont - font.bold: true - font.pixelSize: 16 + // https://m3.material.io/components/dialogs/specs#401a48c3-f50c-4fa9-b798-701f5adcf155 + font.pixelSize: 24 background: PaddedRectangle { - radius: 2 + radius: control.background.radius color: control.Material.dialogColor - bottomPadding: -2 + bottomPadding: -radius clip: true } } diff --git a/src/quickcontrols/material/DialogButtonBox.qml b/src/quickcontrols/material/DialogButtonBox.qml index dad1601931..55b2011c83 100644 --- a/src/quickcontrols/material/DialogButtonBox.qml +++ b/src/quickcontrols/material/DialogButtonBox.qml @@ -22,6 +22,7 @@ T.DialogButtonBox { buttonLayout: T.DialogButtonBox.AndroidLayout Material.foreground: Material.accent + Material.roundedScale: Material.ExtraLargeScale delegate: Button { flat: true } @@ -36,11 +37,11 @@ T.DialogButtonBox { background: PaddedRectangle { implicitHeight: control.Material.dialogButtonBoxHeight - radius: 2 + radius: control.Material.roundedScale color: control.Material.dialogColor // Rounded corners should be only at the top or at the bottom - topPadding: control.position === T.DialogButtonBox.Footer ? -2 : 0 - bottomPadding: control.position === T.DialogButtonBox.Header ? -2 : 0 + topPadding: control.position === T.DialogButtonBox.Footer ? -radius : 0 + bottomPadding: control.position === T.DialogButtonBox.Header ? -radius : 0 clip: true } } -- cgit v1.2.3