From b40766f09f6b293d39f5d77eab1c093830efffb5 Mon Sep 17 00:00:00 2001 From: Ali Kianian Date: Tue, 13 Aug 2024 14:56:02 +0300 Subject: [PATCH] QmlDesigner: Use Studio Color editor for material editor preview Also fixes that it opens the color dialog by any change on color Fixes: QDS-13333 Change-Id: If05fbd49d66900a01f4e23d22c37bf4883c8bcc7 Reviewed-by: Mahmoud Badri Reviewed-by: Miikka Heikkinen --- .../ColorEditorPopup.qml | 63 +++++++++ .../MaterialEditorPane.qml | 8 +- .../MaterialEditorPreview.qml | 128 ++++++++++++++---- .../materialeditor/materialeditorview.cpp | 37 +---- .../materialeditor/materialeditorview.h | 1 - 5 files changed, 176 insertions(+), 61 deletions(-) create mode 100644 share/qtcreator/qmldesigner/materialEditorQmlSources/ColorEditorPopup.qml diff --git a/share/qtcreator/qmldesigner/materialEditorQmlSources/ColorEditorPopup.qml b/share/qtcreator/qmldesigner/materialEditorQmlSources/ColorEditorPopup.qml new file mode 100644 index 00000000000..7f2250c5940 --- /dev/null +++ b/share/qtcreator/qmldesigner/materialEditorQmlSources/ColorEditorPopup.qml @@ -0,0 +1,63 @@ +// 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 HelperWidgets as HelperWidgets +import StudioControls as StudioControls + +StudioControls.PopupDialog { + id: colorPopup + + property QtObject loaderItem: loader.item + property color originalColor + required property color currentColor + + signal activateColor(color : color) + + width: 260 + + onOriginalColorChanged: loader.updateOriginalColor() + onClosing: loader.active = false + + function open(showItem) { + loader.ensureActive() + colorPopup.show(showItem) + + loader.updateOriginalColor() + } + + Loader { + id: loader + + function ensureActive() { + if (!loader.active) + loader.active = true + } + + function updateOriginalColor() { + if (loader.status === Loader.Ready) + loader.item.originalColor = colorPopup.originalColor + } + + sourceComponent: StudioControls.ColorEditorPopup { + width: colorPopup.contentWidth + visible: colorPopup.visible + + onActivateColor: (color) => { + colorPopup.activateColor(color) + } + } + + Binding { + target: loader.item + property: "color" + value: colorPopup.currentColor + when: loader.status === Loader.Ready + } + + onLoaded: { + loader.updateOriginalColor() + colorPopup.titleBar = loader.item.titleBarContent + } + } +} diff --git a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml index 5010017f2b0..300c453c674 100644 --- a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml +++ b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml @@ -134,12 +134,16 @@ Item { onPreviewEnvChanged: root.previewEnvChanged(previewEnv) onPreviewModelChanged: root.previewModelChanged(previewModel) - previewEnv: root.__previewEnv - previewModel: root.__previewModel pinned: settings.dockMode showPinButton: !leftSideView.visible onPinnedChanged: settings.dockMode = previewItem.pinned + Binding { + previewItem.previewEnv: root.__previewEnv + previewItem.previewModel: root.__previewModel + delayed: true + } + Connections { target: root diff --git a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPreview.qml b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPreview.qml index fe95e33d900..c3c7ff5a973 100644 --- a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPreview.qml +++ b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPreview.qml @@ -45,6 +45,8 @@ Rectangle { image.source = "image://materialEditor/preview" } + onPreviewEnvChanged: envMenu.updateEnvParams(root.previewEnv) + Image { id: image @@ -107,6 +109,7 @@ Rectangle { StudioControls.Menu { id: modelMenu + closePolicy: StudioControls.Menu.CloseOnEscape | StudioControls.Menu.CloseOnPressOutside ListModel { @@ -146,40 +149,111 @@ Rectangle { StudioControls.Menu { id: envMenu + + property string previewEnvName + property string previewEnvValue + + signal envParametersChanged() + closePolicy: StudioControls.Menu.CloseOnEscape | StudioControls.Menu.CloseOnPressOutside - ListModel { - id: envMenuModel - ListElement { - envName: qsTr("Basic") - envStr: "Basic" - } - ListElement { - envName: qsTr("Color") - envStr: "Color" - } - ListElement { - envName: qsTr("Studio") - envStr: "SkyBox=preview_studio" - } - ListElement { - envName: qsTr("Landscape") - envStr: "SkyBox=preview_landscape" + Component.onCompleted: envMenu.updateEnvParams(root.previewEnv) + + function updateEnvParams(str: string) { + let eqFound = str.lastIndexOf("=") + let newEnvName = (eqFound > 0) ? str.substr(0, eqFound) : str + let newEnvValue = (eqFound > 0) ? str.substr(eqFound + 1, str.length - eqFound) : "" + + if (envMenu.previewEnvName !== newEnvName + || envMenu.previewEnvValue !== newEnvValue) { + envMenu.previewEnvName = newEnvName + envMenu.previewEnvValue = newEnvValue + envMenu.envParametersChanged() } } - Repeater { - model: envMenuModel - StudioControls.MenuItemWithIcon { - text: envName - onClicked: { - // Force property change notifications to keep check mark when reselected - root.previewEnv = "" - root.previewEnv = envStr + EnvMenuItem { + envName: qsTr("Basic") + envStr: "Basic" + } + + EnvMenuItem { + id: colorItem + + property color color + property bool colorIsValid: false + + envName: qsTr("Color") + envStr: "Color" + checked: false + + Component.onCompleted: update() + onColorIsValidChanged: updatePopupOriginalColor() + + onClicked: { + colorItem.updatePopupOriginalColor() + colorPopup.open(colorItem) + } + + onColorChanged: { + colorItem.envStr = colorItem.checked + ? "Color=" + color.toString() + : "Color" + colorItem.commit() + } + + function updatePopupOriginalColor() { + if (colorItem.colorIsValid) + colorPopup.originalColor = colorItem.color + } + + function update() { + colorItem.checked = envMenu.previewEnvName === "Color" + if (colorItem.checked && envMenu.previewEnvValue) { + colorItem.color = envMenu.previewEnvValue + colorItem.colorIsValid = true + } else { + colorItem.colorIsValid = false + } + } + + Connections { + target: envMenu + function onEnvParametersChanged() { + colorItem.update(); } - checkable: true - checked: root.previewEnv === envStr } } + + EnvMenuItem { + envName: qsTr("Studio") + envStr: "SkyBox=preview_studio" + } + + EnvMenuItem { + envName: qsTr("Landscape") + envStr: "SkyBox=preview_landscape" + } + } + + ColorEditorPopup { + id: colorPopup + + currentColor: colorItem.color + onActivateColor: (color) => colorItem.color = color + } + + component EnvMenuItem: StudioControls.MenuItemWithIcon { + required property string envName + property string envStr + + function commit() { + root.previewEnv = envStr + } + + text: envName + onClicked: commit() + checkable: false + checked: root.previewEnv === envStr } } diff --git a/src/plugins/qmldesigner/components/materialeditor/materialeditorview.cpp b/src/plugins/qmldesigner/components/materialeditor/materialeditorview.cpp index cfbf0aaf41e..d3df9bdece1 100644 --- a/src/plugins/qmldesigner/components/materialeditor/materialeditorview.cpp +++ b/src/plugins/qmldesigner/components/materialeditor/materialeditorview.cpp @@ -469,40 +469,15 @@ void MaterialEditorView::handlePreviewEnvChanged(const QString &envAndValue) }; if (env == "Color") { - m_colorDialog.clear(); - - // Store color to separate property to persist selection over non-color env changes auto oldColorPropVal = rootModelNode().auxiliaryData(materialPreviewColorDocProperty); - auto oldEnvPropVal = rootModelNode().auxiliaryData(materialPreviewEnvDocProperty); - auto oldValuePropVal = rootModelNode().auxiliaryData(materialPreviewEnvValueDocProperty); QString oldColor = oldColorPropVal ? oldColorPropVal->toString() : ""; - QString oldEnv = oldEnvPropVal ? oldEnvPropVal->toString() : ""; - QString oldValue = oldValuePropVal ? oldValuePropVal->toString() : ""; - m_colorDialog = new QColorDialog(Core::ICore::dialogParent()); - m_colorDialog->setModal(true); - m_colorDialog->setAttribute(Qt::WA_DeleteOnClose); - m_colorDialog->setCurrentColor(QColor(oldColor)); - m_colorDialog->show(); - - QObject::connect(m_colorDialog, &QColorDialog::currentColorChanged, - m_colorDialog, [=](const QColor &color) { - renderPreviews(env, color.name()); - }); - - QObject::connect(m_colorDialog, &QColorDialog::colorSelected, - m_colorDialog, [this, renderPreviews, env](const QColor &color) { - renderPreviews(env, color.name()); - rootModelNode().setAuxiliaryData(materialPreviewColorDocProperty, color.name()); - }); - - QObject::connect(m_colorDialog, &QColorDialog::rejected, m_colorDialog, - [this, renderPreviews, oldEnv, oldValue] { - renderPreviews(oldEnv, oldValue); - initPreviewData(); - }); - return; + if (value.isEmpty()) + value = oldColor; + else + rootModelNode().setAuxiliaryData(materialPreviewColorDocProperty, value); } + renderPreviews(env, value); } @@ -677,7 +652,7 @@ void MaterialEditorView::initPreviewData() } }); - if (!envValue.isEmpty() && env != "Color" && env != "Basic") { + if (!envValue.isEmpty() && env != "Basic") { env += '='; env += envValue; } diff --git a/src/plugins/qmldesigner/components/materialeditor/materialeditorview.h b/src/plugins/qmldesigner/components/materialeditor/materialeditorview.h index 8c9247ee784..8f0e98f1f31 100644 --- a/src/plugins/qmldesigner/components/materialeditor/materialeditorview.h +++ b/src/plugins/qmldesigner/components/materialeditor/materialeditorview.h @@ -139,7 +139,6 @@ private: QSize m_previewSize; QByteArray m_previewRequestId; - QPointer m_colorDialog; QPointer m_itemLibraryInfo; DynamicPropertiesModel *m_dynamicPropertiesModel = nullptr; };