From 65dd22b703ebe83e3f1fd69dc3feb1fb27b6c93e Mon Sep 17 00:00:00 2001 From: Ali Kianian Date: Mon, 31 Mar 2025 13:51:42 +0300 Subject: [PATCH] PropertyEditor: Rearrange the layout of PropertyEditor controls Arranged items: * Toolbar * Lock Button * Search bar * State Section Task-number: QDS-15090 Change-Id: I5f07fb3b28f5ea88193f58d78ebbd8a370fe2bd6 Reviewed-by: Mahmoud Badri --- .../QtQuick3D/MaterialPane.qml | 12 +- .../HelperWidgets/PropertyEditorPane.qml | 114 +++++++++--------- .../HelperWidgets/PropertyEditorToolBar.qml | 11 ++ 3 files changed, 71 insertions(+), 66 deletions(-) diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick3D/MaterialPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick3D/MaterialPane.qml index db814b1bc7a..762018976db 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick3D/MaterialPane.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick3D/MaterialPane.qml @@ -24,12 +24,6 @@ Item { Controller.closeContextMenu() } - Material.Toolbar { - id: toolbar - - width: parent.width - } - Settings { id: settings @@ -42,9 +36,7 @@ Item { readonly property bool isHorizontal: splitView.orientation == Qt.Horizontal - anchors.top: toolbar.bottom - anchors.bottom: parent.bottom - width: parent.width + anchors.fill: parent orientation: splitView.width > 1000 ? Qt.Horizontal : Qt.Vertical clip: true @@ -82,6 +74,8 @@ Item { showImage: !hasMultiSelection && !splitView.isHorizontal } + toolbarComponent: Material.Toolbar {} + DynamicPropertiesSection { propertiesModel: PropertyEditorDynamicPropertiesModel {} visible: !hasMultiSelection diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml index e0907551642..cb0d9eb3344 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorPane.qml @@ -24,6 +24,7 @@ Rectangle { readonly property Item headerItem: headerDocked ? dockedHeaderLoader.item : undockedHeaderLoader.item property Component headerComponent: null + property alias toolbarComponent: toolbar.customToolbar // Called from C++ to close context menu on focus out function closeContextMenu() { @@ -44,10 +45,19 @@ Rectangle { z: parent.z + 1 } + PropertyEditorToolBar { + id: toolbar + + anchors.top: propertySearchBar.bottom + width: parent.width + + onToolBarAction: action => handleToolBarAction(action) + } + Loader { id: dockedHeaderLoader - anchors.top: propertySearchBar.bottom + anchors.top: toolbar.bottom z: parent.z + 1 height: item ? item.implicitHeight : 0 width: parent.width @@ -58,75 +68,21 @@ Rectangle { HeaderBackground{} } - PropertyEditorToolBar { - id: toolbar - - anchors.top: dockedHeaderLoader.bottom - width: parent.width - - onToolBarAction: action => handleToolBarAction(action) - } - MouseArea { anchors.fill: mainScrollView onClicked: itemPane.forceActiveFocus() } - Rectangle { - id: stateSection - anchors.top: toolbar.bottom - width: itemPane.width - height: StudioTheme.Values.height + StudioTheme.Values.controlGap * 2 - color: StudioTheme.Values.themePanelBackground - z: isBaseState ? -1: 10 - SectionLayout { - y: StudioTheme.Values.controlGap - x: StudioTheme.Values.controlGap - PropertyLabel { - text: qsTr("Current State") - tooltip: tooltipItem.tooltip - } - - SecondColumnLayout { - - Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth } - - Item { - - implicitWidth: StudioTheme.Values.singleControlColumnWidth - height: StudioTheme.Values.height - - HelperWidgets.Label { - anchors.fill: parent - anchors.leftMargin: StudioTheme.Values.inputHorizontalPadding - anchors.topMargin: StudioTheme.Values.typeLabelVerticalShift - text: stateName - color: StudioTheme.Values.themeInteraction - } - - ToolTipArea { - id: tooltipItem - anchors.fill: parent - tooltip: qsTr("The current state of the States View.") - } - - } - - ExpandingSpacer {} - } - } - } - HelperWidgets.ScrollView { id: mainScrollView clip: true anchors { - top: toolbar.bottom + top: dockedHeaderLoader.bottom bottom: itemPane.bottom left: itemPane.left right: itemPane.right - topMargin: dockedHeaderLoader.active ? 2 : 0 + isBaseState ? 0 : stateSection.height + topMargin: dockedHeaderLoader.active ? 2 : 0 } interactive: !Controller.contextMenuOpened @@ -148,6 +104,17 @@ Rectangle { HeaderBackground{} } + Loader { + Layout.fillWidth: true + Layout.leftMargin: StudioTheme.Values.sectionPadding + Layout.preferredHeight: item ? item.implicitHeight : 0 + + active: !isBaseState + sourceComponent: StatesSection{} + + visible: active + } + Label { Layout.fillWidth: true Layout.leftMargin: 10 @@ -179,4 +146,37 @@ Rectangle { border.color: StudioTheme.Values.themePanelBackground border.width: StudioTheme.Values.border } + + component StatesSection: SectionLayout { + PropertyLabel { + text: qsTr("Current State") + tooltip: tooltipItem.tooltip + } + + SecondColumnLayout { + + Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth } + + Item { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + height: StudioTheme.Values.height + + HelperWidgets.Label { + anchors.fill: parent + text: stateName + color: StudioTheme.Values.themeInteraction + verticalAlignment: Text.AlignVCenter + } + + ToolTipArea { + id: tooltipItem + + anchors.fill: parent + tooltip: qsTr("The current state of the States View.") + } + } + + ExpandingSpacer {} + } + } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorToolBar.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorToolBar.qml index bd8abf16d49..9b1cff0c675 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorToolBar.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyEditorToolBar.qml @@ -9,11 +9,22 @@ import PropertyToolBarAction Rectangle { id: root + property alias customToolbar: customToolbarLoader.sourceComponent + signal toolBarAction(int action) color: StudioTheme.Values.themeToolbarBackground height: StudioTheme.Values.toolbarHeight + Loader { + id: customToolbarLoader + + anchors.left: parent.left + anchors.right: lockButton.left + anchors.top: parent.top + anchors.bottom: parent.bottom + } + HelperWidgets.AbstractButton { id: lockButton