diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml index 456539d13cf..49731b37130 100644 --- a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml +++ b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMaker.qml @@ -25,7 +25,7 @@ Item { } EffectMakerPreview { - + mainRoot: root } Rectangle { diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml index 10f6b516024..326c6017816 100644 --- a/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml +++ b/share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml @@ -14,6 +14,8 @@ Column { width: parent.width + required property Item mainRoot + Rectangle { // toolbar width: parent.width height: StudioTheme.Values.toolbarHeight @@ -25,6 +27,12 @@ Column { anchors.rightMargin: 5 anchors.leftMargin: 5 + PreviewImagesComboBox { + id: imagesComboBox + + mainRoot: root.mainRoot + } + Item { Layout.fillWidth: true } @@ -114,7 +122,7 @@ Column { fillMode: Image.PreserveAspectFit smooth: true - source: "images/qt_logo.png" // TODO: update image + source: imagesComboBox.selectedImage Behavior on scale { NumberAnimation { diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/PreviewImagesComboBox.qml b/share/qtcreator/qmldesigner/effectMakerQmlSources/PreviewImagesComboBox.qml new file mode 100644 index 00000000000..68a588cdeff --- /dev/null +++ b/share/qtcreator/qmldesigner/effectMakerQmlSources/PreviewImagesComboBox.qml @@ -0,0 +1,145 @@ +// 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: 60 + + model: [selectedImage] + + // hide default popup + popup.width: 0 + popup.height: 0 + + required property Item mainRoot + + property var images: ["images/preview1.png", "images/preview2.png", "images/preview3.png", "images/preview4.png"] + property string selectedImage: images[0] + + Connections { + target: root.popup + + function onAboutToShow() { + var a = mainRoot.mapToGlobal(0, 0) + var b = root.mapToItem(mainRoot, 0, 0) + + window.x = a.x + b.x + root.width - window.width + window.y = a.y + b.y + root.height - 1 + + window.show() + window.requestActivate() + } + + function onAboutToHide() { + window.hide() + } + } + + contentItem: Item { + width: 30 + height: 30 + + Image { + source: root.selectedImage + fillMode: Image.PreserveAspectFit + smooth: true + anchors.fill: parent + anchors.margins: 1 + } + + MouseArea { + anchors.fill: parent + onClicked: { + if (root.open) + root.popup.close(); + else + root.popup.open(); + } + } + } + + Window { + id: window + + width: col.width + 2 // 2: scrollView left and right 1px margins + height: Math.min(800, Math.min(col.height + 2, Screen.height - y - 40)) // 40: some bottom margin to cover OS bottom toolbar + flags: Qt.Popup | Qt.FramelessWindowHint + + onActiveChanged: { + if (!active && !root.hover) + 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 + + Column { + id: col + + 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) + + window.x = a.x + b.x + root.width - col.width + } + + padding: 10 + spacing: 10 + + Repeater { + model: root.images + + Rectangle { + required property int index + required property var modelData + + color: "transparent" + border.color: root.selectedImage === modelData ? StudioTheme.Values.themeInteraction + : "transparent" + + width: 200 + height: 200 + + Image { + source: modelData + anchors.fill: parent + fillMode: Image.PreserveAspectFit + smooth: true + anchors.margins: 1 + } + + MouseArea { + anchors.fill: parent + + onClicked: { + root.selectedImage = root.images[index] + root.popup.close() + } + } + } + } + } + } + } + } +} diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview1.png b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview1.png new file mode 100644 index 00000000000..c8a58e8e57d Binary files /dev/null and b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview1.png differ diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview2.png b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview2.png new file mode 100644 index 00000000000..f5bbda85eb8 Binary files /dev/null and b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview2.png differ diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview3.png b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview3.png new file mode 100644 index 00000000000..3c964b8d4dd Binary files /dev/null and b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview3.png differ diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview4.png b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview4.png new file mode 100644 index 00000000000..288207c8428 Binary files /dev/null and b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/preview4.png differ diff --git a/share/qtcreator/qmldesigner/effectMakerQmlSources/images/qt_logo.png b/share/qtcreator/qmldesigner/effectMakerQmlSources/images/qt_logo.png deleted file mode 100644 index 5181f1b5ab4..00000000000 Binary files a/share/qtcreator/qmldesigner/effectMakerQmlSources/images/qt_logo.png and /dev/null differ