Add QQuickDialog::title

Dialog is incomplete without built-in support for title. All dialogs in
the examples, screenshots, webinars, and blog posts have had a custom
title. The Material and Universal designs both have specs for dialog
titles. This commit adds support for dialog titles with appropriate
looks (padding & font) out of the box.

Task-number: QTBUG-56711
Change-Id: I248150313f1ce629a7105fdbe1c70c8fcd69e1cc
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

4 files changed, 49 insertions, 0 deletions

diff --git a/src/imports/controls/Dialog.qml b/src/imports/controls/Dialog.qml
index 3322a6ea..a26928c1 100644
--- a/src/imports/controls/Dialog.qml
+++ b/src/imports/controls/Dialog.qml
@@ -59,6 +59,19 @@ T.Dialog {
         border.color: Default.frameDarkColor
     }
 
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        font.bold: true
+        padding: 12
+        background: Rectangle {
+            x: 1; y: 1
+            width: parent.width - 2
+            height: parent.height - 1
+        }
+    }
+
     footer: DialogButtonBox {
         visible: count > 0
     }
diff --git a/src/imports/controls/doc/snippets/qtquickcontrols2-dialog.qml b/src/imports/controls/doc/snippets/qtquickcontrols2-dialog.qml
index c5de0b71..69e84914 100644
--- a/src/imports/controls/doc/snippets/qtquickcontrols2-dialog.qml
+++ b/src/imports/controls/doc/snippets/qtquickcontrols2-dialog.qml
@@ -34,6 +34,7 @@ Item {
 //! [1]
 Dialog {
     id: dialog
+    title: "Title"
     standardButtons: Dialog.Ok | Dialog.Cancel
 
     onAccepted: console.log("Ok clicked")
diff --git a/src/imports/controls/material/Dialog.qml b/src/imports/controls/material/Dialog.qml
index 7e9fafbe..ddc80895 100644
--- a/src/imports/controls/material/Dialog.qml
+++ b/src/imports/controls/material/Dialog.qml
@@ -55,6 +55,7 @@ T.Dialog {
     contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
 
     padding: 24
+    topPadding: 20
 
     Material.elevation: 24
 
@@ -80,6 +81,23 @@ T.Dialog {
         }
     }
 
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        padding: 24
+        bottomPadding: 0
+        // TODO: QPlatformTheme::TitleBarFont
+        font.bold: true
+        font.pixelSize: 16
+        background: PaddedRectangle {
+            radius: 2
+            color: control.Material.dialogColor
+            bottomPadding: -2
+            clip: true
+        }
+    }
+
     footer: DialogButtonBox {
         visible: count > 0
     }
diff --git a/src/imports/controls/universal/Dialog.qml b/src/imports/controls/universal/Dialog.qml
index bff289d9..ce34fd07 100644
--- a/src/imports/controls/universal/Dialog.qml
+++ b/src/imports/controls/universal/Dialog.qml
@@ -63,6 +63,23 @@ T.Dialog {
         border.width: 1 // FlyoutBorderThemeThickness
     }
 
+    header: Label {
+        text: control.title
+        visible: control.title
+        elide: Label.ElideRight
+        topPadding: 18
+        leftPadding: 24
+        rightPadding: 24
+        // TODO: QPlatformTheme::TitleBarFont
+        font.pixelSize: 20
+        background: Rectangle {
+            x: 1; y: 1 // // FlyoutBorderThemeThickness
+            color: control.Universal.chromeMediumLowColor
+            width: parent.width - 2
+            height: parent.height - 1
+        }
+    }
+
     footer: DialogButtonBox {
         visible: count > 0
     }