From acdcf0c4594cb3eec3a885a1c6e6164e439bf19e Mon Sep 17 00:00:00 2001 From: Ali Kianian Date: Thu, 6 Jun 2024 11:56:19 +0300 Subject: [PATCH] QmlDesigner: Add a SplitView for the MaterialEditor preview * Also fixes that the image provider couldn't provide image for invalid requests. Task-number: QDS-12929 Change-Id: I172873880e30bbd6872f391f79692347f5697e6c Reviewed-by: Miikka Heikkinen Reviewed-by: Mahmoud Badri --- .../EffectComposer.qml | 4 +- .../MaterialEditorPane.qml | 11 ++ .../MaterialEditorTopSection.qml | 119 +++++++++++------- .../HelperWidgets/PropertyEditorPane.qml | 2 + .../imports/StudioTheme/Values.qml | 1 + .../materialeditorimageprovider.cpp | 7 +- 6 files changed, 96 insertions(+), 48 deletions(-) diff --git a/share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposer.qml b/share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposer.qml index 305bbc7925c..b327c1049d3 100644 --- a/share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposer.qml +++ b/share/qtcreator/qmldesigner/effectComposerQmlSources/EffectComposer.qml @@ -130,8 +130,8 @@ ColumnLayout { orientation: root.width > root.height ? Qt.Horizontal : Qt.Vertical handle: Rectangle { - implicitWidth: splitView.orientation === Qt.Horizontal ? 6 : splitView.width - implicitHeight: splitView.orientation === Qt.Horizontal ? splitView.height : 6 + implicitWidth: splitView.orientation === Qt.Horizontal ? StudioTheme.Values.splitterThickness : splitView.width + implicitHeight: splitView.orientation === Qt.Horizontal ? splitView.height : StudioTheme.Values.splitterThickness color: T.SplitHandle.pressed ? StudioTheme.Values.themeSliderHandleInteraction : (T.SplitHandle.hovered ? StudioTheme.Values.themeSliderHandleHover : "transparent") diff --git a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml index 0ab7e59d01f..dee83071924 100644 --- a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml +++ b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorPane.qml @@ -2,6 +2,7 @@ // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0 import QtQuick +import QtCore import HelperWidgets Item { @@ -42,6 +43,12 @@ Item { onToolBarAction: (action) => root.toolBarAction(action) } + Settings { + id: settings + + property var topSection + } + PropertyEditorPane { id: itemPane @@ -52,8 +59,12 @@ Item { clip: true headerComponent: MaterialEditorTopSection { + id: topSection onPreviewEnvChanged: root.previewEnvChanged(previewEnv) onPreviewModelChanged: root.previewModelChanged(previewModel) + + Component.onCompleted: topSection.restoreState(settings.topSection) + Component.onDestruction: settings.topSection = topSection.saveState() } DynamicPropertiesSection { diff --git a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml index 8bb52bf4100..e61fb8df354 100644 --- a/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml +++ b/share/qtcreator/qmldesigner/materialEditorQmlSources/MaterialEditorTopSection.qml @@ -8,17 +8,16 @@ import HelperWidgets as HelperWidgets import StudioControls as StudioControls import StudioTheme as StudioTheme -ColumnLayout { +SplitView { id: root property string previewEnv property string previewModel - property real __horizontalSpacing: 5 + property real __spacing: 5 property StudioTheme.ControlStyle buttonStyle: StudioTheme.ViewBarButtonStyle { //This is how you can override stuff from the control styles - controlSize: Qt.size(optionsToolbar.height, optionsToolbar.height) baseIconFontSize: StudioTheme.Values.bigIconFontSize } @@ -38,7 +37,17 @@ ColumnLayout { anchors.left: parent.left anchors.right: parent.right - Item { width: 1; height: 5 } // spacer + implicitHeight: previewRect.implicitHeight + nameSection.implicitHeight + + orientation: Qt.Vertical + + handle: Rectangle { + implicitWidth: root.orientation === Qt.Horizontal ? StudioTheme.Values.splitterThickness : root.width + implicitHeight: root.orientation === Qt.Horizontal ? root.height : StudioTheme.Values.splitterThickness + color: SplitHandle.pressed ? StudioTheme.Values.themeSliderHandleInteraction + : (SplitHandle.hovered ? StudioTheme.Values.themeSliderHandleHover + : "transparent") + } StudioControls.Menu { id: modelMenu @@ -118,44 +127,13 @@ ColumnLayout { } } - Row { - id: optionsToolbar - - Layout.preferredHeight: 40 - Layout.fillWidth: true - - leftPadding: root.__horizontalSpacing - StudioControls.AbstractButton { - id: pinButton - - style: root.buttonStyle - iconSize: StudioTheme.Values.bigFont - buttonIcon: pinButton.checked ? StudioTheme.Constants.pin : StudioTheme.Constants.unpin - checkable: true - checked: itemPane.headerDocked - onCheckedChanged: itemPane.headerDocked = pinButton.checked - } - - HelperWidgets.AbstractButton { - style: root.buttonStyle - buttonIcon: StudioTheme.Constants.textures_medium - tooltip: qsTr("Select preview environment.") - onClicked: envMenu.popup() - } - - HelperWidgets.AbstractButton { - style: root.buttonStyle - buttonIcon: StudioTheme.Constants.cube_medium - tooltip: qsTr("Select preview model.") - onClicked: modelMenu.popup() - } - } - Rectangle { id: previewRect - Layout.fillWidth: true - Layout.minimumWidth: 152 + SplitView.fillWidth: true + SplitView.minimumWidth: 152 + SplitView.preferredHeight: Math.min(root.width * 0.75, 400) + SplitView.minimumHeight: 150 implicitHeight: materialPreview.height clip: true @@ -165,7 +143,7 @@ ColumnLayout { id: materialPreview width: root.width - height: Math.min(materialPreview.width * 0.75, 400) + height: previewRect.height anchors.centerIn: parent fillMode: Image.PreserveAspectFit @@ -176,13 +154,66 @@ ColumnLayout { sourceSize.width: materialPreview.width sourceSize.height: materialPreview.height + + Rectangle { + id: toolbarRect + + radius: 10 + color: StudioTheme.Values.themeToolbarBackground + width: optionsToolbar.width + 2 * toolbarRect.radius + height: optionsToolbar.height + toolbarRect.radius + anchors.left: parent.left + anchors.leftMargin: -toolbarRect.radius + anchors.verticalCenter: parent.verticalCenter + + Column { + id: optionsToolbar + + spacing: root.__spacing + anchors.centerIn: parent + anchors.horizontalCenterOffset: root.__spacing + + HelperWidgets.AbstractButton { + id: pinButton + + style: buttonStyle + buttonIcon: pinButton.checked ? StudioTheme.Constants.pin : StudioTheme.Constants.unpin + checkable: true + checked: itemPane.headerDocked + onCheckedChanged: itemPane.headerDocked = pinButton.checked + } + + HelperWidgets.AbstractButton { + id: previewEnvMenuButton + + style: buttonStyle + buttonIcon: StudioTheme.Constants.textures_medium + tooltip: qsTr("Select preview environment.") + onClicked: envMenu.popup() + } + + HelperWidgets.AbstractButton { + id: previewModelMenuButton + + style: buttonStyle + buttonIcon: StudioTheme.Constants.cube_medium + tooltip: qsTr("Select preview model.") + onClicked: modelMenu.popup() + } + } + } } } HelperWidgets.Section { + id: nameSection + // Section with hidden header is used so properties are aligned with the other sections' properties hideHeader: true - Layout.fillWidth: true + SplitView.fillWidth: true + SplitView.preferredHeight: implicitHeight + SplitView.maximumHeight: implicitHeight + bottomPadding: StudioTheme.Values.sectionPadding * 2 collapsible: false HelperWidgets.SectionLayout { @@ -202,7 +233,7 @@ ColumnLayout { showExtendedFunctionButton: false // allow only alphanumeric characters, underscores, no space at start, and 1 space between words - validator: HelperWidgets.RegExpValidator { regExp: /^(\w+\s)*\w+$/ } + validator: RegularExpressionValidator { regularExpression: /^(\w+\s)*\w+$/ } } HelperWidgets.ExpandingSpacer {} @@ -211,9 +242,9 @@ ColumnLayout { HelperWidgets.PropertyLabel { text: qsTr("Type") } HelperWidgets.SecondColumnLayout { - HelperWidgets.Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth } + HelperWidgets.Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth } - HelperWidgets.ComboBox { + HelperWidgets.ComboBox { currentIndex: possibleTypeIndex model: possibleTypes showExtendedFunctionButton: false diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml index 309d815d7aa..1df75525c51 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml @@ -57,6 +57,7 @@ Rectangle { bottom: itemPane.bottom left: itemPane.left right: itemPane.right + topMargin: dockedHeaderLoader.active ? 2 : 0 } interactive: !Controller.contextMenuOpened @@ -74,6 +75,7 @@ Rectangle { active: !itemPane.headerDocked sourceComponent: itemPane.headerComponent + visible: active HeaderBackground{} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml index 69803cf3208..010b8b52d2e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml @@ -126,6 +126,7 @@ QtObject { property real controlGap: 5 // TODO different name property real splitterMargin: 5 + property real splitterThickness: 6 property real twoControlColumnGap: values.controlLabelGap + values.controlLabelWidth + values.controlGap diff --git a/src/plugins/qmldesigner/components/materialeditor/materialeditorimageprovider.cpp b/src/plugins/qmldesigner/components/materialeditor/materialeditorimageprovider.cpp index d88c4461fdc..24d7d583ab9 100644 --- a/src/plugins/qmldesigner/components/materialeditor/materialeditorimageprovider.cpp +++ b/src/plugins/qmldesigner/components/materialeditor/materialeditorimageprovider.cpp @@ -45,7 +45,10 @@ QPixmap MaterialEditorImageProvider::requestPixmap(const QString &id, pixmap = m_previewPixmap; setRequestedSize(requestedSize); } else { - pixmap = defaultPreview.scaled(requestedSize, Qt::KeepAspectRatio); + if (requestedSize.isEmpty()) + pixmap = defaultPreview; + else + pixmap = defaultPreview.scaled(requestedSize, Qt::KeepAspectRatio); } } else { qWarning() << __FUNCTION__ << "Unsupported image id:" << id; @@ -67,7 +70,7 @@ QPixmap MaterialEditorImageProvider::requestPixmap(const QString &id, */ void MaterialEditorImageProvider::setRequestedSize(const QSize &requestedSize) { - if (!requestedSize.isValid()) + if (requestedSize.isEmpty()) return; m_requestedSize = requestedSize;