Page: provide implicit size

Even though the control was designed to be used as full-screen page, it
can be sometimes useful to have non-fullscreen pages. In order to make
Page behave well in layouts, it must provide a suitable implicit size.

[ChangeLog][Controls][Page] Page has been made to calculate its
implicit size based on the implicit size of the header, content, and
footer plus paddings, and the implicit size of the background item.

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

7 files changed, 207 insertions, 0 deletions

diff --git a/src/imports/controls/Page.qml b/src/imports/controls/Page.qml
index 630f8426..fbed527f 100644
--- a/src/imports/controls/Page.qml
+++ b/src/imports/controls/Page.qml
@@ -42,6 +42,18 @@ import QtQuick.Templates 2.1 as T
 T.Page {
     id: control
 
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            Math.max(contentWidth,
+                                     header && header.visible ? header.implicitWidth : 0,
+                                     footer && footer.visible ? footer.implicitWidth : 0) + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentHeight + topPadding + bottomPadding
+                             + (header && header.visible ? header.implicitHeight : 0)
+                             + (footer && footer.visible ? footer.implicitHeight : 0))
+
+    contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0)
+    contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
+
     //! [background]
     background: Rectangle {
         color: Default.backgroundColor
diff --git a/src/imports/controls/material/Page.qml b/src/imports/controls/material/Page.qml
index ec343d04..707d471e 100644
--- a/src/imports/controls/material/Page.qml
+++ b/src/imports/controls/material/Page.qml
@@ -41,6 +41,18 @@ import QtQuick.Controls.Material 2.1
 T.Page {
     id: control
 
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            Math.max(contentWidth,
+                                     header && header.visible ? header.implicitWidth : 0,
+                                     footer && footer.visible ? footer.implicitWidth : 0) + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentHeight + topPadding + bottomPadding
+                             + (header && header.visible ? header.implicitHeight : 0)
+                             + (footer && footer.visible ? footer.implicitHeight : 0))
+
+    contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0)
+    contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
+
     background: Rectangle {
         color: control.Material.backgroundColor
     }
diff --git a/src/imports/controls/universal/Page.qml b/src/imports/controls/universal/Page.qml
index 7b7efa44..9bd85751 100644
--- a/src/imports/controls/universal/Page.qml
+++ b/src/imports/controls/universal/Page.qml
@@ -41,6 +41,18 @@ import QtQuick.Controls.Universal 2.1
 T.Page {
     id: control
 
+    implicitWidth: Math.max(background ? background.implicitWidth : 0,
+                            Math.max(contentWidth,
+                                     header && header.visible ? header.implicitWidth : 0,
+                                     footer && footer.visible ? footer.implicitWidth : 0) + leftPadding + rightPadding)
+    implicitHeight: Math.max(background ? background.implicitHeight : 0,
+                             contentHeight + topPadding + bottomPadding
+                             + (header && header.visible ? header.implicitHeight : 0)
+                             + (footer && footer.visible ? footer.implicitHeight : 0))
+
+    contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0)
+    contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
+
     background: Rectangle {
         color: control.Universal.background
     }
diff --git a/src/imports/templates/qtquicktemplates2plugin.cpp b/src/imports/templates/qtquicktemplates2plugin.cpp
index cc344a80..3a124860 100644
--- a/src/imports/templates/qtquicktemplates2plugin.cpp
+++ b/src/imports/templates/qtquicktemplates2plugin.cpp
@@ -186,6 +186,7 @@ void QtQuickTemplates2Plugin::registerTypes(const char *uri)
     qmlRegisterType<QQuickDialogButtonBox>(uri, 2, 1, "DialogButtonBox");
     qmlRegisterType<QQuickDialogButtonBoxAttached>();
     qmlRegisterType<QQuickMenuSeparator>(uri, 2, 1, "MenuSeparator");
+    qmlRegisterType<QQuickPage, 1>(uri, 2, 1, "Page");
     qmlRegisterType<QQuickRangeSlider, 1>(uri, 2, 1, "RangeSlider");
     qmlRegisterType<QQuickRoundButton, 1>(uri, 2, 1, "RoundButton");
     qmlRegisterType<QQuickSlider, 1>(uri, 2, 1, "Slider");
diff --git a/src/quicktemplates2/qquickpage.cpp b/src/quicktemplates2/qquickpage.cpp
index 88eb03bf..0098cb93 100644
--- a/src/quicktemplates2/qquickpage.cpp
+++ b/src/quicktemplates2/qquickpage.cpp
@@ -87,12 +87,22 @@ class QQuickPagePrivate : public QQuickControlPrivate
     Q_DECLARE_PUBLIC(QQuickPage)
 
 public:
+    QQuickPagePrivate();
+
     QQuickItem *getContentItem() override;
 
+    qreal contentWidth;
+    qreal contentHeight;
     QString title;
     QScopedPointer<QQuickPageLayout> layout;
 };
 
+QQuickPagePrivate::QQuickPagePrivate()
+    : contentWidth(0),
+      contentHeight(0)
+{
+}
+
 QQuickItem *QQuickPagePrivate::getContentItem()
 {
     Q_Q(QQuickPage);
@@ -219,6 +229,56 @@ void QQuickPage::setFooter(QQuickItem *footer)
 }
 
 /*!
+    \qmlproperty real QtQuick.Controls::Page::contentWidth
+    \since QtQuick.Controls 2.1
+
+    This property holds the content width. It is used for calculating the total
+    implicit width of the page.
+
+    \sa contentHeight
+*/
+qreal QQuickPage::contentWidth() const
+{
+    Q_D(const QQuickPage);
+    return d->contentWidth;
+}
+
+void QQuickPage::setContentWidth(qreal width)
+{
+    Q_D(QQuickPage);
+    if (qFuzzyCompare(d->contentWidth, width))
+        return;
+
+    d->contentWidth = width;
+    emit contentWidthChanged();
+}
+
+/*!
+    \qmlproperty real QtQuick.Controls::Page::contentHeight
+    \since QtQuick.Controls 2.1
+
+    This property holds the content height. It is used for calculating the total
+    implicit height of the page.
+
+    \sa contentWidth
+*/
+qreal QQuickPage::contentHeight() const
+{
+    Q_D(const QQuickPage);
+    return d->contentHeight;
+}
+
+void QQuickPage::setContentHeight(qreal height)
+{
+    Q_D(QQuickPage);
+    if (qFuzzyCompare(d->contentHeight, height))
+        return;
+
+    d->contentHeight = height;
+    emit contentHeightChanged();
+}
+
+/*!
     \qmlproperty list<Object> QtQuick.Controls::Page::contentData
     \default
 
diff --git a/src/quicktemplates2/qquickpage_p.h b/src/quicktemplates2/qquickpage_p.h
index 2cb77378..c63b11d7 100644
--- a/src/quicktemplates2/qquickpage_p.h
+++ b/src/quicktemplates2/qquickpage_p.h
@@ -61,6 +61,8 @@ class Q_QUICKTEMPLATES2_PRIVATE_EXPORT QQuickPage : public QQuickControl
     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(qreal contentWidth READ contentWidth WRITE setContentWidth NOTIFY contentWidthChanged FINAL REVISION 1)
+    Q_PROPERTY(qreal contentHeight READ contentHeight WRITE setContentHeight NOTIFY contentHeightChanged FINAL REVISION 1)
     Q_PROPERTY(QQmlListProperty<QObject> contentData READ contentData FINAL)
     Q_PROPERTY(QQmlListProperty<QQuickItem> contentChildren READ contentChildren NOTIFY contentChildrenChanged FINAL)
     Q_CLASSINFO("DefaultProperty", "contentData")
@@ -77,6 +79,12 @@ public:
     QQuickItem *footer() const;
     void setFooter(QQuickItem *footer);
 
+    qreal contentWidth() const;
+    void setContentWidth(qreal width);
+
+    qreal contentHeight() const;
+    void setContentHeight(qreal height);
+
     QQmlListProperty<QObject> contentData();
     QQmlListProperty<QQuickItem> contentChildren();
 
@@ -84,6 +92,8 @@ Q_SIGNALS:
     void titleChanged();
     void headerChanged();
     void footerChanged();
+    Q_REVISION(1) void contentWidthChanged();
+    Q_REVISION(1) void contentHeightChanged();
     void contentChildrenChanged();
 
 protected:
diff --git a/tests/auto/controls/data/tst_page.qml b/tests/auto/controls/data/tst_page.qml
index 3cd6b7b8..a1cdbf8e 100644
--- a/tests/auto/controls/data/tst_page.qml
+++ b/tests/auto/controls/data/tst_page.qml
@@ -56,6 +56,40 @@ TestCase {
     }
 
     Component {
+        id: oneChildPage
+        Page {
+            Item {
+                implicitWidth: 100
+                implicitHeight: 30
+            }
+        }
+    }
+
+    Component {
+        id: twoChildrenPage
+        Page {
+            Item {
+                implicitWidth: 100
+                implicitHeight: 30
+            }
+            Item {
+                implicitWidth: 200
+                implicitHeight: 60
+            }
+        }
+    }
+
+    Component {
+        id: contentPage
+        Page {
+            contentItem: Item {
+                implicitWidth: 100
+                implicitHeight: 30
+            }
+        }
+    }
+
+    Component {
         id: toolBar
         ToolBar { }
     }
@@ -71,6 +105,53 @@ TestCase {
         control.destroy()
     }
 
+    function test_empty() {
+        var control = page.createObject(testCase)
+        verify(control)
+
+        verify(control.contentItem)
+        compare(control.contentWidth, 0)
+        compare(control.contentHeight, 0)
+
+        control.destroy()
+    }
+
+    function test_oneChild() {
+        var control = oneChildPage.createObject(testCase)
+        verify(control)
+
+        compare(control.contentWidth, 100)
+        compare(control.contentHeight, 30)
+        compare(control.implicitWidth, 100 + control.leftPadding + control.rightPadding)
+        compare(control.implicitHeight, 30 + control.topPadding + control.bottomPadding)
+
+        control.destroy()
+    }
+
+    function test_twoChildren() {
+        var control = twoChildrenPage.createObject(testCase)
+        verify(control)
+
+        compare(control.contentWidth, 0)
+        compare(control.contentHeight, 0)
+        compare(control.implicitWidth, control.leftPadding + control.rightPadding)
+        compare(control.implicitHeight, control.topPadding + control.bottomPadding)
+
+        control.destroy()
+    }
+
+    function test_contentItem() {
+        var control = contentPage.createObject(testCase)
+        verify(control)
+
+        compare(control.contentWidth, 100)
+        compare(control.contentHeight, 30)
+        compare(control.implicitWidth, 100 + control.leftPadding + control.rightPadding)
+        compare(control.implicitHeight, 30 + control.topPadding + control.bottomPadding)
+
+        control.destroy()
+    }
+
     function test_layout() {
         var control = page.createObject(testCase, {width: 100, height: 100})
         verify(control)
@@ -124,6 +205,25 @@ TestCase {
         compare(control.contentItem.width, control.availableWidth)
         compare(control.contentItem.height, control.availableHeight)
 
+        control.contentItem.implicitWidth = 50
+        control.contentItem.implicitHeight = 60
+        compare(control.implicitWidth, control.contentItem.implicitWidth + control.leftPadding + control.rightPadding)
+        compare(control.implicitHeight, control.contentItem.implicitHeight + control.topPadding + control.bottomPadding)
+
+        control.header.visible = true
+        compare(control.implicitHeight, control.contentItem.implicitHeight + control.topPadding + control.bottomPadding
+                                      + control.header.implicitHeight + control.spacing)
+
+        control.footer.visible = true
+        compare(control.implicitHeight, control.contentItem.implicitHeight + control.topPadding + control.bottomPadding
+                                      + control.header.implicitHeight + control.footer.implicitHeight + 2 * control.spacing)
+
+        control.header.implicitWidth = 150
+        compare(control.implicitWidth, control.header.implicitWidth + control.leftPadding + control.rightPadding)
+
+        control.footer.implicitWidth = 160
+        compare(control.implicitWidth, control.footer.implicitWidth + control.leftPadding + control.rightPadding)
+
         control.destroy()
     }
 }