QmlDesigner: Tweak the ui of the Model Editor

* A SplitView is used instead of GridLayout for the CollectionView
* The left margin for the model items are removed

Task-number: QDS-11732
Change-Id: Id66171788db1f17583147fc6f16ffd0e69ac56a5
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml

@@ -45,29 +45,76 @@ Item {
         message: ""
     }
 
-    GridLayout {
+    Rectangle {
-        id: grid
+        // Covers the toolbar color on top to prevent the background
-        readonly property bool isHorizontal: width >= 500
+        // color for the margin of splitter
 
-        columnSpacing: 0
+        anchors.top: parent.top
-        rowSpacing: 0
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: topToolbar.height
+        color: topToolbar.color
+    }
+
+    SplitView {
+        id: splitView
+
+        readonly property bool isHorizontal: splitView.orientation === Qt.Horizontal
+
+        orientation: width >= 500 ? Qt.Horizontal : Qt.Vertical
+        anchors.fill: parent
+
+        handle: Item {
+            id: handleDelegate
+
+            property color color: SplitHandle.pressed ? StudioTheme.Values.themeControlOutlineInteraction
+                                                      : SplitHandle.hovered ? StudioTheme.Values.themeControlOutlineHover
+                                                                            : StudioTheme.Values.themeControlOutline
+
+            implicitWidth: 1
+            implicitHeight: 1
+
+            Rectangle {
+                id: handleRect
+
+                property real verticalMargin: splitView.isHorizontal ? StudioTheme.Values.splitterMargin : 0
+                property real horizontalMargin: splitView.isHorizontal ? 0 : StudioTheme.Values.splitterMargin
 
                 anchors.fill: parent
-        columns: isHorizontal ? 3 : 1
+                anchors.topMargin: handleRect.verticalMargin
+                anchors.bottomMargin: handleRect.verticalMargin
+                anchors.leftMargin: handleRect.horizontalMargin
+                anchors.rightMargin: handleRect.horizontalMargin
+
+                color: handleDelegate.color
+            }
+
+            containmentMask: Item {
+                x: splitView.isHorizontal ? ((handleDelegate.width - width) / 2) : 0
+                y: splitView.isHorizontal ? 0 : ((handleDelegate.height - height) / 2)
+                height: splitView.isHorizontal ? handleDelegate.height : StudioTheme.Values.borderHover
+                width: splitView.isHorizontal ? StudioTheme.Values.borderHover : handleDelegate.width
+            }
+        }
 
         ColumnLayout {
             id: collectionsSideBar
             spacing: 0
 
-            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+            SplitView.minimumWidth: 200
-            Layout.minimumWidth: 300
+            SplitView.maximumWidth: 450
-            Layout.fillWidth: !grid.isHorizontal
+            SplitView.minimumHeight: 200
+            SplitView.maximumHeight: 400
+            SplitView.fillWidth: !splitView.isHorizontal
+            SplitView.fillHeight: splitView.isHorizontal
 
             Rectangle {
+                id: topToolbar
                 color: StudioTheme.Values.themeToolbarBackground
 
                 Layout.preferredHeight: StudioTheme.Values.toolbarHeight
                 Layout.fillWidth: true
+                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
 
                 Text {
                     anchors.verticalCenter: parent.verticalCenter
@@ -92,11 +139,13 @@ Item {
                 }
             }
 
-            Rectangle { // Model Groups
+            Item { // Model Groups
                 Layout.fillWidth: true
-                color: StudioTheme.Values.themeBackgroundColorNormal
+                Layout.minimumHeight: bottomSpacer.isExpanded ? 150 : 0
-                Layout.minimumHeight: 150
+                Layout.fillHeight: !bottomSpacer.isExpanded
                 Layout.preferredHeight: sourceListView.contentHeight
+                Layout.maximumHeight: sourceListView.contentHeight
+                Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
 
                 MouseArea {
                     anchors.fill: parent
@@ -132,22 +181,22 @@ Item {
                 icon: StudioTheme.Constants.create_medium
                 onClicked: newCollection.open()
             }
-        }
 
-        Rectangle { // Splitter
+            Item {
-            Layout.fillWidth: !grid.isHorizontal
+                id: bottomSpacer
-            Layout.fillHeight: grid.isHorizontal
+
-            Layout.minimumWidth: 2
+                readonly property bool isExpanded: height > 0
-            Layout.minimumHeight: 2
+                Layout.minimumWidth: 1
-            color: "black"
+                Layout.fillHeight: true
+            }
         }
 
         CollectionDetailsView {
             model: root.collectionDetailsModel
             backend: root.model
             sortedModel: root.collectionDetailsSortFilterModel
-            Layout.fillHeight: true
+            SplitView.fillHeight: true
-            Layout.fillWidth: true
+            SplitView.fillWidth: true
         }
     }
 }

share/qtcreator/qmldesigner/collectionEditorQmlSource/ModelSourceItem.qml

@@ -21,7 +21,7 @@ Item {
 
         width: parent.width
         implicitHeight: contentHeight
-        leftMargin: 6
+        leftMargin: 0
 
         model: internalModels
         clip: true

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml

@@ -125,6 +125,7 @@ QtObject {
     property real controlLabelGap: 5
 
     property real controlGap: 5 // TODO different name
+    property real splitterMargin: 5
     property real twoControlColumnGap: values.controlLabelGap
                                        + values.controlLabelWidth
                                        + values.controlGap
@@ -350,6 +351,7 @@ QtObject {
     property color themeControlOutline: Theme.color(Theme.DScontrolOutline)
     property color themeControlOutlineInteraction: Theme.color(Theme.DScontrolOutlineInteraction)
     property color themeControlOutlineDisabled: Theme.color(Theme.DScontrolOutlineDisabled)
+    property color themeControlOutlineHover: Theme.color(Theme.DScontrolOutline_topToolbarHover)
 
     // Panels & Panes
     property color themeBackgroundColorNormal: Theme.color(Theme.DSBackgroundColorNormal)