EffectComposer: implements adaptive horizontal layout

Fixes: QDS-10408
Change-Id: I660f74f1cd16018df9e066b78295a2da06301994
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

1 files changed, 142 insertions, 129 deletions

diff --git a/share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposer.qml b/share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposer.qml
index 764baae211..ce8c3b41ca 100644
--- a/share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposer.qml
+++ b/share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposer.qml
@@ -4,14 +4,17 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import QtQuick.Templates as T
 import HelperWidgets as HelperWidgets
 import StudioControls as StudioControls
 import StudioTheme as StudioTheme
 import EffectComposerBackend
 
-Item {
+ColumnLayout {
     id: root
 
+    spacing: 1
+
     property var draggedSec: null
     property var secsY: []
     property int moveFromIdx: 0
@@ -60,63 +63,74 @@ Item {
         }
     }
 
-    SplitView {
-        anchors.fill: parent
-        orientation: Qt.Vertical
+    EffectComposerTopBar {
+        Layout.fillWidth: true
 
-        ColumnLayout {
-            spacing: 1
-            SplitView.minimumHeight: 200
-            SplitView.preferredHeight: 300
+        onAddClicked: {
+            root.onSaveChangesCallback = () => { EffectComposerBackend.effectComposerModel.clear(true) }
 
-            EffectComposerTopBar {
-                Layout.fillWidth: true
+            if (EffectComposerBackend.effectComposerModel.hasUnsavedChanges)
+                saveChangesDialog.open()
+            else
+                EffectComposerBackend.effectComposerModel.clear(true)
+        }
 
-                onAddClicked: {
-                    root.onSaveChangesCallback = () => { EffectComposerBackend.effectComposerModel.clear(true) }
+        onSaveClicked: {
+            let name = EffectComposerBackend.effectComposerModel.currentComposition
 
-                    if (EffectComposerBackend.effectComposerModel.hasUnsavedChanges)
-                        saveChangesDialog.open()
-                    else
-                        EffectComposerBackend.effectComposerModel.clear(true)
-                }
+            if (name === "")
+                saveAsDialog.open()
+            else
+                EffectComposerBackend.effectComposerModel.saveComposition(name)
+        }
 
-                onSaveClicked: {
-                    let name = EffectComposerBackend.effectComposerModel.currentComposition
+        onSaveAsClicked: saveAsDialog.open()
 
-                    if (name === "")
-                        saveAsDialog.open()
-                    else
-                        EffectComposerBackend.effectComposerModel.saveComposition(name)
-                }
+        onAssignToSelectedClicked: {
+            EffectComposerBackend.effectComposerModel.assignToSelected()
+        }
+    }
 
-                onSaveAsClicked: saveAsDialog.open()
+    SplitView {
+        id: splitView
 
-                onAssignToSelectedClicked: {
-                    EffectComposerBackend.effectComposerModel.assignToSelected()
-                }
-            }
+        Layout.fillWidth: true
+        Layout.fillHeight: true
 
-            EffectComposerPreview {
-                mainRoot: root
+        orientation: root.width > root.height ? Qt.Horizontal : Qt.Vertical
 
-                Layout.fillWidth: true
-                Layout.fillHeight: true
+        handle: Rectangle {
+            implicitWidth: splitView.orientation === Qt.Horizontal ? 6 : splitView.width
+            implicitHeight: splitView.orientation === Qt.Horizontal ? splitView.height : 6
+            color: T.SplitHandle.pressed ? StudioTheme.Values.themeSliderHandleInteraction
+                : (T.SplitHandle.hovered ? StudioTheme.Values.themeSliderHandleHover
+                                         : "transparent")
+        }
 
-                FrameAnimation {
-                    id: previewFrameTimer
-                    running: true
-                    paused: !previewAnimationRunning
-                }
+        EffectComposerPreview {
+            mainRoot: root
+
+            SplitView.minimumWidth: 250
+            SplitView.minimumHeight: 200
+            SplitView.preferredWidth: 300
+            SplitView.preferredHeight: 300
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            FrameAnimation {
+                id: previewFrameTimer
+                running: true
+                paused: !previewAnimationRunning
             }
         }
 
         Column {
-            id: lowerSplitCol
-
             spacing: 1
 
-            SplitView.minimumHeight: 200
+            SplitView.minimumWidth: 250
+            SplitView.minimumHeight: 100
+
+            Component.onCompleted: HelperWidgets.Controller.mainScrollView = scrollView
 
             Rectangle {
                 width: parent.width
@@ -158,115 +172,114 @@ Item {
                 }
             }
 
-            Component.onCompleted: HelperWidgets.Controller.mainScrollView = scrollView
-
-            HelperWidgets.ScrollView {
-                id: scrollView
-
+            Item {
                 width: parent.width
                 height: parent.height - y
-                clip: true
-                interactive: !HelperWidgets.Controller.contextMenuOpened
 
-                onContentHeightChanged: {
-                    if (scrollView.contentItem.height > scrollView.height) {
-                        let lastItemH = repeater.itemAt(repeater.count - 1).height
-                        scrollView.contentY = scrollView.contentItem.height - lastItemH
+                HelperWidgets.ScrollView {
+                    id: scrollView
+
+                    anchors.fill: parent
+                    clip: true
+                    interactive: !HelperWidgets.Controller.contextMenuOpened
+
+                    onContentHeightChanged: {
+                        if (scrollView.contentItem.height > scrollView.height) {
+                            let lastItemH = repeater.itemAt(repeater.count - 1).height
+                            scrollView.contentY = scrollView.contentItem.height - lastItemH
+                        }
                     }
-                }
 
-                Column {
-                    id: nodesCol
-                    width: scrollView.width
-                    spacing: 1
+                    Column {
+                        id: nodesCol
+                        width: scrollView.width
+                        spacing: 1
 
-                    Repeater {
-                        id: repeater
+                        Repeater {
+                            id: repeater
 
-                        width: root.width
-                        model: EffectComposerBackend.effectComposerModel
+                            width: parent.width
+                            model: EffectComposerBackend.effectComposerModel
 
-                        onCountChanged: {
-                            HelperWidgets.Controller.setCount("EffectComposer", repeater.count)
-                        }
+                            onCountChanged: {
+                                HelperWidgets.Controller.setCount("EffectComposer", repeater.count)
+                            }
 
-                        delegate: EffectCompositionNode {
-                            width: root.width
-                            modelIndex: index
+                            delegate: EffectCompositionNode {
+                                width: parent.width
+                                modelIndex: index
 
-                            Behavior on y {
-                                PropertyAnimation {
-                                    duration: 300
-                                    easing.type: Easing.InOutQuad
+                                Behavior on y {
+                                    PropertyAnimation {
+                                        duration: 300
+                                        easing.type: Easing.InOutQuad
+                                    }
                                 }
-                            }
 
-                            onStartDrag: (section) => {
-                                root.draggedSec = section
-                                root.moveFromIdx = index
+                                onStartDrag: (section) => {
+                                    root.draggedSec = section
+                                    root.moveFromIdx = index
 
-                                highlightBorder = true
+                                    highlightBorder = true
 
-                                root.secsY = []
-                                for (let i = 0; i < repeater.count; ++i)
-                                    root.secsY[i] = repeater.itemAt(i).y
-                            }
+                                    root.secsY = []
+                                    for (let i = 0; i < repeater.count; ++i)
+                                        root.secsY[i] = repeater.itemAt(i).y
+                                }
 
-                            onStopDrag: {
-                                if (root.moveFromIdx === root.moveToIdx)
-                                    root.draggedSec.y = root.secsY[root.moveFromIdx]
-                                else
-                                    EffectComposerBackend.effectComposerModel.moveNode(root.moveFromIdx, root.moveToIdx)
+                                onStopDrag: {
+                                    if (root.moveFromIdx === root.moveToIdx)
+                                        root.draggedSec.y = root.secsY[root.moveFromIdx]
+                                    else
+                                        EffectComposerBackend.effectComposerModel.moveNode(root.moveFromIdx, root.moveToIdx)
 
-                                highlightBorder = false
-                                root.draggedSec = null
+                                    highlightBorder = false
+                                    root.draggedSec = null
+                                }
                             }
-                        }
-                    } // Repeater
-
-                    Timer {
-                        running: root.draggedSec
-                        interval: 50
-                        repeat: true
-
-                        onTriggered: {
-                            root.moveToIdx = root.moveFromIdx
-                            for (let i = 0; i < repeater.count; ++i) {
-                                let currItem = repeater.itemAt(i)
-                                if (i > root.moveFromIdx) {
-                                    if (root.draggedSec.y > currItem.y + (currItem.height - root.draggedSec.height) * .5) {
-                                        currItem.y = root.secsY[i] - root.draggedSec.height - nodesCol.spacing
-                                        root.moveToIdx = i
-                                    } else {
-                                        currItem.y = root.secsY[i]
-                                    }
-                                } else if (i < root.moveFromIdx) {
-                                    if (!repeater.model.isDependencyNode(i)
-                                            && root.draggedSec.y < currItem.y + (currItem.height - root.draggedSec.height) * .5) {
-                                        currItem.y = root.secsY[i] + root.draggedSec.height + nodesCol.spacing
-                                        root.moveToIdx = Math.min(root.moveToIdx, i)
-                                    } else {
-                                        currItem.y = root.secsY[i]
+                        } // Repeater
+
+                        Timer {
+                            running: root.draggedSec
+                            interval: 50
+                            repeat: true
+
+                            onTriggered: {
+                                root.moveToIdx = root.moveFromIdx
+                                for (let i = 0; i < repeater.count; ++i) {
+                                    let currItem = repeater.itemAt(i)
+                                    if (i > root.moveFromIdx) {
+                                        if (root.draggedSec.y > currItem.y + (currItem.height - root.draggedSec.height) * .5) {
+                                            currItem.y = root.secsY[i] - root.draggedSec.height - nodesCol.spacing
+                                            root.moveToIdx = i
+                                        } else {
+                                            currItem.y = root.secsY[i]
+                                        }
+                                    } else if (i < root.moveFromIdx) {
+                                        if (!repeater.model.isDependencyNode(i)
+                                                && root.draggedSec.y < currItem.y + (currItem.height - root.draggedSec.height) * .5) {
+                                            currItem.y = root.secsY[i] + root.draggedSec.height + nodesCol.spacing
+                                            root.moveToIdx = Math.min(root.moveToIdx, i)
+                                        } else {
+                                            currItem.y = root.secsY[i]
+                                        }
                                     }
                                 }
                             }
-                        }
-                    } // Timer
-                } // Column
-            } // ScrollView
-        }
-    } // SplitView
-
-    Text {
-        id: emptyText
+                        } // Timer
+                    } // Column
+                } // ScrollView
 
-        text: qsTr("Add an effect node to start")
-        color: StudioTheme.Values.themeTextColor
-        font.pixelSize: StudioTheme.Values.baseFontSize
+                Text {
+                    text: qsTr("Add an effect node to start")
+                    color: StudioTheme.Values.themeTextColor
+                    font.pixelSize: StudioTheme.Values.baseFontSize
 
-        x: scrollView.x + (scrollView.width - emptyText.width) * .5
-        y: lowerSplitCol.y + lowerSplitCol.height * .5
+                    anchors.centerIn: parent
 
-        visible: EffectComposerBackend.effectComposerModel.isEmpty
-    }
+                    visible: EffectComposerBackend.effectComposerModel.isEmpty
+                }
+            } // Item
+        } // Column
+    } // SplitView
 }