QmlDesigner: Enable docking a header in PropertyEditorPane

A header component is defined in PropertyEditorPane.
This header can be docked to the top.
A header is defined for MaterialEditorPane

Task-number: QDS-12851
Change-Id: Ie5393f917803241da1f286bd05c226fd055b1174
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml

@@ -17,21 +17,21 @@ Item {
     // invoked from C++ to refresh material preview image
     function refreshPreview()
     {
-        topSection.refreshPreview()
+        itemPane.headerItem.refreshPreview()
     }
 
     // Called from C++ to close context menu on focus out
     function closeContextMenu()
     {
-        topSection.closeContextMenu()
+        itemPane.headerItem.closeContextMenu()
         Controller.closeContextMenu()
     }
 
     // Called from C++ to initialize preview menu checkmarks
     function initPreviewData(env, model)
     {
-        topSection.previewEnv = env;
-        topSection.previewModel = model
+        itemPane.headerItem.previewEnv = env
+        itemPane.headerItem.previewModel = model
     }
 
     MaterialEditorToolBar {
@@ -51,9 +51,7 @@ Item {
 
         clip: true
 
-        MaterialEditorTopSection {
-            id: topSection
-
+        headerComponent: MaterialEditorTopSection {
             onPreviewEnvChanged: root.previewEnvChanged(previewEnv)
             onPreviewModelChanged: root.previewModelChanged(previewModel)
         }

share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml

@@ -13,6 +13,9 @@ Column {
 
     property string previewEnv
     property string previewModel
+
+    property real __horizontalSpacing: 5
+
     property StudioTheme.ControlStyle buttonStyle: StudioTheme.ViewBarButtonStyle {
         //This is how you can override stuff from the control styles
         controlSize: Qt.size(previewOptions.width, previewOptions.width)
@@ -35,8 +38,7 @@ Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    Item { width: 1; height: 10 } // spacer
-
+    Item { width: 1; height: 5 } // spacer
 
     StudioControls.Menu {
         id: modelMenu
@@ -121,6 +123,19 @@ Column {
         width: parent.width
         height: previewRect.height
 
+        StudioControls.AbstractButton {
+            id: pinButton
+
+            x: root.__horizontalSpacing
+
+            style: root.buttonStyle
+            iconSize: StudioTheme.Values.bigFont
+            buttonIcon: pinButton.checked ? StudioTheme.Constants.pin : StudioTheme.Constants.unpin
+            checkable: true
+            checked: itemPane.headerDocked
+            onCheckedChanged: itemPane.headerDocked = pinButton.checked
+        }
+
         Rectangle {
             id: previewRect
             anchors.horizontalCenter: parent.horizontalCenter
@@ -145,6 +160,7 @@ Column {
             height: previewRect.height
             anchors.top: previewRect.top
             anchors.left: previewRect.right
+            anchors.leftMargin: root.__horizontalSpacing
 
             Column {
                 anchors.horizontalCenter: parent.horizontalCenter
@@ -164,7 +180,6 @@ Column {
                 }
             }
         }
-
     }
 
     HelperWidgets.Section {

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml

@@ -19,30 +19,83 @@ Rectangle {
     default property alias content: mainColumn.children
     property alias scrollView: mainScrollView
 
+    property bool headerDocked: false
+    readonly property Item headerItem: headerDocked ? dockedHeaderLoader.item : undockedHeaderLoader.item
+
+    property Component headerComponent: null
+
     // Called from C++ to close context menu on focus out
     function closeContextMenu() {
         Controller.closeContextMenu()
     }
 
+    Loader {
+        id: dockedHeaderLoader
+
+        anchors.top: itemPane.top
+        z: parent.z + 1
+        height: item ? item.implicitHeight : 0
+        width: parent.width
+
+        active: itemPane.headerDocked
+        sourceComponent: itemPane.headerComponent
+
+        HeaderBackground{}
+    }
+
     MouseArea {
         anchors.fill: parent
-        onClicked: forceActiveFocus()
+        onClicked: itemPane.forceActiveFocus()
     }
 
     HelperWidgets.ScrollView {
         id: mainScrollView
-        //clip: true
-        anchors.fill: parent
+
+        clip: true
+        anchors {
+            top: dockedHeaderLoader.bottom
+            bottom: itemPane.bottom
+            left: itemPane.left
+            right: itemPane.right
+        }
 
         interactive: !Controller.contextMenuOpened
 
-        Column {
-            id: mainColumn
-            y: -1
-            width: itemPane.width
+        ColumnLayout {
+            spacing: 2
+            width: mainScrollView.width
 
-            onWidthChanged: StudioTheme.Values.responsiveResize(itemPane.width)
-            Component.onCompleted: StudioTheme.Values.responsiveResize(itemPane.width)
+            Loader {
+                id: undockedHeaderLoader
+
+                Layout.fillWidth: true
+                Layout.preferredHeight: item ? item.implicitHeight : 0
+
+                active: !itemPane.headerDocked
+                sourceComponent: itemPane.headerComponent
+
+                HeaderBackground{}
+            }
+
+            Column {
+                id: mainColumn
+
+                Layout.fillWidth: true
+
+                onWidthChanged: StudioTheme.Values.responsiveResize(itemPane.width)
+                Component.onCompleted: StudioTheme.Values.responsiveResize(itemPane.width)
+            }
         }
     }
+
+    component HeaderBackground: Rectangle {
+        anchors.fill: parent
+        anchors.leftMargin: -StudioTheme.Values.border
+        anchors.rightMargin: -StudioTheme.Values.border
+        z: parent.z - 1
+
+        color: StudioTheme.Values.themeToolbarBackground
+        border.color: StudioTheme.Values.themePanelBackground
+        border.width: StudioTheme.Values.border
+    }
 }