diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml index cf57e43ca41..4f751883ac9 100644 --- a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml +++ b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml @@ -2,8 +2,6 @@ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0 import QtQuick -import QtQuick.Layouts -import QtQuick.Controls import HelperWidgets as HelperWidgets import StudioControls as StudioControls import StudioTheme as StudioTheme @@ -36,136 +34,8 @@ Item { height: StudioTheme.Values.toolbarHeight color: StudioTheme.Values.themeToolbarBackground - 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: row.width + 2 // 2: scrollView left and right 1px margins - height: Math.min(800, Math.min(row.height + 2, Screen.height - y - 40)) // 40: some bottom margin to cover OS bottom toolbar - flags: Qt.Popup | Qt.FramelessWindowHint - - onActiveChanged: { - if (!active) - effectNodesComboBox.popup.close() - } - - Rectangle { - anchors.fill: parent - color: StudioTheme.Values.themePanelBackground - border.color: StudioTheme.Values.themeInteraction - border.width: 1 - - HelperWidgets.ScrollView { - anchors.fill: parent - anchors.margins: 1 - - Row { - id: row - - onWidthChanged: { - // Needed to update on first window showing, as row.width only gets - // correct value after the window is shown, so first showing is off - - var a = root.mapToGlobal(0, 0) - var b = effectNodesComboBox.mapToItem(root, 0, 0) - - effectNodesWindow.x = a.x + b.x + effectNodesComboBox.width - row.width - } - - padding: 10 - spacing: 10 - - Repeater { - model: EffectMakerBackend.effectMakerNodesModel - - Column { - spacing: 10 - - Text { - text: categoryName - color: StudioTheme.Values.themeTextColor - font.pointSize: StudioTheme.Values.baseFontSize - } - - Item { width: 1; height: 5 } // spacer - - Repeater { - model: categoryNodes - - Rectangle { - width: 140 - height: 22 - - color: mouseArea.containsMouse ? StudioTheme.Values.themeControlBackgroundInteraction - : "transparent" - - MouseArea { - id: mouseArea - - anchors.fill: parent - hoverEnabled: true - } - - Row { - spacing: 5 - - IconImage { - id: nodeIcon - - width: 22 - height: 22 - - color: StudioTheme.Values.themeTextColor - source: modelData.nodeIcon - } - - Text { - text: modelData.nodeName - color: StudioTheme.Values.themeTextColor - font.pointSize: StudioTheme.Values.smallFontSize - anchors.verticalCenter: nodeIcon.verticalCenter - } - } - } - } - } - } - } - } - } - } + EffectNodesComboBox { + mainRoot: root } } diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNode.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNode.qml index 808abf89abe..1e9db9ebcd0 100644 --- a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNode.qml +++ b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNode.qml @@ -3,70 +3,51 @@ import QtQuick import QtQuick.Controls -import QtQuick.Layouts import QtQuickDesignerTheme import HelperWidgets import StudioControls as StudioControls import StudioTheme 1.0 as StudioTheme import EffectMakerBackend -// TODO: this will be redone based on new specs - Rectangle { - property real margin: StudioTheme.Values.marginTopBottom - id: root - height: col.height + margin * 2 - signal showContextMenu() + width: 140 + height: 22 - border.width: EffectMakerBackend.effectMakerModel.selectedIndex === index ? 3 : 0 - border.color: EffectMakerBackend.effectMakerModel.selectedIndex === index - ? StudioTheme.Values.themeControlOutlineInteraction - : "transparent" - color: "transparent" - visible: true // TODO: from rolename -> effectVisible + color: mouseArea.containsMouse ? StudioTheme.Values.themeControlBackgroundInteraction + : "transparent" MouseArea { id: mouseArea anchors.fill: parent - acceptedButtons: Qt.LeftButton | Qt.RightButton + hoverEnabled: true + acceptedButtons: Qt.LeftButton - onPressed: (mouse) => { - EffectMakerBackend.effectMakerModel.selectEffect(index) - EffectMakerBackend.rootView.focusSection(0) // TODO: Set the correct section based on current effect - - if (mouse.button === Qt.LeftButton) - // TODO: Start dragging here - ; - else if (mouse.button === Qt.RightButton) - root.showContextMenu() + onClicked: { + EffectMakerBackend.rootView.addEffectNode(modelData.nodeName) } } - ColumnLayout { - id: col - Layout.topMargin: margin - Layout.bottomMargin: margin - Row { + Row { + spacing: 5 - width: parent.width + IconImage { + id: nodeIcon - Text { - anchors.verticalCenter: parent.verticalCenter - rightPadding: margin * 3 - text: '⋮⋮' - color: StudioTheme.Values.themeTextColorDisabled - font.letterSpacing: -10 - font.bold: true - font.pointSize: StudioTheme.Values.mediumIconFontSize - } + width: 22 + height: 22 - StudioControls.CheckBox { - text: modelData - actionIndicatorVisible: false - } + color: StudioTheme.Values.themeTextColor + source: modelData.nodeIcon + } + + Text { + text: modelData.nodeName + color: StudioTheme.Values.themeTextColor + font.pointSize: StudioTheme.Values.smallFontSize + anchors.verticalCenter: nodeIcon.verticalCenter } } } diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNodesComboBox.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNodesComboBox.qml new file mode 100644 index 00000000000..c29449fcf13 --- /dev/null +++ b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectNodesComboBox.qml @@ -0,0 +1,109 @@ +// 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 + +StudioControls.ComboBox { + id: root + + 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 + + required property Item mainRoot + + Connections { + target: root.popup + + function onAboutToShow() { + var a = mainRoot.mapToGlobal(0, 0) + var b = root.mapToItem(mainRoot, 0, 0) + + effectNodesWindow.x = a.x + b.x + root.width - effectNodesWindow.width + effectNodesWindow.y = a.y + b.y + root.height - 1 + + effectNodesWindow.show() + effectNodesWindow.requestActivate() + } + + function onAboutToHide() { + effectNodesWindow.hide() + } + } + + Window { + id: effectNodesWindow + + width: row.width + 2 // 2: scrollView left and right 1px margins + height: Math.min(800, Math.min(row.height + 2, Screen.height - y - 40)) // 40: some bottom margin to cover OS bottom toolbar + flags: Qt.Popup | Qt.FramelessWindowHint + + onActiveChanged: { + if (!active) + root.popup.close() + } + + Rectangle { + anchors.fill: parent + color: StudioTheme.Values.themePanelBackground + border.color: StudioTheme.Values.themeInteraction + border.width: 1 + + HelperWidgets.ScrollView { + anchors.fill: parent + anchors.margins: 1 + + Row { + id: row + + onWidthChanged: { + // Needed to update on first window showing, as row.width only gets + // correct value after the window is shown, so first showing is off + + var a = mainRoot.mapToGlobal(0, 0) + var b = root.mapToItem(mainRoot, 0, 0) + + effectNodesWindow.x = a.x + b.x + root.width - row.width + } + + padding: 10 + spacing: 10 + + Repeater { + model: EffectMakerBackend.effectMakerNodesModel + + Column { + spacing: 10 + + Text { + text: categoryName + color: StudioTheme.Values.themeTextColor + font.pointSize: StudioTheme.Values.baseFontSize + } + + Item { width: 1; height: 5 } // spacer + + Repeater { + model: categoryNodes + + EffectNode {} + } + } + } + } + } + } + } +} diff --git a/src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.cpp b/src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.cpp index bf85a77d115..2de6e25c9d1 100644 --- a/src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.cpp +++ b/src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.cpp @@ -99,6 +99,15 @@ QPointer EffectMakerWidget::effectMakerNodesModel() const return m_effectMakerNodesModel; } +void EffectMakerWidget::addEffectNode(const QString &nodeName) +{ + Q_UNUSED(nodeName) + + // TODO: implement adding a node to the composition + // TODO: nodeName might be changed to nodeId? +// m_effectMakerModel.addNode(nodeName); +} + void EffectMakerWidget::focusSection(int section) { Q_UNUSED(section) diff --git a/src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.h b/src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.h index 74df8d8eec1..0eee5ef7ff4 100644 --- a/src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.h +++ b/src/plugins/qmldesigner/components/effectmaker/effectmakerwidget.h @@ -35,6 +35,7 @@ public: QPointer effectMakerModel() const; QPointer effectMakerNodesModel() const; + Q_INVOKABLE void addEffectNode(const QString &nodeName); Q_INVOKABLE void focusSection(int section); protected: