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,16 +34,30 @@ PropertyEditorPane {
         topSection.previewModel = model
     }
 
+    MaterialEditorToolBar {
+        id: toolbar
+
+        width: parent.width
+
+        onToolBarAction: (action) => root.toolBarAction(action)
+    }
+
+    PropertyEditorPane {
+        id: itemPane
+
+        anchors.top: toolbar.bottom
+        anchors.bottom: parent.bottom
+        width: parent.width
+
+        clip: true
+
         MaterialEditorTopSection {
             id: topSection
 
-        onToolBarAction: (action) => itemPane.toolBarAction(action)
-        onPreviewEnvChanged: itemPane.previewEnvChanged(previewEnv)
-        onPreviewModelChanged: itemPane.previewModelChanged(previewModel)
+            onPreviewEnvChanged: root.previewEnvChanged(previewEnv)
+            onPreviewModelChanged: root.previewModelChanged(previewModel)
         }
 
-    Item { width: 1; height: 10 }
-
         DynamicPropertiesSection {
             propertiesModel: MaterialEditorDynamicPropertiesModel {}
         }
@@ -53,8 +67,7 @@ PropertyEditorPane {
 
             property string theSource: specificQmlData
 
-        anchors.left: parent.left
-        anchors.right: parent.right
+            width: parent.width
             visible: specificsTwo.theSource !== ""
             sourceComponent: specificQmlComponent
 
@@ -64,7 +77,7 @@ PropertyEditorPane {
             }
         }
 
-    Item {
+        Item { // spacer
             width: 1
             height: 10
             visible: specificsTwo.visible
@@ -76,4 +89,5 @@ PropertyEditorPane {
             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