diff --git a/share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml b/share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml index e260c7fe606..68ace4b0ecf 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml @@ -9,9 +9,10 @@ import StudioTheme as StudioTheme import ConnectionsEditorEditorBackend ListView { - id: listView - width: 606 - height: 160 + id: root + + property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle + clip: true interactive: true highlightMoveDuration: 0 @@ -21,83 +22,92 @@ ListView { dialog.hide() } - property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle - - property int modelCurrentIndex: listView.model.currentIndex ?? 0 + property int modelCurrentIndex: root.model.currentIndex ?? 0 // Something weird with currentIndex happens when items are removed added. // listView.model.currentIndex contains the persistent index. onModelCurrentIndexChanged: { - listView.currentIndex = listView.model.currentIndex + root.currentIndex = root.model.currentIndex } onCurrentIndexChanged: { - listView.currentIndex = listView.model.currentIndex - dialog.backend.currentRow = listView.currentIndex + root.currentIndex = root.model.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 rowSpace: listView.width - (listView.rowSpacing * 4) - - listView.style.squareControlSize.width - property int rowWidth: listView.rowSpace / 4 - property int rowRest: listView.rowSpace % 4 + 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: [ BindingsDialog { id: dialog visible: false - backend: listView.model.delegate + backend: root.model.delegate } ] - delegate: Rectangle { + delegate: Rectangle { 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 - height: listView.style.squareControlSize.height + height: root.style.squareControlSize.height color: mouseArea.containsMouse ? - itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover - : listView.style.background.hover + itemDelegate.ListView.isCurrentItem ? root.style.interactionHover + : root.style.background.hover : "transparent" MouseArea { id: mouseArea + anchors.fill: parent + hoverEnabled: true + onClicked: { - listView.model.currentIndex = index - listView.currentIndex = index - dialog.backend.currentRow = index + root.model.currentIndex = itemDelegate.index + root.currentIndex = itemDelegate.index + dialog.backend.currentRow = itemDelegate.index dialog.popup(mouseArea) } - - property int currentIndex: listView.currentIndex } Row { id: row + property color textColor: itemDelegate.ListView.isCurrentItem ? root.style.text.selectedText + : root.style.icon.idle + height: itemDelegate.height - spacing: listView.rowSpacing - - property color textColor: itemDelegate.ListView.isCurrentItem ? listView.style.text.selectedText - : listView.style.icon.idle + spacing: root.rowSpacing Text { - width: listView.rowWidth + listView.rowRest + width: root.rowWidth + root.rowRest height: itemDelegate.height color: row.textColor - text: target ?? "" + text: itemDelegate.target ?? "" verticalAlignment: Text.AlignVCenter font.bold: false elide: Text.ElideMiddle - leftPadding: listView.rowSpacing + leftPadding: root.rowSpacing } Text { - width: listView.rowWidth + width: root.rowWidth height: itemDelegate.height - text: targetProperty ?? "" + text: itemDelegate.targetProperty ?? "" color: row.textColor verticalAlignment: Text.AlignVCenter font.bold: false @@ -105,9 +115,9 @@ ListView { } Text { - width: listView.rowWidth + width: root.rowWidth height: itemDelegate.height - text: source ?? "" + text: itemDelegate.source ?? "" verticalAlignment: Text.AlignVCenter color: row.textColor font.bold: false @@ -115,9 +125,9 @@ ListView { } Text { - width: listView.rowWidth + width: root.rowWidth height: itemDelegate.height - text: sourceProperty ?? "" + text: itemDelegate.sourceProperty ?? "" verticalAlignment: Text.AlignVCenter color: row.textColor font.bold: false @@ -125,12 +135,12 @@ ListView { } Rectangle { - width: listView.style.squareControlSize.width - height: listView.style.squareControlSize.height + width: root.style.squareControlSize.width + height: root.style.squareControlSize.height color: toolTipArea.containsMouse ? - itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover - : listView.style.background.hover + itemDelegate.ListView.isCurrentItem ? root.style.interactionHover + : root.style.background.hover : "transparent" Text { @@ -138,7 +148,7 @@ ListView { text: StudioTheme.Constants.remove_medium font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: listView.style.baseIconFontSize + font.pixelSize: root.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter @@ -151,15 +161,14 @@ ListView { id: toolTipArea tooltip: qsTr("This is a test.") anchors.fill: parent - onClicked: listView.model.remove(index) + onClicked: root.model.remove(itemDelegate.index) } } - } } highlight: Rectangle { - color: listView.style.interaction + color: root.style.interaction width: 600 } } diff --git a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml index 669bbc190c1..ebef48e61b6 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml @@ -76,7 +76,7 @@ Column { } StatementEditor { - actionType: action.currentValue + actionType: action.currentValue ?? ConnectionModelStatementDelegate.Custom id: container horizontalSpacing: root.horizontalSpacing columnWidth: root.columnWidth diff --git a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml index 1a0f3905ee9..909ca187e6f 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml @@ -41,6 +41,15 @@ ListView { 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: [ ConnectionsDialog { 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 { id: itemDelegate @@ -79,10 +81,9 @@ ListView { hoverEnabled: true onClicked: { - root.model.currentIndex = index - root.currentIndex = index - dialog.backend.currentRow = index - + root.model.currentIndex = itemDelegate.index + root.currentIndex = itemDelegate.index + dialog.backend.currentRow = itemDelegate.index dialog.popup(mouseArea) } } @@ -154,7 +155,7 @@ ListView { id: toolTipArea tooltip: qsTr("This is a test.") anchors.fill: parent - onClicked: root.model.remove(index) + onClicked: root.model.remove(itemDelegate.index) } } } diff --git a/share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml b/share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml index 78aebf85bdf..90b37aec7fa 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml @@ -9,9 +9,10 @@ import StudioTheme as StudioTheme import ConnectionsEditorEditorBackend ListView { - id: listView - width: 606 - height: 160 + id: root + + property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle + clip: true interactive: true highlightMoveDuration: 0 @@ -21,57 +22,66 @@ ListView { dialog.hide() } - property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle - - property int modelCurrentIndex: listView.model.currentIndex ?? 0 + property int modelCurrentIndex: root.model.currentIndex ?? 0 // Something weird with currentIndex happens when items are removed added. // listView.model.currentIndex contains the persistent index. onModelCurrentIndexChanged: { - listView.currentIndex = listView.model.currentIndex + root.currentIndex = root.model.currentIndex } onCurrentIndexChanged: { - listView.currentIndex = listView.model.currentIndex - dialog.backend.currentRow = listView.currentIndex + root.currentIndex = root.model.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 rowSpace: listView.width - (listView.rowSpacing * 4) - - listView.style.squareControlSize.width - property int rowWidth: listView.rowSpace / 4 - property int rowRest: listView.rowSpace % 4 + 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: [ PropertiesDialog { id: dialog visible: false - backend: listView.model.delegate + backend: root.model.delegate } ] delegate: Rectangle { 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 - height: listView.style.squareControlSize.height + height: root.style.squareControlSize.height color: mouseArea.containsMouse ? - itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover - : listView.style.background.hover + itemDelegate.ListView.isCurrentItem ? root.style.interactionHover + : root.style.background.hover : "transparent" MouseArea { id: mouseArea anchors.fill: parent - property int currentIndex: listView.currentIndex + property int currentIndex: root.currentIndex Connections { target: mouseArea function onClicked() { - listView.model.currentIndex = index - listView.currentIndex = index - dialog.backend.currentRow = index + root.model.currentIndex = itemDelegate.index + root.currentIndex = itemDelegate.index + dialog.backend.currentRow = itemDelegate.index dialog.popup(mouseArea) } } @@ -81,58 +91,58 @@ ListView { id: row height: itemDelegate.height - spacing: listView.rowSpacing + spacing: root.rowSpacing - property color textColor: itemDelegate.ListView.isCurrentItem ? listView.style.text.selectedText - : listView.style.icon.idle + property color textColor: itemDelegate.ListView.isCurrentItem ? root.style.text.selectedText + : root.style.icon.idle Text { - width: listView.rowWidth + listView.rowRest + width: root.rowWidth + root.rowRest height: itemDelegate.height color: row.textColor - text: target ?? "" + text: itemDelegate.target ?? "" verticalAlignment: Text.AlignVCenter font.bold: false elide: Text.ElideMiddle - leftPadding: listView.rowSpacing + leftPadding: root.rowSpacing } Text { - width: listView.rowWidth + width: root.rowWidth height: itemDelegate.height color: row.textColor - text: name ?? "" + text: itemDelegate.name ?? "" verticalAlignment: Text.AlignVCenter font.bold: false elide: Text.ElideMiddle } Text { - width: listView.rowWidth + listView.rowRest + width: root.rowWidth + root.rowRest height: itemDelegate.height color: row.textColor - text: type ?? "" + text: itemDelegate.type ?? "" verticalAlignment: Text.AlignVCenter font.bold: false elide: Text.ElideMiddle } Text { - width: listView.rowWidth + listView.rowRest + width: root.rowWidth + root.rowRest height: itemDelegate.height color: row.textColor - text: value ?? "" + text: itemDelegate.value ?? "" verticalAlignment: Text.AlignVCenter font.bold: false elide: Text.ElideMiddle } Rectangle { - width: listView.style.squareControlSize.width - height: listView.style.squareControlSize.height + width: root.style.squareControlSize.width + height: root.style.squareControlSize.height color: toolTipArea.containsMouse ? - itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover - : listView.style.background.hover + itemDelegate.ListView.isCurrentItem ? root.style.interactionHover + : root.style.background.hover : "transparent" Text { @@ -140,7 +150,7 @@ ListView { text: StudioTheme.Constants.remove_medium font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: listView.style.baseIconFontSize + font.pixelSize: root.style.baseIconFontSize verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter @@ -153,7 +163,7 @@ ListView { id: toolTipArea tooltip: qsTr("This is a test.") anchors.fill: parent - onClicked: listView.model.remove(index) + onClicked: root.model.remove(itemDelegate.index) } } @@ -161,7 +171,7 @@ ListView { } highlight: Rectangle { - color: listView.style.interaction + color: root.style.interaction width: 600 } }