From a46abe518f203aaba629d00f80cc87ae23b8f48a Mon Sep 17 00:00:00 2001 From: Ali Kianian Date: Mon, 6 Nov 2023 10:35:21 +0200 Subject: [PATCH] QmlDesigner: Polish the user interface Task-number: QDS-10621 Change-Id: I6d045f95d18778928ce10efa367460f49f4ddfc4 Reviewed-by: Miikka Heikkinen Reviewed-by: Mahmoud Badri Reviewed-by: Qt CI Patch Build Bot --- .../CollectionDetailsToolbar.qml | 8 --- .../CollectionDetailsView.qml | 54 +++++++++++-------- .../CollectionItem.qml | 4 +- .../CollectionView.qml | 10 +++- .../EditPropertyDialog.qml | 6 ++- 5 files changed, 47 insertions(+), 35 deletions(-) diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml index 7930a4a444c..8f8a0b24416 100644 --- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml +++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml @@ -160,14 +160,6 @@ Item { } } - Rectangle { - anchors.fill: parent - z: -1 - color: "grey" - opacity: 0.6 - radius: 5 - } - component IconButton: HelperWidgets.IconButton { height: root.iconHeight width: root.iconHeight diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml index 9bd6d23f63c..26ba2fe87a2 100644 --- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml +++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml @@ -18,7 +18,7 @@ Rectangle { implicitWidth: 300 implicitHeight: 400 - color: StudioTheme.Values.themeBackgroundColorAlternate + color: StudioTheme.Values.themeControlBackground ColumnLayout { id: topRow @@ -46,12 +46,6 @@ Rectangle { text: root.model.collectionName font.pixelSize: StudioTheme.Values.mediumIconFont elide: Text.ElideRight - - Rectangle { - anchors.fill: parent - z: parent.z - 1 - color: StudioTheme.Values.themeBackgroundColorNormal - } } Item { // spacer @@ -64,6 +58,7 @@ Rectangle { model: root.model backend: root.backend Layout.fillWidth: true + Layout.minimumWidth: implicitWidth } Item { // spacer @@ -78,12 +73,13 @@ Rectangle { Layout.fillWidth: true Layout.fillHeight: true + Layout.maximumWidth: parent.width Rectangle { clip: true visible: !tableView.model.isEmpty - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline + color: StudioTheme.Values.themeControlBackgroundInteraction + border.color: StudioTheme.Values.themeControlBackgroundInteraction border.width: 2 Layout.preferredWidth: rowIdView.width @@ -113,7 +109,14 @@ Rectangle { clip: true delegate: HeaderDelegate { + id: horizontalHeaderItem + selectedItem: tableView.model.selectedColumn + color: StudioTheme.Values.themeControlBackgroundInteraction + + function getGlobalBottomLeft() { + return mapToGlobal(0, horizontalHeaderItem.height) + } MouseArea { anchors.fill: parent @@ -123,7 +126,7 @@ Rectangle { tableView.model.selectColumn(index) if (mouse.button === Qt.RightButton) - headerMenu.popIndex(index) + headerMenu.popIndex(index, horizontalHeaderItem.getGlobalBottomLeft()) } } } @@ -132,10 +135,12 @@ Rectangle { id: headerMenu property int clickedHeader: -1 + property point initialPosition - function popIndex(clickedIndex) + function popIndex(clickedIndex, clickedRect) { headerMenu.clickedHeader = clickedIndex + headerMenu.initialPosition = clickedRect headerMenu.popup() } @@ -145,7 +150,7 @@ Rectangle { StudioControls.MenuItem { text: qsTr("Edit") - onTriggered: editProperyDialog.editProperty(headerMenu.clickedHeader) + onTriggered: editProperyDialog.editProperty(headerMenu.clickedHeader, headerMenu.initialPosition) } StudioControls.MenuItem { @@ -177,6 +182,7 @@ Rectangle { delegate: HeaderDelegate { selectedItem: tableView.model.selectedRow + color: StudioTheme.Values.themeControlBackgroundHover MouseArea { anchors.fill: parent @@ -197,13 +203,13 @@ Rectangle { Layout.preferredHeight: tableView.contentHeight Layout.minimumWidth: 10 Layout.minimumHeight: 10 + Layout.maximumWidth: root.width delegate: Rectangle { id: itemCell implicitWidth: 100 implicitHeight: itemText.height border.width: 1 - border.color: StudioTheme.Values.themeControlOutline Text { id: itemText @@ -235,11 +241,12 @@ Rectangle { PropertyChanges { target: itemCell color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlBackgroundInteraction } PropertyChanges { target: itemText - color: StudioTheme.Values.themeTextColor + color: StudioTheme.Values.themePlaceholderTextColorInteraction } }, State { @@ -249,6 +256,7 @@ Rectangle { PropertyChanges { target: itemCell color: StudioTheme.Values.themeControlBackgroundInteraction + border.color: StudioTheme.Values.themeControlBackground } PropertyChanges { @@ -322,10 +330,9 @@ Rectangle { property alias horizontalAlignment: headerText.horizontalAlignment property alias verticalAlignment: headerText.verticalAlignment - implicitWidth: headerText.width - implicitHeight: headerText.height - border.width: 2 - border.color: StudioTheme.Values.themeControlOutline + implicitWidth: headerText.implicitWidth + implicitHeight: headerText.implicitHeight + border.width: 1 clip: true Text { @@ -337,9 +344,10 @@ Rectangle { rightPadding: 5 text: display font: headerTextMetrics.font + color: StudioTheme.Values.themeTextColor horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - anchors.centerIn: parent + anchors.fill: parent elide: Text.ElideRight } @@ -349,12 +357,12 @@ Rectangle { when: index !== selectedItem PropertyChanges { target: headerItem - color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeControlBackgroundInteraction } PropertyChanges { target: headerText - color: StudioTheme.Values.themeIdleGreen + font.bold: false } }, State { @@ -363,12 +371,12 @@ Rectangle { PropertyChanges { target: headerItem - color: StudioTheme.Values.themeControlBackgroundInteraction + border.color: StudioTheme.Values.themeControlBackground } PropertyChanges { target: headerText - color: StudioTheme.Values.themeRunningGreen + font.bold: true } } ] diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml index 5ce42d0a901..c7a9a105f90 100644 --- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml +++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml @@ -281,12 +281,12 @@ Item { PropertyChanges { target: innerRect opacity: 1 - color: StudioTheme.Values.themeControlBackgroundInteraction + color: StudioTheme.Values.themeIconColorSelected } PropertyChanges { target: root - textColor: StudioTheme.Values.themeIconColorSelected + textColor: StudioTheme.Values.themeTextSelectedTextColor } } ] diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml index 4903913b7c0..e58e5d92541 100644 --- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml +++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml @@ -58,7 +58,7 @@ Item { readonly property bool isHorizontal: width >= 500 anchors.fill: parent - columns: isHorizontal ? 2 : 1 + columns: isHorizontal ? 3 : 1 ColumnLayout { id: collectionsSideBar @@ -148,6 +148,14 @@ Item { } } + Rectangle { // Splitter + Layout.fillWidth: !grid.isHorizontal + Layout.fillHeight: grid.isHorizontal + Layout.minimumWidth: 2 + Layout.minimumHeight: 2 + color: "black" + } + CollectionDetailsView { model: root.collectionDetailsModel backend: root.model diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/EditPropertyDialog.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/EditPropertyDialog.qml index 173e1a00b61..15a6f20708d 100644 --- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/EditPropertyDialog.qml +++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/EditPropertyDialog.qml @@ -14,7 +14,7 @@ StudioControls.Dialog { title: qsTr("Edit Property") - function editProperty(index) { + function editProperty(index, initialPosition) { root.__propertyIndex = index if (root.__propertyIndex < 0) @@ -30,6 +30,10 @@ StudioControls.Dialog { forceChangeType.checked = false + let newPoint = mapFromGlobal(initialPosition.x, initialPosition.y) + x = newPoint.x + y = newPoint.y + root.open() }