QmlDesigner: Make material editor toolbar fixed on the view

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

share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml

@@ -4,8 +4,8 @@
 import QtQuick
 import HelperWidgets
 
-PropertyEditorPane {
-    id: itemPane
+Item {
+    id: root
 
     width: 420
     height: 420
@@ -34,46 +34,60 @@ PropertyEditorPane {
         topSection.previewModel = model
     }
 
-    MaterialEditorTopSection {
-        id: topSection
+    MaterialEditorToolBar {
+        id: toolbar
 
-        onToolBarAction: (action) => itemPane.toolBarAction(action)
-        onPreviewEnvChanged: itemPane.previewEnvChanged(previewEnv)
-        onPreviewModelChanged: itemPane.previewModelChanged(previewModel)
+        width: parent.width
+
+        onToolBarAction: (action) => root.toolBarAction(action)
     }
 
-    Item { width: 1; height: 10 }
+    PropertyEditorPane {
+        id: itemPane
 
-    DynamicPropertiesSection {
-        propertiesModel: MaterialEditorDynamicPropertiesModel {}
-    }
+        anchors.top: toolbar.bottom
+        anchors.bottom: parent.bottom
+        width: parent.width
 
-    Loader {
-        id: specificsTwo
+        clip: true
 
-        property string theSource: specificQmlData
+        MaterialEditorTopSection {
+            id: topSection
 
-        anchors.left: parent.left
-        anchors.right: parent.right
-        visible: specificsTwo.theSource !== ""
-        sourceComponent: specificQmlComponent
+            onPreviewEnvChanged: root.previewEnvChanged(previewEnv)
+            onPreviewModelChanged: root.previewModelChanged(previewModel)
+        }
 
-        onTheSourceChanged: {
-            specificsTwo.active = false
-            specificsTwo.active = true
+        DynamicPropertiesSection {
+            propertiesModel: MaterialEditorDynamicPropertiesModel {}
+        }
+
+        Loader {
+            id: specificsTwo
+
+            property string theSource: specificQmlData
+
+            width: parent.width
+            visible: specificsTwo.theSource !== ""
+            sourceComponent: specificQmlComponent
+
+            onTheSourceChanged: {
+                specificsTwo.active = false
+                specificsTwo.active = true
+            }
+        }
+
+        Item { // spacer
+            width: 1
+            height: 10
+            visible: specificsTwo.visible
+        }
+
+        Loader {
+            id: specificsOne
+            anchors.left: parent.left
+            anchors.right: parent.right
+            source: specificsUrl
         }
     }
-
-    Item {
-        width: 1
-        height: 10
-        visible: specificsTwo.visible
-    }
-
-    Loader {
-        id: specificsOne
-        anchors.left: parent.left
-        anchors.right: parent.right
-        source: specificsUrl
-    }
 }

share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml

@@ -11,8 +11,6 @@ import StudioTheme as StudioTheme
 Column {
     id: root
 
-    signal toolBarAction(int action)
-
     property string previewEnv
     property string previewModel
     property StudioTheme.ControlStyle buttonStyle: StudioTheme.ViewBarButtonStyle {
@@ -37,12 +35,6 @@ Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    MaterialEditorToolBar {
-        width: root.width
-
-        onToolBarAction: (action) => root.toolBarAction(action)
-    }
-
     Item { width: 1; height: 10 } // spacer