EffectComposer: Add a footer to the code editor

The footer contains:
* Live update button
* Close button
* Apply button

Fixes: QDS-14233
Change-Id: I25070356d5357141be5701ee701d938376bfc141
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Shrief Gabr <shrief.gabr@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

share/qtcreator/qmldesigner/effectComposerQmlSources/CodeEditorFooter.qml

@@ -0,0 +1,59 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+import QtQuick.Layouts
+import StudioControls as StudioControls
+import StudioTheme as StudioTheme
+
+Rectangle {
+    id: root
+
+    property var rootEditor: shaderEditor
+
+    color: StudioTheme.Values.themeToolbarBackground
+    implicitHeight: rowLayout.height
+
+    RowLayout {
+        id: rowLayout
+
+        width: parent.width
+        anchors.verticalCenter: parent.verticalCenter
+
+        spacing: StudioTheme.Values.controlGap
+
+        StudioControls.CheckBox {
+            text: qsTr("Live Update")
+            actionIndicatorVisible: false
+            style: StudioTheme.Values.viewBarControlStyle
+            checked: root.rootEditor ? root.rootEditor.liveUpdate : false
+            onToggled: root.rootEditor.liveUpdate = checked
+            Layout.alignment: Qt.AlignVCenter
+            Layout.leftMargin: StudioTheme.Values.toolbarHorizontalMargin
+        }
+
+        Item { // Spacer
+            Layout.fillWidth: true
+            Layout.preferredHeight: 1
+        }
+
+        FooterButton {
+            buttonIcon: qsTr("Close")
+            onClicked: root.rootEditor.close()
+        }
+
+        FooterButton {
+            buttonIcon: qsTr("Apply")
+            onClicked: root.rootEditor.rebakeRequested()
+            Layout.rightMargin: StudioTheme.Values.toolbarHorizontalMargin
+        }
+    }
+
+    component FooterButton: StudioControls.AbstractButton {
+        iconFontFamily: StudioTheme.Constants.font.family
+        style: StudioTheme.Values.viewBarControlStyle
+        checkable: false
+        Layout.alignment: Qt.AlignVCenter
+        Layout.preferredWidth: 100
+    }
+}

share/qtcreator/qmldesigner/effectComposerQmlSources/CodeEditorHeader.qml

@@ -47,15 +47,6 @@ Rectangle {
                 style: StudioTheme.Values.viewBarControlStyle
                 Layout.alignment: Qt.AlignVCenter
             }
-
-            StudioControls.CheckBox {
-                text: qsTr("Live Update")
-                actionIndicatorVisible: false
-                style: StudioTheme.Values.viewBarControlStyle
-                checked: root.rootEditor ? root.rootEditor.liveUpdate : false
-                onToggled: root.rootEditor.liveUpdate = checked
-                Layout.alignment: Qt.AlignVCenter
-            }
         }
 
         CodeEditorUniformsView {

src/plugins/effectcomposer/effectshaderscodeeditor.cpp

@@ -38,6 +38,8 @@ inline constexpr char OBJECT_NAME_EFFECTCOMPOSER_SHADER_HEADER[]
     = "QQuickWidgetEffectComposerCodeEditorHeader";
 inline constexpr char OBJECT_NAME_EFFECTCOMPOSER_SHADER_EDITOR_TABS[]
     = "QQuickWidgetEffectComposerCodeEditorTabs";
+inline constexpr char OBJECT_NAME_EFFECTCOMPOSER_SHADER_EDITOR_FOOTER[]
+    = "QQuickWidgetEffectComposerCodeEditorFooter";
 
 inline constexpr char EFFECTCOMPOSER_VERTEX_ID[] = "VERTEX";
 inline constexpr char EFFECTCOMPOSER_FRAGMENT_ID[] = "FRAGMENT";
@@ -77,6 +79,7 @@ EffectShadersCodeEditor::~EffectShadersCodeEditor()
 
     m_headerWidget->setSource({});
     m_qmlTabWidget->setSource({});
+    m_qmlFooterWidget->setSource({});
 }
 
 void EffectShadersCodeEditor::showWidget()
@@ -260,11 +263,15 @@ void EffectShadersCodeEditor::setupUIComponents()
 
     createHeader();
     createQmlTabs();
+    createQmlFooter();
 
     verticalLayout->setContentsMargins(0, 0, 0, 0);
     verticalLayout->addWidget(splitter);
+    tabsLayout->setContentsMargins(0, 0, 0, 0);
+    tabsLayout->setSpacing(0);
     tabsLayout->addWidget(m_qmlTabWidget);
     tabsLayout->addWidget(m_stackedWidget);
+    tabsLayout->addWidget(m_qmlFooterWidget);
 
     splitter->addWidget(m_headerWidget.get());
     splitter->addWidget(tabComplexWidget);
@@ -340,6 +347,20 @@ void EffectShadersCodeEditor::createQmlTabs()
     m_qmlTabWidget->setFixedHeight(43);
 }
 
+void EffectShadersCodeEditor::createQmlFooter()
+{
+    m_qmlFooterWidget = new StudioQuickWidget(this);
+    m_qmlFooterWidget->quickWidget()->setObjectName(OBJECT_NAME_EFFECTCOMPOSER_SHADER_EDITOR_FOOTER);
+    m_qmlFooterWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
+    QmlDesigner::Theme::setupTheme(m_qmlFooterWidget->engine());
+    m_qmlFooterWidget->engine()->addImportPath(propertyEditorResourcesPath() + "/imports");
+    m_qmlFooterWidget->engine()->addImportPath(EffectUtils::nodesSourcesPath() + "/common");
+    m_qmlFooterWidget->setClearColor(QmlDesigner::Theme::getColor(
+        QmlDesigner::Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
+    m_qmlFooterWidget->rootContext()->setContextProperty("shaderEditor", QVariant::fromValue(this));
+    m_qmlFooterWidget->setFixedHeight(40);
+}
+
 void EffectShadersCodeEditor::loadQml()
 {
     const QString headerQmlPath = EffectComposerWidget::qmlSourcesPath() + "/CodeEditorHeader.qml";
@@ -350,6 +371,10 @@ void EffectShadersCodeEditor::loadQml()
                                       + "/CodeEditorTabs.qml";
     QTC_ASSERT(QFileInfo::exists(editorTabsQmlPath), return);
     m_qmlTabWidget->setSource(QUrl::fromLocalFile(editorTabsQmlPath));
+
+    const QString footerQmlPath = EffectComposerWidget::qmlSourcesPath() + "/CodeEditorFooter.qml";
+    QTC_ASSERT(QFileInfo::exists(footerQmlPath), return);
+    m_qmlFooterWidget->setSource(QUrl::fromLocalFile(footerQmlPath));
 }
 
 void EffectShadersCodeEditor::setUniformsModel(EffectComposerUniformsTableModel *uniformsTable)

src/plugins/effectcomposer/effectshaderscodeeditor.h

@@ -96,6 +96,7 @@ private:
     void readAndApplyLiveUpdateSettings();
     void createHeader();
     void createQmlTabs();
+    void createQmlFooter();
     void loadQml();
     void setUniformsModel(EffectComposerUniformsTableModel *uniforms);
     void selectNonEmptyShader(ShaderEditorData *data);
@@ -107,6 +108,7 @@ private:
     QSettings *m_settings = nullptr;
     QPointer<StudioQuickWidget> m_headerWidget;
     QPointer<StudioQuickWidget> m_qmlTabWidget;
+    QPointer<StudioQuickWidget> m_qmlFooterWidget;
     QPointer<QStackedWidget> m_stackedWidget;
     QPointer<EffectComposerUniformsTableModel> m_defaultTableModel;
     QPointer<EffectComposerEditableNodesModel> m_editableNodesModel;