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

QmlDesigner: Cleanup ConnectionsEditor list views

Browse Source 
Change-Id: Ib8f51d9e5640c768e6d6e815fd6c494e46743b65
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Henning Gruendl
2023-09-01 10:08:03 +02:00
committed by Henning Gründl
parent cec9e6493e
commit 1710254b98
4 changed files with 117 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml
View File

@@ -9,9 +9,10 @@ import StudioTheme as StudioTheme
import ConnectionsEditorEditorBackend import ConnectionsEditorEditorBackend
ListView { ListView {
id: listView id: root
width: 606
height: 160 property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle
clip: true clip: true
interactive: true interactive: true
highlightMoveDuration: 0 highlightMoveDuration: 0
@@ -21,83 +22,92 @@ ListView {
dialog.hide() dialog.hide()
} }
property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle property int modelCurrentIndex: root.model.currentIndex ?? 0
property int modelCurrentIndex: listView.model.currentIndex ?? 0
// Something weird with currentIndex happens when items are removed added. // Something weird with currentIndex happens when items are removed added.
// listView.model.currentIndex contains the persistent index. // listView.model.currentIndex contains the persistent index.
onModelCurrentIndexChanged: { onModelCurrentIndexChanged: {
listView.currentIndex = listView.model.currentIndex root.currentIndex = root.model.currentIndex
} }
onCurrentIndexChanged: { onCurrentIndexChanged: {
listView.currentIndex = listView.model.currentIndex root.currentIndex = root.model.currentIndex
dialog.backend.currentRow = listView.currentIndex dialog.backend.currentRow = root.currentIndex
} }
// Number of columns
readonly property int numColumns: 4
// Proper row width calculation
readonly property int rowSpacing: StudioTheme.Values.toolbarHorizontalMargin readonly property int rowSpacing: StudioTheme.Values.toolbarHorizontalMargin
readonly property int rowSpace: listView.width - (listView.rowSpacing * 4) readonly property int rowSpace: root.width - (root.rowSpacing * (root.numColumns + 1))
- listView.style.squareControlSize.width - root.style.squareControlSize.width
property int rowWidth: listView.rowSpace / 4 property int rowWidth: root.rowSpace / root.numColumns
property int rowRest: listView.rowSpace % 4 property int rowRest: root.rowSpace % root.numColumns
data: [ data: [
BindingsDialog { BindingsDialog {
id: dialog id: dialog
visible: false visible: false
backend: listView.model.delegate backend: root.model.delegate
} }
] ]
delegate: Rectangle {
delegate: Rectangle {
id: itemDelegate id: itemDelegate
required property int index
required property string target
required property string targetProperty
required property string source
required property string sourceProperty
width: ListView.view.width width: ListView.view.width
height: listView.style.squareControlSize.height height: root.style.squareControlSize.height
color: mouseArea.containsMouse ? color: mouseArea.containsMouse ?
itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover itemDelegate.ListView.isCurrentItem ? root.style.interactionHover
: listView.style.background.hover : root.style.background.hover
: "transparent" : "transparent"
MouseArea { MouseArea {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
hoverEnabled: true
onClicked: { onClicked: {
listView.model.currentIndex = index root.model.currentIndex = itemDelegate.index
listView.currentIndex = index root.currentIndex = itemDelegate.index
dialog.backend.currentRow = index dialog.backend.currentRow = itemDelegate.index
dialog.popup(mouseArea) dialog.popup(mouseArea)
} }
property int currentIndex: listView.currentIndex
} }
Row { Row {
id: row id: row
height: itemDelegate.height property color textColor: itemDelegate.ListView.isCurrentItem ? root.style.text.selectedText
spacing: listView.rowSpacing : root.style.icon.idle
property color textColor: itemDelegate.ListView.isCurrentItem ? listView.style.text.selectedText height: itemDelegate.height
: listView.style.icon.idle spacing: root.rowSpacing
Text { Text {
width: listView.rowWidth + listView.rowRest width: root.rowWidth + root.rowRest
height: itemDelegate.height height: itemDelegate.height
color: row.textColor color: row.textColor
text: target ?? "" text: itemDelegate.target ?? ""
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.bold: false font.bold: false
elide: Text.ElideMiddle elide: Text.ElideMiddle
leftPadding: listView.rowSpacing leftPadding: root.rowSpacing
} }
Text { Text {
width: listView.rowWidth width: root.rowWidth
height: itemDelegate.height height: itemDelegate.height
text: targetProperty ?? "" text: itemDelegate.targetProperty ?? ""
color: row.textColor color: row.textColor
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.bold: false font.bold: false
@@ -105,9 +115,9 @@ ListView {
} }
Text { Text {
width: listView.rowWidth width: root.rowWidth
height: itemDelegate.height height: itemDelegate.height
text: source ?? "" text: itemDelegate.source ?? ""
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: row.textColor color: row.textColor
font.bold: false font.bold: false
@@ -115,9 +125,9 @@ ListView {
} }
Text { Text {
width: listView.rowWidth width: root.rowWidth
height: itemDelegate.height height: itemDelegate.height
text: sourceProperty ?? "" text: itemDelegate.sourceProperty ?? ""
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: row.textColor color: row.textColor
font.bold: false font.bold: false
@@ -125,12 +135,12 @@ ListView {
} }
Rectangle { Rectangle {
width: listView.style.squareControlSize.width width: root.style.squareControlSize.width
height: listView.style.squareControlSize.height height: root.style.squareControlSize.height
color: toolTipArea.containsMouse ? color: toolTipArea.containsMouse ?
itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover itemDelegate.ListView.isCurrentItem ? root.style.interactionHover
: listView.style.background.hover : root.style.background.hover
: "transparent" : "transparent"
Text { Text {
@@ -138,7 +148,7 @@ ListView {
text: StudioTheme.Constants.remove_medium text: StudioTheme.Constants.remove_medium
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: listView.style.baseIconFontSize font.pixelSize: root.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@@ -151,15 +161,14 @@ ListView {
id: toolTipArea id: toolTipArea
tooltip: qsTr("This is a test.") tooltip: qsTr("This is a test.")
anchors.fill: parent anchors.fill: parent
onClicked: listView.model.remove(index) onClicked: root.model.remove(itemDelegate.index)
} }
} }
} }
} }
highlight: Rectangle { highlight: Rectangle {
color: listView.style.interaction color: root.style.interaction
width: 600 width: 600
} }
} }

2
share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml
View File

@@ -76,7 +76,7 @@ Column {
} }
StatementEditor { StatementEditor {
actionType: action.currentValue actionType: action.currentValue ?? ConnectionModelStatementDelegate.Custom
id: container id: container
horizontalSpacing: root.horizontalSpacing horizontalSpacing: root.horizontalSpacing
columnWidth: root.columnWidth columnWidth: root.columnWidth

25
share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml
View File

@@ -41,6 +41,15 @@ ListView {
dialog.backend.currentRow = root.currentIndex dialog.backend.currentRow = root.currentIndex
} }
// Number of columns
readonly property int numColumns: 3
// Proper row width calculation
readonly property int rowSpacing: StudioTheme.Values.toolbarHorizontalMargin
readonly property int rowSpace: root.width - (root.rowSpacing * (root.numColumns + 1))
- root.style.squareControlSize.width
property int rowWidth: root.rowSpace / root.numColumns
property int rowRest: root.rowSpace % root.numColumns
data: [ data: [
ConnectionsDialog { ConnectionsDialog {
id: dialog id: dialog
@@ -49,13 +58,6 @@ ListView {
} }
] ]
// Proper row width calculation
readonly property int rowSpacing: StudioTheme.Values.toolbarHorizontalMargin
readonly property int rowSpace: root.width - (root.rowSpacing * 4)
- root.style.squareControlSize.width
property int rowWidth: root.rowSpace / 3
property int rowRest: root.rowSpace % 3
delegate: Rectangle { delegate: Rectangle {
id: itemDelegate id: itemDelegate
@@ -79,10 +81,9 @@ ListView {
hoverEnabled: true hoverEnabled: true
onClicked: { onClicked: {
root.model.currentIndex = index root.model.currentIndex = itemDelegate.index
root.currentIndex = index root.currentIndex = itemDelegate.index
dialog.backend.currentRow = index dialog.backend.currentRow = itemDelegate.index
dialog.popup(mouseArea) dialog.popup(mouseArea)
} }
} }
@@ -154,7 +155,7 @@ ListView {
id: toolTipArea id: toolTipArea
tooltip: qsTr("This is a test.") tooltip: qsTr("This is a test.")
anchors.fill: parent anchors.fill: parent
onClicked: root.model.remove(index) onClicked: root.model.remove(itemDelegate.index)
} }
} }
} }

90
share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml
View File

@@ -9,9 +9,10 @@ import StudioTheme as StudioTheme
import ConnectionsEditorEditorBackend import ConnectionsEditorEditorBackend
ListView { ListView {
id: listView id: root
width: 606
height: 160 property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle
clip: true clip: true
interactive: true interactive: true
highlightMoveDuration: 0 highlightMoveDuration: 0
@@ -21,57 +22,66 @@ ListView {
dialog.hide() dialog.hide()
} }
property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle property int modelCurrentIndex: root.model.currentIndex ?? 0
property int modelCurrentIndex: listView.model.currentIndex ?? 0
// Something weird with currentIndex happens when items are removed added. // Something weird with currentIndex happens when items are removed added.
// listView.model.currentIndex contains the persistent index. // listView.model.currentIndex contains the persistent index.
onModelCurrentIndexChanged: { onModelCurrentIndexChanged: {
listView.currentIndex = listView.model.currentIndex root.currentIndex = root.model.currentIndex
} }
onCurrentIndexChanged: { onCurrentIndexChanged: {
listView.currentIndex = listView.model.currentIndex root.currentIndex = root.model.currentIndex
dialog.backend.currentRow = listView.currentIndex dialog.backend.currentRow = root.currentIndex
} }
// Number of columns
readonly property int numColumns: 4
// Proper row width calculation
readonly property int rowSpacing: StudioTheme.Values.toolbarHorizontalMargin readonly property int rowSpacing: StudioTheme.Values.toolbarHorizontalMargin
readonly property int rowSpace: listView.width - (listView.rowSpacing * 4) readonly property int rowSpace: root.width - (root.rowSpacing * (root.numColumns + 1))
- listView.style.squareControlSize.width - root.style.squareControlSize.width
property int rowWidth: listView.rowSpace / 4 property int rowWidth: root.rowSpace / root.numColumns
property int rowRest: listView.rowSpace % 4 property int rowRest: root.rowSpace % root.numColumns
data: [ data: [
PropertiesDialog { PropertiesDialog {
id: dialog id: dialog
visible: false visible: false
backend: listView.model.delegate backend: root.model.delegate
} }
] ]
delegate: Rectangle { delegate: Rectangle {
id: itemDelegate id: itemDelegate
required property int index
required property string target
required property string name
required property string type
required property string value
width: ListView.view.width width: ListView.view.width
height: listView.style.squareControlSize.height height: root.style.squareControlSize.height
color: mouseArea.containsMouse ? color: mouseArea.containsMouse ?
itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover itemDelegate.ListView.isCurrentItem ? root.style.interactionHover
: listView.style.background.hover : root.style.background.hover
: "transparent" : "transparent"
MouseArea { MouseArea {
id: mouseArea id: mouseArea
anchors.fill: parent anchors.fill: parent
property int currentIndex: listView.currentIndex property int currentIndex: root.currentIndex
Connections { Connections {
target: mouseArea target: mouseArea
function onClicked() { function onClicked() {
listView.model.currentIndex = index root.model.currentIndex = itemDelegate.index
listView.currentIndex = index root.currentIndex = itemDelegate.index
dialog.backend.currentRow = index dialog.backend.currentRow = itemDelegate.index
dialog.popup(mouseArea) dialog.popup(mouseArea)
} }
} }
@@ -81,58 +91,58 @@ ListView {
id: row id: row
height: itemDelegate.height height: itemDelegate.height
spacing: listView.rowSpacing spacing: root.rowSpacing
property color textColor: itemDelegate.ListView.isCurrentItem ? listView.style.text.selectedText property color textColor: itemDelegate.ListView.isCurrentItem ? root.style.text.selectedText
: listView.style.icon.idle : root.style.icon.idle
Text { Text {
width: listView.rowWidth + listView.rowRest width: root.rowWidth + root.rowRest
height: itemDelegate.height height: itemDelegate.height
color: row.textColor color: row.textColor
text: target ?? "" text: itemDelegate.target ?? ""
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.bold: false font.bold: false
elide: Text.ElideMiddle elide: Text.ElideMiddle
leftPadding: listView.rowSpacing leftPadding: root.rowSpacing
} }
Text { Text {
width: listView.rowWidth width: root.rowWidth
height: itemDelegate.height height: itemDelegate.height
color: row.textColor color: row.textColor
text: name ?? "" text: itemDelegate.name ?? ""
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.bold: false font.bold: false
elide: Text.ElideMiddle elide: Text.ElideMiddle
} }
Text { Text {
width: listView.rowWidth + listView.rowRest width: root.rowWidth + root.rowRest
height: itemDelegate.height height: itemDelegate.height
color: row.textColor color: row.textColor
text: type ?? "" text: itemDelegate.type ?? ""
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.bold: false font.bold: false
elide: Text.ElideMiddle elide: Text.ElideMiddle
} }
Text { Text {
width: listView.rowWidth + listView.rowRest width: root.rowWidth + root.rowRest
height: itemDelegate.height height: itemDelegate.height
color: row.textColor color: row.textColor
text: value ?? "" text: itemDelegate.value ?? ""
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.bold: false font.bold: false
elide: Text.ElideMiddle elide: Text.ElideMiddle
} }
Rectangle { Rectangle {
width: listView.style.squareControlSize.width width: root.style.squareControlSize.width
height: listView.style.squareControlSize.height height: root.style.squareControlSize.height
color: toolTipArea.containsMouse ? color: toolTipArea.containsMouse ?
itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover itemDelegate.ListView.isCurrentItem ? root.style.interactionHover
: listView.style.background.hover : root.style.background.hover
: "transparent" : "transparent"
Text { Text {
@@ -140,7 +150,7 @@ ListView {
text: StudioTheme.Constants.remove_medium text: StudioTheme.Constants.remove_medium
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: listView.style.baseIconFontSize font.pixelSize: root.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@@ -153,7 +163,7 @@ ListView {
id: toolTipArea id: toolTipArea
tooltip: qsTr("This is a test.") tooltip: qsTr("This is a test.")
anchors.fill: parent anchors.fill: parent
onClicked: listView.model.remove(index) onClicked: root.model.remove(itemDelegate.index)
} }
} }
@@ -161,7 +171,7 @@ ListView {
} }
highlight: Rectangle { highlight: Rectangle {
color: listView.style.interaction color: root.style.interaction
width: 600 width: 600
} }
} }