QmlDesigner: Add effect maker main UI buttons and toolbars

Also refactor some components into separate files.

Fixes: QDS-10409
Change-Id: Ifb6380214b85d9f1d67fbb99269d135234abf1d5
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml

@@ -13,37 +13,40 @@ Item {
     Column {
         id: col
         anchors.fill: parent
-        spacing: 5
+        spacing: 1
 
-        Rectangle {
+        EffectMakerTopBar {
-            id: topHeader
 
-            width: parent.width
-            height: StudioTheme.Values.toolbarHeight
-            color: StudioTheme.Values.themeToolbarBackground
-
-            Row {
-                // TODO
         }
+
+        EffectMakerPreview {
+
         }
 
         Rectangle {
-            id: previewHeader
-
             width: parent.width
             height: StudioTheme.Values.toolbarHeight
             color: StudioTheme.Values.themeToolbarBackground
 
             EffectNodesComboBox {
                 mainRoot: root
+
+                anchors.verticalCenter: parent.verticalCenter
+            }
+
+            HelperWidgets.AbstractButton {
+                anchors.right: parent.right
+                anchors.rightMargin: 5
+                anchors.verticalCenter: parent.verticalCenter
+
+                style: StudioTheme.Values.viewBarButtonStyle
+                buttonIcon: StudioTheme.Constants.code
+                tooltip: qsTr("Open Shader in Code Editor")
+
+                onClicked: {} // TODO
             }
         }
 
-        Image {
-            id: previewImage
-
-            // TODO
-        }
 
         HelperWidgets.ScrollView {
             id: scrollView

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml

@@ -0,0 +1,98 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+import QtQuickDesignerTheme
+import HelperWidgets as HelperWidgets
+import StudioControls as StudioControls
+import StudioTheme 1.0 as StudioTheme
+import EffectMakerBackend
+
+Column {
+    id: root
+
+    width: parent.width
+
+    Rectangle { // toolbar
+        width: parent.width
+        height: StudioTheme.Values.toolbarHeight
+        color: StudioTheme.Values.themeToolbarBackground
+
+        Row {
+            anchors.right: parent.right
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.rightMargin: 5
+            spacing: 5
+
+            HelperWidgets.AbstractButton {
+                style: StudioTheme.Values.viewBarButtonStyle
+                buttonIcon: StudioTheme.Constants.zoomOut_medium
+                tooltip: qsTr("Zoom out")
+
+                onClicked: {} // TODO
+            }
+
+            HelperWidgets.AbstractButton {
+                style: StudioTheme.Values.viewBarButtonStyle
+                buttonIcon: StudioTheme.Constants.zoomIn_medium
+                tooltip: qsTr("Zoom In")
+
+                onClicked: {} // TODO
+            }
+
+            HelperWidgets.AbstractButton {
+                style: StudioTheme.Values.viewBarButtonStyle
+                buttonIcon: StudioTheme.Constants.cornersAll
+                tooltip: qsTr("Zoom Fit")
+
+                onClicked: {} // TODO
+            }
+
+            Column {
+                Text {
+                    text: "0.000s"
+                    color: StudioTheme.Values.themeTextColor
+                    font.pixelSize: 10
+                }
+
+                Text {
+                    text: "0000000"
+                    color: StudioTheme.Values.themeTextColor
+                    font.pixelSize: 10
+                }
+            }
+
+            HelperWidgets.AbstractButton {
+                style: StudioTheme.Values.viewBarButtonStyle
+                buttonIcon: StudioTheme.Constants.toStartFrame_medium
+                tooltip: qsTr("Restart Animation")
+
+                onClicked: {} // TODO
+            }
+
+            HelperWidgets.AbstractButton {
+                style: StudioTheme.Values.viewBarButtonStyle
+                buttonIcon: StudioTheme.Constants.topToolbar_runProject
+                tooltip: qsTr("Play Animation")
+
+                onClicked: {} // TODO
+            }
+        }
+    }
+
+    Rectangle { // preview image
+        id: previewImage
+
+        color: "#dddddd"
+        width: parent.width
+        height: 200
+
+        Image {
+            anchors.margins: 5
+            anchors.fill: parent
+            fillMode: Image.PreserveAspectFit
+
+            source: "images/qt_logo.png" // TODO: update image
+        }
+    }
+}

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerTopBar.qml

@@ -0,0 +1,43 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+import QtQuickDesignerTheme
+import HelperWidgets as HelperWidgets
+import StudioControls as StudioControls
+import StudioTheme 1.0 as StudioTheme
+import EffectMakerBackend
+
+Rectangle {
+    id: root
+
+    width: parent.width
+    height: StudioTheme.Values.toolbarHeight
+    color: StudioTheme.Values.themeToolbarBackground
+
+    HelperWidgets.Button {
+        anchors.verticalCenter: parent.verticalCenter
+        x: 5
+
+        text: qsTr("Save in Library")
+
+        onClicked: {
+            // TODO
+        }
+    }
+
+    HelperWidgets.AbstractButton {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.rightMargin: 5
+        anchors.right: parent.right
+
+        style: StudioTheme.Values.viewBarButtonStyle
+        buttonIcon: StudioTheme.Constants.help
+        tooltip: qsTr("How to use Effect Maker:
+1. Click \"+ Add Effect\" to add effect node
+2. Adjust the effect nodes properties
+3. Change the order of the effects, if you like
+4. See the preview
+5. Save in the library, if you wish to reuse the effect later") // TODO: revise with doc engineer
+    }
+}

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNodesComboBox.qml

@@ -14,7 +14,6 @@ StudioControls.ComboBox {
     actionIndicatorVisible: false
     x: 5
     width: parent.width - 50
-    anchors.verticalCenter: parent.verticalCenter
 
     model: [qsTr("+ Add Effect")]
 
@@ -51,7 +50,7 @@ StudioControls.ComboBox {
         flags:  Qt.Popup | Qt.FramelessWindowHint
 
         onActiveChanged: {
-            if (!active)
+            if (!active && !root.hover)
                 root.popup.close()
         }