Improve GroupBox styling and content calculation

We need this to have expanding layouts.

Change-Id: I32ef9da90fa9210febaa23d3f579ec94f03c377d
Reviewed-by: Jan Arve Sæther <jan-arve.saether@digia.com>

src/controls/GroupBox.qml

@@ -130,18 +130,15 @@ Item {
     /*!
         This property holds the width of the content.
     */
-    readonly property real contentWidth: content.childrenRect.width  + 2 * __margin
+    property real contentWidth: content.childrenRect.width
 
     /*!
         This property holds the height of the content.
     */
-    readonly property real contentHeight: content.childrenRect.height + 2 * __margin
+    property real contentHeight: content.childrenRect.height
 
     /*! \internal */
-    property int __margin: 8
-
-    /*! \internal */
-    property Component style: Qt.createComponent(Settings.THEME_PATH + "/GroupBoxStyle.qml", groupbox)
+    property Component __style: Qt.createComponent(Settings.THEME_PATH + "/GroupBoxStyle.qml", groupbox)
 
     /*! \internal */
     default property alias data: content.data
@@ -161,12 +158,16 @@ Item {
         id: loader
         property alias control: groupbox
         anchors.fill: parent
-        property int topMargin: (title.length > 0 || checkable ? 16 : 0) + __margin
+        property int topMargin: (title.length > 0 || checkable ? 16 : 0) + content.margin
         property int bottomMargin: 4
         property int leftMargin: 4
         property int rightMargin: 4
-        sourceComponent: style
+        sourceComponent: styleLoader.item ? styleLoader.item.panel : null
         onLoaded: item.z = -1
+        Loader {
+            id: styleLoader
+            sourceComponent: __style
+        }
     }
 
     CheckBox {
@@ -185,10 +186,11 @@ Item {
         id:content
         z: 1
         focus: true
+        property int margin: styleLoader.item ? styleLoader.item.margin : 0
         anchors.topMargin: loader.topMargin
-        anchors.leftMargin: __margin
-        anchors.rightMargin: __margin
-        anchors.bottomMargin: __margin
+        anchors.leftMargin: margin
+        anchors.rightMargin: margin
+        anchors.bottomMargin: margin
         anchors.fill: parent
         enabled: (!groupbox.checkable || groupbox.checked)
     }

src/styles/Desktop/GroupBoxStyle.qml

@@ -40,15 +40,21 @@
 import QtQuick 2.1
 import QtQuick.Controls 1.0
 import QtQuick.Controls.Private 1.0
+import QtQuick.Controls.Styles 1.0
 
-StyleItem {
-    id: styleitem
-    elementType: "groupbox"
-    text: control.title
-    on: control.checked
-    hasFocus: control.activeFocus
-    activeControl: checkable ? "checkbox" : ""
-    properties: { "checkable" : checkable , "sunken" : !flat}
-    contentWidth: control.contentWidth
-    contentHeight: control.contentHeight
+
+Style {
+    property int margin: 8
+
+    property Component panel: StyleItem {
+        id: styleitem
+        elementType: "groupbox"
+        text: control.title
+        on: control.checked
+        hasFocus: control.activeFocus
+        activeControl: checkable ? "checkbox" : ""
+        properties: { "checkable" : checkable , "sunken" : !flat}
+        contentWidth: control.contentWidth + 2 * margin
+        contentHeight: control.contentHeight + 2 * margin
+    }
 }

src/styles/GroupBoxStyle.qml

@@ -39,20 +39,23 @@
 ****************************************************************************/
 import QtQuick 2.1
 import QtQuick.Controls 1.0
+import QtQuick.Controls.Styles 1.0
 
 /*!
     \qmltype GroupBoxStyle
     \internal
     \inqmlmodule QtQuick.Controls.Styles 1.0
 */
-Item {
-    implicitWidth: Math.max(200, contentWidth + 30)
-    implicitHeight: contentHeight
-
-    Text {
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.margins: 4
-        text: control.title
+Style {
+    property int margin: 8
+    property Component panel: Item {
+        implicitWidth: Math.max(200, contentWidth + 30)
+        implicitHeight: contentHeight
+        Text {
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.margins: 4
+            text: control.title
+        }
     }
 }