feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Polish the user interface

Browse Source 
Task-number: QDS-10621
Change-Id: I6d045f95d18778928ce10efa367460f49f4ddfc4
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
This commit is contained in:
Ali Kianian
2023-11-06 10:35:21 +02:00
parent 0461af4b90
commit a46abe518f
5 changed files with 47 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml
View File

@@ -160,14 +160,6 @@ Item {
} }
} }
Rectangle {
anchors.fill: parent
z: -1
color: "grey"
opacity: 0.6
radius: 5
}
component IconButton: HelperWidgets.IconButton { component IconButton: HelperWidgets.IconButton {
height: root.iconHeight height: root.iconHeight
width: root.iconHeight width: root.iconHeight

54
share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
View File

@@ -18,7 +18,7 @@ Rectangle {
implicitWidth: 300 implicitWidth: 300
implicitHeight: 400 implicitHeight: 400
color: StudioTheme.Values.themeBackgroundColorAlternate color: StudioTheme.Values.themeControlBackground
ColumnLayout { ColumnLayout {
id: topRow id: topRow
@@ -46,12 +46,6 @@ Rectangle {
text: root.model.collectionName text: root.model.collectionName
font.pixelSize: StudioTheme.Values.mediumIconFont font.pixelSize: StudioTheme.Values.mediumIconFont
elide: Text.ElideRight elide: Text.ElideRight
Rectangle {
anchors.fill: parent
z: parent.z - 1
color: StudioTheme.Values.themeBackgroundColorNormal
}
} }
Item { // spacer Item { // spacer
@@ -64,6 +58,7 @@ Rectangle {
model: root.model model: root.model
backend: root.backend backend: root.backend
Layout.fillWidth: true Layout.fillWidth: true
Layout.minimumWidth: implicitWidth
} }
Item { // spacer Item { // spacer
@@ -78,12 +73,13 @@ Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
Layout.maximumWidth: parent.width
Rectangle { Rectangle {
clip: true clip: true
visible: !tableView.model.isEmpty visible: !tableView.model.isEmpty
color: StudioTheme.Values.themeControlBackground color: StudioTheme.Values.themeControlBackgroundInteraction
border.color: StudioTheme.Values.themeControlOutline border.color: StudioTheme.Values.themeControlBackgroundInteraction
border.width: 2 border.width: 2
Layout.preferredWidth: rowIdView.width Layout.preferredWidth: rowIdView.width
@@ -113,7 +109,14 @@ Rectangle {
clip: true clip: true
delegate: HeaderDelegate { delegate: HeaderDelegate {
id: horizontalHeaderItem
selectedItem: tableView.model.selectedColumn selectedItem: tableView.model.selectedColumn
color: StudioTheme.Values.themeControlBackgroundInteraction
function getGlobalBottomLeft() {
return mapToGlobal(0, horizontalHeaderItem.height)
}
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@@ -123,7 +126,7 @@ Rectangle {
tableView.model.selectColumn(index) tableView.model.selectColumn(index)
if (mouse.button === Qt.RightButton) if (mouse.button === Qt.RightButton)
headerMenu.popIndex(index) headerMenu.popIndex(index, horizontalHeaderItem.getGlobalBottomLeft())
} }
} }
} }
@@ -132,10 +135,12 @@ Rectangle {
id: headerMenu id: headerMenu
property int clickedHeader: -1 property int clickedHeader: -1
property point initialPosition
function popIndex(clickedIndex) function popIndex(clickedIndex, clickedRect)
{ {
headerMenu.clickedHeader = clickedIndex headerMenu.clickedHeader = clickedIndex
headerMenu.initialPosition = clickedRect
headerMenu.popup() headerMenu.popup()
} }
@@ -145,7 +150,7 @@ Rectangle {
StudioControls.MenuItem { StudioControls.MenuItem {
text: qsTr("Edit") text: qsTr("Edit")
onTriggered: editProperyDialog.editProperty(headerMenu.clickedHeader) onTriggered: editProperyDialog.editProperty(headerMenu.clickedHeader, headerMenu.initialPosition)
} }
StudioControls.MenuItem { StudioControls.MenuItem {
@@ -177,6 +182,7 @@ Rectangle {
delegate: HeaderDelegate { delegate: HeaderDelegate {
selectedItem: tableView.model.selectedRow selectedItem: tableView.model.selectedRow
color: StudioTheme.Values.themeControlBackgroundHover
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@@ -197,13 +203,13 @@ Rectangle {
Layout.preferredHeight: tableView.contentHeight Layout.preferredHeight: tableView.contentHeight
Layout.minimumWidth: 10 Layout.minimumWidth: 10
Layout.minimumHeight: 10 Layout.minimumHeight: 10
Layout.maximumWidth: root.width
delegate: Rectangle { delegate: Rectangle {
id: itemCell id: itemCell
implicitWidth: 100 implicitWidth: 100
implicitHeight: itemText.height implicitHeight: itemText.height
border.width: 1 border.width: 1
border.color: StudioTheme.Values.themeControlOutline
Text { Text {
id: itemText id: itemText
@@ -235,11 +241,12 @@ Rectangle {
PropertyChanges { PropertyChanges {
target: itemCell target: itemCell
color: StudioTheme.Values.themeControlBackground color: StudioTheme.Values.themeControlBackground
border.color: StudioTheme.Values.themeControlBackgroundInteraction
} }
PropertyChanges { PropertyChanges {
target: itemText target: itemText
color: StudioTheme.Values.themeTextColor color: StudioTheme.Values.themePlaceholderTextColorInteraction
} }
}, },
State { State {
@@ -249,6 +256,7 @@ Rectangle {
PropertyChanges { PropertyChanges {
target: itemCell target: itemCell
color: StudioTheme.Values.themeControlBackgroundInteraction color: StudioTheme.Values.themeControlBackgroundInteraction
border.color: StudioTheme.Values.themeControlBackground
} }
PropertyChanges { PropertyChanges {
@@ -322,10 +330,9 @@ Rectangle {
property alias horizontalAlignment: headerText.horizontalAlignment property alias horizontalAlignment: headerText.horizontalAlignment
property alias verticalAlignment: headerText.verticalAlignment property alias verticalAlignment: headerText.verticalAlignment
implicitWidth: headerText.width implicitWidth: headerText.implicitWidth
implicitHeight: headerText.height implicitHeight: headerText.implicitHeight
border.width: 2 border.width: 1
border.color: StudioTheme.Values.themeControlOutline
clip: true clip: true
Text { Text {
@@ -337,9 +344,10 @@ Rectangle {
rightPadding: 5 rightPadding: 5
text: display text: display
font: headerTextMetrics.font font: headerTextMetrics.font
color: StudioTheme.Values.themeTextColor
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.centerIn: parent anchors.fill: parent
elide: Text.ElideRight elide: Text.ElideRight
} }
@@ -349,12 +357,12 @@ Rectangle {
when: index !== selectedItem when: index !== selectedItem
PropertyChanges { PropertyChanges {
target: headerItem target: headerItem
color: StudioTheme.Values.themeControlBackground border.color: StudioTheme.Values.themeControlBackgroundInteraction
} }
PropertyChanges { PropertyChanges {
target: headerText target: headerText
color: StudioTheme.Values.themeIdleGreen font.bold: false
} }
}, },
State { State {
@@ -363,12 +371,12 @@ Rectangle {
PropertyChanges { PropertyChanges {
target: headerItem target: headerItem
color: StudioTheme.Values.themeControlBackgroundInteraction border.color: StudioTheme.Values.themeControlBackground
} }
PropertyChanges { PropertyChanges {
target: headerText target: headerText
color: StudioTheme.Values.themeRunningGreen font.bold: true
} }
} }
] ]

4
share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml
View File

@@ -281,12 +281,12 @@ Item {
PropertyChanges { PropertyChanges {
target: innerRect target: innerRect
opacity: 1 opacity: 1
color: StudioTheme.Values.themeControlBackgroundInteraction color: StudioTheme.Values.themeIconColorSelected
} }
PropertyChanges { PropertyChanges {
target: root target: root
textColor: StudioTheme.Values.themeIconColorSelected textColor: StudioTheme.Values.themeTextSelectedTextColor
} }
} }
] ]

10
share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml
View File

@@ -58,7 +58,7 @@ Item {
readonly property bool isHorizontal: width >= 500 readonly property bool isHorizontal: width >= 500
anchors.fill: parent anchors.fill: parent
columns: isHorizontal ? 2 : 1 columns: isHorizontal ? 3 : 1
ColumnLayout { ColumnLayout {
id: collectionsSideBar 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 { CollectionDetailsView {
model: root.collectionDetailsModel model: root.collectionDetailsModel
backend: root.model backend: root.model

6
share/qtcreator/qmldesigner/collectionEditorQmlSource/EditPropertyDialog.qml
View File

@@ -14,7 +14,7 @@ StudioControls.Dialog {
title: qsTr("Edit Property") title: qsTr("Edit Property")
function editProperty(index) { function editProperty(index, initialPosition) {
root.__propertyIndex = index root.__propertyIndex = index
if (root.__propertyIndex < 0) if (root.__propertyIndex < 0)
@@ -30,6 +30,10 @@ StudioControls.Dialog {
forceChangeType.checked = false forceChangeType.checked = false
let newPoint = mapFromGlobal(initialPosition.x, initialPosition.y)
x = newPoint.x
y = newPoint.y
root.open() root.open()
} }