PropertyEditor: Rearrange the layout of PropertyEditor controls

Arranged items:
* Toolbar
* Lock Button
* Search bar
* State Section

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

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick3D/MaterialPane.qml

@@ -24,12 +24,6 @@ Item {
         Controller.closeContextMenu()
     }
 
-    Material.Toolbar {
-        id: toolbar
-
-        width: parent.width
-    }
-
     Settings {
         id: settings
 
@@ -42,9 +36,7 @@ Item {
 
         readonly property bool isHorizontal: splitView.orientation == Qt.Horizontal
 
-        anchors.top: toolbar.bottom
+        anchors.fill: parent
-        anchors.bottom: parent.bottom
-        width: parent.width
         orientation: splitView.width > 1000 ? Qt.Horizontal : Qt.Vertical
         clip: true
 
@@ -82,6 +74,8 @@ Item {
                 showImage: !hasMultiSelection && !splitView.isHorizontal
             }
 
+            toolbarComponent: Material.Toolbar {}
+
             DynamicPropertiesSection {
                 propertiesModel: PropertyEditorDynamicPropertiesModel {}
                 visible: !hasMultiSelection

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

@@ -24,6 +24,7 @@ Rectangle {
     readonly property Item headerItem: headerDocked ? dockedHeaderLoader.item : undockedHeaderLoader.item
 
     property Component headerComponent: null
+    property alias toolbarComponent: toolbar.customToolbar
 
     // Called from C++ to close context menu on focus out
     function closeContextMenu() {
@@ -44,10 +45,19 @@ Rectangle {
         z: parent.z + 1
     }
 
+    PropertyEditorToolBar {
+        id: toolbar
+
+        anchors.top: propertySearchBar.bottom
+        width: parent.width
+
+        onToolBarAction: action => handleToolBarAction(action)
+    }
+
     Loader {
         id: dockedHeaderLoader
 
-        anchors.top: propertySearchBar.bottom
+        anchors.top: toolbar.bottom
         z: parent.z + 1
         height: item ? item.implicitHeight : 0
         width: parent.width
@@ -58,75 +68,21 @@ Rectangle {
         HeaderBackground{}
     }
 
-    PropertyEditorToolBar {
-        id: toolbar
-
-        anchors.top: dockedHeaderLoader.bottom
-        width: parent.width
-
-        onToolBarAction: action => handleToolBarAction(action)
-    }
-
     MouseArea {
         anchors.fill: mainScrollView
         onClicked: itemPane.forceActiveFocus()
     }
 
-    Rectangle {
-        id: stateSection
-        anchors.top: toolbar.bottom
-        width: itemPane.width
-        height: StudioTheme.Values.height + StudioTheme.Values.controlGap * 2
-        color:  StudioTheme.Values.themePanelBackground
-        z: isBaseState ? -1: 10
-        SectionLayout {
-            y: StudioTheme.Values.controlGap
-            x: StudioTheme.Values.controlGap
-            PropertyLabel {
-                text: qsTr("Current State")
-                tooltip: tooltipItem.tooltip
-            }
-
-            SecondColumnLayout {
-
-                Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
-
-                Item {
-
-                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    height: StudioTheme.Values.height
-
-                    HelperWidgets.Label {
-                        anchors.fill: parent
-                        anchors.leftMargin: StudioTheme.Values.inputHorizontalPadding
-                        anchors.topMargin: StudioTheme.Values.typeLabelVerticalShift
-                        text: stateName
-                        color: StudioTheme.Values.themeInteraction
-                    }
-
-                    ToolTipArea {
-                        id: tooltipItem
-                        anchors.fill: parent
-                        tooltip: qsTr("The current state of the States View.")
-                    }
-
-                }
-
-                ExpandingSpacer {}
-            }
-        }
-    }
-
     HelperWidgets.ScrollView {
         id: mainScrollView
 
         clip: true
         anchors {
-            top: toolbar.bottom
+            top: dockedHeaderLoader.bottom
             bottom: itemPane.bottom
             left: itemPane.left
             right: itemPane.right
-            topMargin: dockedHeaderLoader.active ? 2 : 0 + isBaseState ? 0 : stateSection.height
+            topMargin: dockedHeaderLoader.active ? 2 : 0
         }
 
         interactive: !Controller.contextMenuOpened
@@ -148,6 +104,17 @@ Rectangle {
                 HeaderBackground{}
             }
 
+            Loader {
+                Layout.fillWidth: true
+                Layout.leftMargin: StudioTheme.Values.sectionPadding
+                Layout.preferredHeight: item ? item.implicitHeight : 0
+
+                active: !isBaseState
+                sourceComponent: StatesSection{}
+
+                visible: active
+            }
+
             Label {
                 Layout.fillWidth: true
                 Layout.leftMargin: 10
@@ -179,4 +146,37 @@ Rectangle {
         border.color: StudioTheme.Values.themePanelBackground
         border.width: StudioTheme.Values.border
     }
+
+    component StatesSection: SectionLayout {
+        PropertyLabel {
+            text: qsTr("Current State")
+            tooltip: tooltipItem.tooltip
+        }
+
+        SecondColumnLayout {
+
+            Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
+
+            Item {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                height: StudioTheme.Values.height
+
+                HelperWidgets.Label {
+                    anchors.fill: parent
+                    text: stateName
+                    color: StudioTheme.Values.themeInteraction
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                ToolTipArea {
+                    id: tooltipItem
+
+                    anchors.fill: parent
+                    tooltip: qsTr("The current state of the States View.")
+                }
+            }
+
+            ExpandingSpacer {}
+        }
+    }
 }

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

@@ -9,11 +9,22 @@ import PropertyToolBarAction
 Rectangle {
     id: root
 
+    property alias customToolbar: customToolbarLoader.sourceComponent
+
     signal toolBarAction(int action)
 
     color: StudioTheme.Values.themeToolbarBackground
     height: StudioTheme.Values.toolbarHeight
 
+    Loader {
+        id: customToolbarLoader
+
+        anchors.left: parent.left
+        anchors.right: lockButton.left
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+    }
+
     HelperWidgets.AbstractButton {
         id: lockButton