QmlDesigner: Add effect maker nodes popup window

Barebone combobox custom popup implementation. This allows the popup to
extend outside the Qml limits. Window content to be implemented
separately.

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

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml

@@ -39,7 +39,58 @@ Item {
             height: StudioTheme.Values.toolbarHeight
             color: StudioTheme.Values.themeToolbarBackground
 
-            // TODO
+            StudioControls.ComboBox {
+                id: effectNodesComboBox
+
+                actionIndicatorVisible: false
+                x: 5
+                width: parent.width - 50
+                anchors.verticalCenter: parent.verticalCenter
+
+                model: [qsTr("+ Add Effect")]
+
+                // hide default popup
+                popup.width: 0
+                popup.height: 0
+
+                Connections {
+                    target: effectNodesComboBox.popup
+
+                    function onAboutToShow() {
+                        var a = root.mapToGlobal(0, 0)
+                        var b = effectNodesComboBox.mapToItem(root, 0, 0)
+
+                        effectNodesWindow.x = a.x + b.x + effectNodesComboBox.width - effectNodesWindow.width
+                        effectNodesWindow.y = a.y + b.y + effectNodesComboBox.height - 1
+                        effectNodesWindow.show()
+                        effectNodesWindow.requestActivate()
+                    }
+
+                    function onAboutToHide() {
+                        effectNodesWindow.hide()
+                    }
+                }
+
+                Window {
+                    id: effectNodesWindow
+
+                    width: 600
+                    height: Math.min(400, Screen.height - y - 40) // TODO: window sizing will be refined
+                    flags:  Qt.Popup | Qt.FramelessWindowHint
+
+                    onActiveChanged: {
+                        if (!active)
+                            effectNodesComboBox.popup.close()
+                    }
+
+                    Rectangle {
+                        anchors.fill: parent
+                        color: StudioTheme.Values.themePopupBackground
+                        border.color: StudioTheme.Values.themeInteraction
+                        border.width: 1
+                    }
+                }
+            }
         }
 
         Image {

src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.cpp

@@ -34,31 +34,31 @@ static QString propertyEditorResourcesPath()
 EffectMakerWidget::EffectMakerWidget(EffectMakerView *view)
     : m_effectMakerModel{new EffectMakerModel(this)}
     , m_effectMakerView(view)
-    , m_effectMakerWidget{new StudioQuickWidget(this)}
+    , m_quickWidget{new StudioQuickWidget(this)}
 {
     setWindowTitle(tr("Effect Maker", "Title of effect maker widget"));
     setMinimumWidth(250);
 
-    m_effectMakerWidget->quickWidget()->installEventFilter(this);
+    m_quickWidget->quickWidget()->installEventFilter(this);
 
     // create the inner widget
-    m_effectMakerWidget->quickWidget()->setObjectName(Constants::OBJECT_NAME_EFFECT_MAKER);
-    m_effectMakerWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
-    Theme::setupTheme(m_effectMakerWidget->engine());
-    m_effectMakerWidget->engine()->addImportPath(propertyEditorResourcesPath() + "/imports");
-    m_effectMakerWidget->setClearColor(Theme::getColor(Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
+    m_quickWidget->quickWidget()->setObjectName(Constants::OBJECT_NAME_EFFECT_MAKER);
+    m_quickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
+    Theme::setupTheme(m_quickWidget->engine());
+    m_quickWidget->engine()->addImportPath(propertyEditorResourcesPath() + "/imports");
+    m_quickWidget->setClearColor(Theme::getColor(Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
 
     auto layout = new QHBoxLayout(this);
     layout->setContentsMargins({});
     layout->setSpacing(0);
-    layout->addWidget(m_effectMakerWidget.data());
+    layout->addWidget(m_quickWidget.data());
 
     setStyleSheet(Theme::replaceCssColors(
         QString::fromUtf8(Utils::FileReader::fetchQrc(":/qmldesigner/stylesheet.css"))));
 
     QmlDesignerPlugin::trackWidgetFocusTime(this, Constants::EVENT_EFFECTMAKER_TIME);
 
-    auto map = m_effectMakerWidget->registerPropertyMap("EffectMakerBackend");
+    auto map = m_quickWidget->registerPropertyMap("EffectMakerBackend");
     map->setProperties({{"effectMakerModel", QVariant::fromValue(m_effectMakerModel.data())},
                         {"rootView", QVariant::fromValue(this)}});
 
@@ -83,7 +83,7 @@ void EffectMakerWidget::contextHelp(const Core::IContext::HelpCallback &callback
 
 StudioQuickWidget *EffectMakerWidget::quickWidget() const
 {
-    return m_effectMakerWidget.data();
+    return m_quickWidget.data();
 }
 
 QPointer<EffectMakerModel> EffectMakerWidget::effectMakerModel() const
@@ -109,7 +109,7 @@ void EffectMakerWidget::reloadQmlSource()
 {
     const QString effectMakerQmlPath = qmlSourcesPath() + "/EffectMaker.qml";
     QTC_ASSERT(QFileInfo::exists(effectMakerQmlPath), return);
-    m_effectMakerWidget->setSource(QUrl::fromLocalFile(effectMakerQmlPath));
+    m_quickWidget->setSource(QUrl::fromLocalFile(effectMakerQmlPath));
 }
 
 } // namespace QmlDesigner

src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.h

@@ -44,7 +44,7 @@ private:
 
     QPointer<EffectMakerModel> m_effectMakerModel;
     QPointer<EffectMakerView> m_effectMakerView;
-    QPointer<StudioQuickWidget> m_effectMakerWidget;
+    QPointer<StudioQuickWidget> m_quickWidget;
 };
 
 } // namespace QmlDesigner