From b4d153562b1b7f0dec1e81dd0b3b8fc360f07abf Mon Sep 17 00:00:00 2001
From: Mahmoud Badri <mahmoud.badri@qt.io>
Date: Wed, 16 Aug 2023 12:57:41 +0300
Subject: [PATCH] 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>
---
 .../effectMakerQmlSources/EffectMaker.qml     |  35 ++++---
 .../EffectMakerPreview.qml                    |  98 ++++++++++++++++++
 .../EffectMakerTopBar.qml                     |  43 ++++++++
 .../EffectNodesComboBox.qml                   |   3 +-
 .../effectMakerQmlSources/images/qt_logo.png  | Bin 0 -> 3663 bytes
 5 files changed, 161 insertions(+), 18 deletions(-)
 create mode 100644 share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml
 create mode 100644 share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerTopBar.qml
 create mode 100644 share/qtcreator/qmldesigner/effectMakerQmlSources/images/qt_logo.png

diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml
index 4f751883ac9..299f8672329 100644
--- a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml
+++ b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml
@@ -13,37 +13,40 @@ Item {
     Column {
         id: col
         anchors.fill: parent
-        spacing: 5
+        spacing: 1
 
-        Rectangle {
-            id: topHeader
+        EffectMakerTopBar {
 
-            width: parent.width
-            height: StudioTheme.Values.toolbarHeight
-            color: StudioTheme.Values.themeToolbarBackground
+        }
+
+        EffectMakerPreview {
 
-            Row {
-                // TODO
-            }
         }
 
         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
diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml
new file mode 100644
index 00000000000..a5bc05ed590
--- /dev/null
+++ b/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
+        }
+    }
+}
diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerTopBar.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerTopBar.qml
new file mode 100644
index 00000000000..eb5463f3bdf
--- /dev/null
+++ b/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
+    }
+}
diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNodesComboBox.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNodesComboBox.qml
index c29449fcf13..3e5a252fb06 100644
--- a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNodesComboBox.qml
+++ b/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()
         }
 
diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/images/qt_logo.png b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/qt_logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..5181f1b5ab43f8536b1c828b2a470a0036389a72
GIT binary patch
literal 3663
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

literal 0
HcmV?d00001