QmlDesigner: Scroll material browser on selection change

When selection changes in material browser, the browser grid is
scrolled so that the selected item is visible.

Fixes: QDS-9010
Change-Id: Ie6f4383b0c8add2965fc42ffdf740effdf02fa67
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialBrowser.qml

@@ -140,8 +140,8 @@ Item {
                             if (newTargetIdx >= 0)
                                 targetIdx = newTargetIdx
                         }
-                        rootView.materialSectionFocused = true
                         materialBrowserModel.selectMaterial(targetIdx)
+                        rootView.focusMaterialSection(true)
                     }
                 }
             }
@@ -170,8 +170,8 @@ Item {
                             if (newTargetIdx >= 0)
                                 targetIdx = newTargetIdx
                         }
-                        rootView.materialSectionFocused = false
                         materialBrowserTexturesModel.selectTexture(targetIdx)
+                        rootView.focusMaterialSection(false)
                     }
                 }
             } else if (texSecFocused) {
@@ -235,7 +235,9 @@ Item {
     MouseArea {
         id: rootMouseArea
 
-        anchors.fill: parent
+        y: topContent.height
+        width: parent.width
+        height: parent.height - topContent.height
 
         acceptedButtons: Qt.RightButton
 
@@ -253,15 +255,65 @@ Item {
         }
     }
 
+    function ensureVisible(yPos, itemHeight)
+    {
+        if (yPos < 0) {
+            let adjustedY = scrollView.contentY + yPos
+            if (adjustedY < itemHeight)
+                scrollView.contentY = 0
+            else
+                scrollView.contentY = adjustedY
+        } else if (yPos + itemHeight > scrollView.height) {
+            let adjustedY = scrollView.contentY + yPos + itemHeight - scrollView.height + 8
+            if (scrollView.contentHeight - adjustedY - scrollView.height < itemHeight)
+                scrollView.contentY = scrollView.contentHeight - scrollView.height
+            else
+                scrollView.contentY = adjustedY
+        }
+    }
+
     Connections {
         target: materialBrowserModel
 
-        function onSelectedIndexChanged() {
+        function onSelectedIndexChanged()
+        {
             // commit rename upon changing selection
             if (root.currMaterialItem)
                 root.currMaterialItem.commitRename();
 
             root.currMaterialItem = materialRepeater.itemAt(materialBrowserModel.selectedIndex);
+
+            if (materialsSection.expanded) {
+                ensureVisible(root.currMaterialItem.mapToItem(scrollView, 0, 0).y,
+                              root.currMaterialItem.height)
+            }
+        }
+    }
+
+    Connections {
+        target: materialBrowserTexturesModel
+
+        function onSelectedIndexChanged()
+        {
+            if (texturesSection.expanded) {
+                let currItem = texturesRepeater.itemAt(materialBrowserTexturesModel.selectedIndex)
+                ensureVisible(currItem.mapToItem(scrollView, 0, 0).y, currItem.height)
+            }
+        }
+    }
+
+    Connections {
+        target: rootView
+
+        function onMaterialSectionFocusedChanged()
+        {
+            if (rootView.materialSectionFocused && materialsSection.expanded) {
+                ensureVisible(root.currMaterialItem.mapToItem(scrollView, 0, 0).y,
+                              root.currMaterialItem.height)
+            } else if (!rootView.materialSectionFocused && texturesSection.expanded) {
+                let currItem = texturesRepeater.itemAt(materialBrowserTexturesModel.selectedIndex)
+                ensureVisible(currItem.mapToItem(scrollView, 0, 0).y, currItem.height)
+            }
         }
     }
 
@@ -278,6 +330,7 @@ Item {
         spacing: 5
 
         Rectangle {
+            id: topContent
             width: parent.width
             height: StudioTheme.Values.doubleToolbarHeight
             color: StudioTheme.Values.themeToolbarBackground
@@ -350,11 +403,15 @@ Item {
             id: scrollView
 
             width: root.width
-            height: root.height - searchBox.height
+            height: root.height - topContent.height
             clip: true
             visible: root.enableUiElements
             interactive: !ctxMenu.opened && !ctxMenuTextures.opened && !rootView.isDragging
 
+            Behavior on contentY {
+                PropertyAnimation { easing.type: Easing.InOutQuad }
+            }
+
             Column {
                 Item {
                     width: root.width

share/qtcreator/qmldesigner/materialBrowserQmlSource/MaterialItem.qml

@@ -62,8 +62,8 @@ Rectangle {
         acceptedButtons: Qt.LeftButton | Qt.RightButton
 
         onPressed: (mouse) => {
-            rootView.focusMaterialSection(true)
             materialBrowserModel.selectMaterial(index)
+            rootView.focusMaterialSection(true)
 
             if (mouse.button === Qt.LeftButton)
                 rootView.startDragMaterial(index, mapToGlobal(mouse.x, mouse.y))
@@ -130,8 +130,8 @@ Rectangle {
                 anchors.fill: parent
 
                 onClicked: {
-                    rootView.focusMaterialSection(true)
                     materialBrowserModel.selectMaterial(index)
+                    rootView.focusMaterialSection(true)
                 }
                 onDoubleClicked: root.startRename()
             }

share/qtcreator/qmldesigner/materialBrowserQmlSource/TextureItem.qml

@@ -30,8 +30,8 @@ Rectangle {
         hoverEnabled: true
 
         onPressed: (mouse) => {
-            rootView.focusMaterialSection(false)
             materialBrowserTexturesModel.selectTexture(index)
+            rootView.focusMaterialSection(false)
 
             if (mouse.button === Qt.LeftButton)
                 rootView.startDragTexture(index, mapToGlobal(mouse.x, mouse.y))