Fix missing margins and incorrect size for ToolBar and StatusBar

Using the implicitHeight of an item makes ToolBar and StatusBar
a lot more useable with layouts. In addition we enable the padding
property from the style, allowing its content to be positioned
in a more convenient way. This is similar to how we already do it
for GroupBox.

Change-Id: Ia2aa1bcb9ae109718fd752401400222adec242ac
Reviewed-by: Gabriel de Dietrich <gabriel.dedietrich@digia.com>

2 files changed, 140 insertions, 23 deletions

diff --git a/src/controls/StatusBar.qml b/src/controls/StatusBar.qml
index 13edc5ef..068b6b20 100644
--- a/src/controls/StatusBar.qml
+++ b/src/controls/StatusBar.qml
@@ -52,14 +52,20 @@ import QtQuick.Controls.Private 1.0
     The common way of using StatusBar is in relation to \l ApplicationWindow.
 
     Note that the StatusBar does not provide a layout of its own, but requires
-    you to position its contents, for instance by creating a \l Row.
+    you to position its contents, for instance by creating a \l RowLayout.
+
+    If only a single item is used within the StatusBar, it will resize to fit the implicitHeight
+    of its contained item. This makes it particularly suitable for use together with layouts.
+    Otherwise the height is platform dependent.
 
     \code
+    import QtQuick.Controls 1.0
+    import QtQuick.Layouts 1.0
+
     ApplicationWindow {
         statusBar: StatusBar {
-            Label {
-                text: "Read Only"
-                anchors.centerIn: parent
+            RowLayout {
+                Label { text: "Read Only" }
             }
         }
     }
@@ -68,16 +74,68 @@ import QtQuick.Controls.Private 1.0
 
 Item {
     id: statusbar
+
     activeFocusOnTab: false
     Accessible.role: Accessible.StatusBar
+
     width: parent ? parent.width : implicitWidth
-    implicitWidth: loader.item.implicitHeight
-    implicitHeight: loader.item ? loader.item.implicitHeight : 0
+    implicitWidth:  loader.item ? loader.item.implicitWidth : 200
+    implicitHeight: Math.max(container.topMargin + container.bottomMargin + container.calcHeight(),
+                             loader.item ? loader.item.implicitHeight : 19)
+
+    /*! \internal */
     property Component style: Qt.createComponent(Settings.style + "/StatusBarStyle.qml", statusbar)
-    Loader {
-        id: loader
-        anchors.fill: parent
-        sourceComponent: style
-        property var __control: statusbar
-    }
+
+    /*! \internal */
+    property alias __style: styleLoader.item
+
+    /*! \internal */
+    default property alias __content: container.data
+
+    /*!
+        \qmlproperty Item StatusBar::contentItem
+
+        This property holds the content Item of the status bar.
+
+        Items declared as children of a StatusBar are automatically parented to the StatusBar's contentItem.
+        Items created dynamically need to be explicitly parented to the contentItem:
+
+        \note The implicit size of the StatusBar is calculated based on the size of its content. If you want to anchor
+        items inside the status bar, you must specify an explicit width and height on the StatusBar itself.
+    */
+    readonly property alias contentItem: container
+
+    data: [
+        Loader {
+            id: loader
+            anchors.fill: parent
+            sourceComponent: styleLoader.item ? styleLoader.item.panel : null
+            onLoaded: item.z = -1
+            Loader {
+                id: styleLoader
+                property alias __control: statusbar
+                sourceComponent: style
+            }
+        },
+        Item {
+            id: container
+            z: 1
+            focus: true
+            anchors.fill: parent
+
+            anchors.topMargin: topMargin
+            anchors.leftMargin: leftMargin
+            anchors.rightMargin: rightMargin
+            anchors.bottomMargin: bottomMargin
+
+            property int topMargin: __style ? __style.padding.top : 0
+            property int bottomMargin: __style ? __style.padding.bottom : 0
+            property int leftMargin: __style ? __style.padding.left : 0
+            property int rightMargin: __style ? __style.padding.right : 0
+
+            property Item layoutItem: container.children.length === 1 ? container.children[0] : null
+            function calcHeight () { return (layoutItem ? (layoutItem.implicitHeight || layoutItem.height) +
+                                                          (layoutItem.anchors.fill ? layoutItem.anchors.topMargin +
+                                                                                     layoutItem.anchors.bottomMargin : 0) : loader.item ? loader.item.implicitHeight : 0) }
+        }]
 }
diff --git a/src/controls/ToolBar.qml b/src/controls/ToolBar.qml
index d2adea56..e5cc8419 100644
--- a/src/controls/ToolBar.qml
+++ b/src/controls/ToolBar.qml
@@ -53,13 +53,20 @@ import QtQuick.Controls.Private 1.0
     provides styling and is generally designed to work well with ToolButton as
     well as other controls.
 
-    Note that the ToolBar does not provide a layout of its own, but requires you
-    to position its contents, for instance by creating a Row.
+    Note that the ToolBar does not provide a layout of its own, but requires
+    you to position its contents, for instance by creating a \l RowLayout.
+
+    If only a single item is used within the ToolBar, it will resize to fit the implicitHeight
+    of its contained item. This makes it particularly suitable for use together with layouts.
+    Otherwise the height is platform dependent.
 
     \code
+    import QtQuick.Controls 1.0
+    import QtQuick.Layouts 1.0
+
     ApplicationWindow {
         toolBar: ToolBar {
-            Row {
+            RowLayout {
                 ToolButton { ... }
                 ToolButton { ... }
                 ToolButton { ... }
@@ -71,16 +78,68 @@ import QtQuick.Controls.Private 1.0
 
 Item {
     id: toolbar
+
     activeFocusOnTab: false
     Accessible.role: Accessible.ToolBar
+
     width: parent ? parent.width : implicitWidth
-    implicitWidth: loader.item ? loader.item.implicitWidth : 0
-    implicitHeight: loader.item ? loader.item.implicitHeight : 0
+    implicitWidth:  loader.item ? loader.item.implicitWidth : 200
+    implicitHeight: container.topMargin + container.bottomMargin + container.calcHeight()
+
+    /*! \internal */
     property Component style: Qt.createComponent(Settings.style + "/ToolBarStyle.qml", toolbar)
-    Loader {
-        id: loader
-        anchors.fill: parent
-        sourceComponent: style
-        property var __control: toolbar
-    }
+
+    /*! \internal */
+    property alias __style: styleLoader.item
+
+    /*! \internal */
+    default property alias __content: container.data
+
+    /*!
+        \qmlproperty Item ToolBar::contentItem
+
+        This property holds the content Item of the tool bar.
+
+        Items declared as children of a ToolBar are automatically parented to the ToolBar's contentItem.
+        Items created dynamically need to be explicitly parented to the contentItem:
+
+        \note The implicit size of the ToolBar is calculated based on the size of its content. If you want to anchor
+        items inside the tool bar, you must specify an explicit width and height on the ToolBar itself.
+    */
+    readonly property alias contentItem: container
+
+    data: [
+        Loader {
+            id: loader
+            anchors.fill: parent
+            sourceComponent: styleLoader.item ? styleLoader.item.panel : null
+            onLoaded: item.z = -1
+            Loader {
+                id: styleLoader
+                property alias __control: toolbar
+                sourceComponent: style
+            }
+        },
+        Item {
+            id: container
+            z: 1
+            focus: true
+            anchors.fill: parent
+
+            anchors.topMargin: topMargin
+            anchors.leftMargin: leftMargin
+            anchors.rightMargin: rightMargin
+            anchors.bottomMargin: bottomMargin
+
+            property int topMargin: __style ? __style.padding.top : 0
+            property int bottomMargin: __style ? __style.padding.bottom : 0
+            property int leftMargin: __style ? __style.padding.left : 0
+            property int rightMargin: __style ? __style.padding.right : 0
+
+            property Item layoutItem: container.children.length === 1 ? container.children[0] : null
+            function calcHeight () { return (layoutItem ? (layoutItem.implicitHeight || layoutItem.height) +
+                                                          (layoutItem.anchors.fill ? layoutItem.anchors.topMargin +
+                                                                                     layoutItem.anchors.bottomMargin : 0) :
+                                                          loader.item ? loader.item.implicitHeight : 0) }
+        }]
 }