feat(StatusStackModal): add subheader and remove explicit width (#747)

ui/StatusQ/src/StatusQ/Popups/StatusStackModal.qml

@@ -8,30 +8,20 @@ import StatusQ.Controls 0.1
 StatusModal {
     id: root
 
-    /*
-    stackItems
-    Attached properties:
-        canGoNext
-
-    replaceItem
-    Attached properties:
-        title
-        acceptButton
-    */
-
     property string stackTitle: qsTr("StackModal")
+    property int subHeaderPadding: 16
 
     property alias stackItems: stackLayout.children
     property alias currentIndex: stackLayout.currentIndex
     property alias replaceItem: replaceLoader.sourceComponent
+    property alias subHeaderItem: subHeaderLoader.sourceComponent
 
     readonly property int itemsCount: stackLayout.children.length
     readonly property var currentItem: stackLayout.currentItem
 
     property Item nextButton: StatusButton {
         text: qsTr("Next")
-        enabled: !!currentItem && (typeof(currentItem.canGoNext) == "undefined" || currentItem.canGoNext)
-        onClicked: currentIndex++
+        onClicked: root.currentIndex++
     }
 
     property Item finishButton: StatusButton {
@@ -57,11 +47,9 @@ StatusModal {
     onCurrentIndexChanged: updateRightButtons()
     onReplaceItemChanged: updateRightButtons()
 
-    width: 640
-    padding: 16
-
     header.title: replaceLoader.item && typeof(replaceLoader.item.title) != "undefined"
                                                 ? replaceLoader.item.title : stackTitle
+    padding: 16
 
     leftButtons: StatusRoundButton {
         id: backButton
@@ -83,20 +71,33 @@ StatusModal {
     Item {
         id: content
         anchors.fill: parent
-        implicitWidth: Math.max(stackLayout.implicitWidth, replaceLoader.implicitWidth)
-        implicitHeight: Math.max(stackLayout.implicitHeight, replaceLoader.implicitHeight)
-        clip: true
+        implicitWidth: Math.max(stackLayout.implicitWidth, subHeaderLoader.implicitWidth, replaceLoader.implicitWidth)
+        implicitHeight: Math.max(stackLayout.implicitHeight +
+                         (subHeaderLoader.item && subHeaderLoader.item.visible ? subHeaderLoader.height + root.subHeaderPadding : 0),
+                         replaceLoader.implicitHeight)
+
+        Loader {
+            id: subHeaderLoader
+            anchors.top: parent.top
+            width: parent.width
+            clip: true
+        }
 
         StatusAnimatedStack {
             id: stackLayout
-            anchors.fill: parent
+            anchors.top: subHeaderLoader.bottom
+            anchors.topMargin: subHeaderLoader.item && subHeaderLoader.item.visible ? root.subHeaderPadding : 0
+            anchors.bottom: parent.bottom
+            width: parent.width
             visible: !replaceItem
+            clip: true
         }
 
         Loader {
             id: replaceLoader
             anchors.fill: parent
             visible: item
+            clip: true
             onItemChanged: {
                 root.rightButtons = item ? item.rightButtons : [ nextButton, finishButton ]
                 if (!item && root.itemsCount == 0) {