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>

7 files changed, 92 insertions, 1 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
     }
diff --git a/src/quicktemplates2/qquickdialog.cpp b/src/quicktemplates2/qquickdialog.cpp
index 356e6c27..05e0f26d 100644
--- a/src/quicktemplates2/qquickdialog.cpp
+++ b/src/quicktemplates2/qquickdialog.cpp
@@ -56,7 +56,10 @@ QT_BEGIN_NAMESPACE
 
     \image qtquickcontrols2-page-wireframe.png
 
-    \section1 Dialog Buttons
+    \section1 Dialog Title and Buttons
+
+    Dialog's \l title is displayed by a style-specific title bar that is assigned
+    as a dialog \l header by default.
 
     Dialog's standard buttons are managed by a \l DialogButtonBox that is assigned
     as a dialog \l footer by default. The dialog's \l standardButtons property is
@@ -119,6 +122,39 @@ QQuickDialog::QQuickDialog(QObject *parent) :
 }
 
 /*!
+    \qmlproperty string QtQuick.Controls::Dialog::title
+
+    This property holds the dialog title.
+
+    The title is displayed in the dialog header.
+
+    \code
+    Dialog {
+        title: qsTr("About")
+
+        Label {
+            text: "Lorem ipsum..."
+        }
+    }
+    \endcode
+*/
+QString QQuickDialog::title() const
+{
+    Q_D(const QQuickDialog);
+    return d->title;
+}
+
+void QQuickDialog::setTitle(const QString &title)
+{
+    Q_D(QQuickDialog);
+    if (d->title == title)
+        return;
+
+    d->title = title;
+    emit titleChanged();
+}
+
+/*!
     \qmlproperty Item QtQuick.Controls::Dialog::header
 
     This property holds the dialog header item. The header item is positioned to
diff --git a/src/quicktemplates2/qquickdialog_p.h b/src/quicktemplates2/qquickdialog_p.h
index 1cd50f4a..ff8a1e79 100644
--- a/src/quicktemplates2/qquickdialog_p.h
+++ b/src/quicktemplates2/qquickdialog_p.h
@@ -58,6 +58,7 @@ class QQuickDialogPrivate;
 class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickDialog : public QQuickPopup
 {
     Q_OBJECT
+    Q_PROPERTY(QString title READ title WRITE setTitle NOTIFY titleChanged FINAL)
     Q_PROPERTY(QQuickItem *header READ header WRITE setHeader NOTIFY headerChanged FINAL)
     Q_PROPERTY(QQuickItem *footer READ footer WRITE setFooter NOTIFY footerChanged FINAL)
     Q_PROPERTY(QPlatformDialogHelper::StandardButtons standardButtons READ standardButtons WRITE setStandardButtons NOTIFY standardButtonsChanged FINAL)
@@ -66,6 +67,9 @@ class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickDialog : public QQuickPopup
 public:
     explicit QQuickDialog(QObject *parent = nullptr);
 
+    QString title() const;
+    void setTitle(const QString &title);
+
     QQuickItem *header() const;
     void setHeader(QQuickItem *header);
 
@@ -83,6 +87,7 @@ Q_SIGNALS:
     void accepted();
     void rejected();
 
+    void titleChanged();
     void headerChanged();
     void footerChanged();
     void standardButtonsChanged();
diff --git a/src/quicktemplates2/qquickdialog_p_p.h b/src/quicktemplates2/qquickdialog_p_p.h
index e5ac7066..5ea84cc8 100644
--- a/src/quicktemplates2/qquickdialog_p_p.h
+++ b/src/quicktemplates2/qquickdialog_p_p.h
@@ -67,6 +67,7 @@ public:
         return dialog->d_func();
     }
 
+    QString title;
     QQuickDialogButtonBox *buttonBox;
     QScopedPointer<QQuickPageLayout> layout;
     QPlatformDialogHelper::StandardButtons standardButtons;