QmlDesigner: Update QML for ConnectionEditor

* Style PropertiesList
* Style BindingsList
* Add PoupLabel for reuse
* Take screen height into account
* Minor tweaks no forms

Change-Id: I70b141732f38a9534447586fb00cd736949e56e5
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>

share/qtcreator/qmldesigner/connectionseditor/BindingsDialogForm.qml

@@ -5,27 +5,22 @@ import QtQuick
 import QtQuick.Controls
 import StudioControls
 
-Rectangle {
+Item {
     width: 400
     height: 800
-    color: "#1b1b1b"
 
     property var backend
 
-    Text {
+    PopupLabel {
-        id: text1
         x: 10
         y: 25
-        color: "#ffffff"
         text: qsTr("Target")
-        font.pixelSize: 15
     }
 
-    Text {
+    PopupLabel {
         id: text111
         x: 80
         y: 25
-        color: "red"
         text: backend.targetNode
         font.pixelSize: 15
     }
@@ -44,13 +39,10 @@ Rectangle {
         onCurrentTypeIndexChanged: target.currentIndex = target.currentTypeIndex
     }
 
-    Text {
+    PopupLabel {
-        id: text2
         x: 13
         y: 111
-        color: "#ffffff"
         text: qsTr("Source Propety")
-        font.pixelSize: 15
     }
 
     TopLevelComboBox {
@@ -68,12 +60,10 @@ Rectangle {
         onCurrentTypeIndexChanged: sourceNode.currentIndex = sourceNode.currentTypeIndex
     }
 
-    Text {
+    PopupLabel {
         x: 13
         y: 88
-        color: "#ffffff"
         text: qsTr("Source Node")
-        font.pixelSize: 15
     }
 
     TopLevelComboBox {
@@ -90,12 +80,9 @@ Rectangle {
         onCurrentTypeIndexChanged: sourceProperty.currentIndex = sourceProperty.currentTypeIndex
     }
 
-    Text {
+    PopupLabel {
-        id: text3
         x: 10
         y: 55
-        color: "#ffffff"
         text: qsTr("Property")
-        font.pixelSize: 15
     }
 }

share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml

@@ -12,13 +12,17 @@ ListView {
     id: listView
     width: 606
     height: 160
-    interactive: false
+    clip: true
+    interactive: true
     highlightMoveDuration: 0
+    highlightResizeDuration: 0
 
     onVisibleChanged: {
         dialog.hide()
     }
 
+    property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle
+
     property int modelCurrentIndex: listView.model.currentIndex ?? 0
 
     // Something weird with currentIndex happens when items are removed added.
@@ -33,6 +37,12 @@ ListView {
         dialog.backend.currentRow = listView.currentIndex
     }
 
+    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
+
     data: [
         BindingsDialog {
             id: dialog
@@ -40,10 +50,16 @@ ListView {
             backend: listView.model.delegate
         }
     ]
-    delegate: Item {
+    delegate: Rectangle {
 
-        width: 600
+        id: itemDelegate
-        height: 18
+
+        width: ListView.view.width
+        height: listView.style.squareControlSize.height
+        color: mouseArea.containsMouse ?
+                   itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover
+                                                       : listView.style.background.hover
+                                       : "transparent"
 
         MouseArea {
             id: mouseArea
@@ -59,64 +75,91 @@ ListView {
         }
 
         Row {
-            id: row1
+            id: row
-            x: 0
+
-            y: 0
+            height: itemDelegate.height
-            width: 600
+            spacing: listView.rowSpacing
-            height: 16
+
-            spacing: 10
+            property color textColor: itemDelegate.ListView.isCurrentItem ? listView.style.text.selectedText
+                                                                          : listView.style.icon.idle
 
             Text {
-                width: 120
+                width: listView.rowWidth + listView.rowRest
-                color: "#ffffff"
+                height: itemDelegate.height
+                color: row.textColor
                 text: target ?? ""
                 anchors.verticalCenter: parent.verticalCenter
                 font.bold: false
+                elide: Text.ElideMiddle
+                leftPadding: listView.rowSpacing
             }
 
             Text {
-                width: 120
+                width: listView.rowWidth
+                height: itemDelegate.height
                 text: targetProperty ?? ""
-                color: "#ffffff"
+                color: row.textColor
                 anchors.verticalCenter: parent.verticalCenter
                 font.bold: false
+                elide: Text.ElideMiddle
             }
 
             Text {
-                width: 120
+                width: listView.rowWidth
+                height: itemDelegate.height
                 text: source ?? ""
                 anchors.verticalCenter: parent.verticalCenter
-                color: "#ffffff"
+                color: row.textColor
                 font.bold: false
+                elide: Text.ElideMiddle
             }
 
             Text {
-                width: 120
+                width: listView.rowWidth
+                height: itemDelegate.height
                 text: sourceProperty ?? ""
                 anchors.verticalCenter: parent.verticalCenter
-                color: "#ffffff"
+                color: row.textColor
                 font.bold: false
+                elide: Text.ElideMiddle
             }
 
-            Text {
+            Rectangle {
-                width: 120
+                width: listView.style.squareControlSize.width
+                height: listView.style.squareControlSize.height
 
-                text: "-"
+                color: toolTipArea.containsMouse ?
-                anchors.verticalCenter: parent.verticalCenter
+                           itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover
-                horizontalAlignment: Text.AlignRight
+                                                               : listView.style.background.hover
-                font.pointSize: 14
+                                               : "transparent"
-                color: "#ffffff"
+
-                font.bold: true
+                Text {
-                MouseArea {
+                    anchors.fill: parent
+
+                    text: StudioTheme.Constants.remove_medium
+                    font.family: StudioTheme.Constants.iconFont.family
+                    font.pixelSize: listView.style.baseIconFontSize
+
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+
+                    color: row.textColor
+                    renderType: Text.QtRendering
+                }
+
+                HelperWidgets.ToolTipArea {
+                    id: toolTipArea
+                    tooltip: qsTr("This is a test.")
                     anchors.fill: parent
                     onClicked: listView.model.remove(index)
                 }
             }
+
         }
     }
 
     highlight: Rectangle {
-        color: "#2a5593"
+        color: listView.style.interaction
         width: 600
     }
 }

share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml

@@ -18,6 +18,10 @@ PopupDialog {
             text: qsTr("Target")
             font.pixelSize: StudioTheme.Values.myFontSize
             anchors.verticalCenter: parent.verticalCenter
+            ToolTipArea {
+                anchors.fill: parent
+                tooltip: qsTr("Choose the target for the signal.")
+            }
         }
 
         StudioControls.TopLevelComboBox {

share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml

@@ -16,11 +16,6 @@ Column {
 
     property var backend
 
-    component PopupLabel : Text {
-        width: root.columnWidth
-        color: StudioTheme.Values.themeTextColor
-        font.pixelSize: StudioTheme.Values.myFontSize
-    }
 
     /* replaced by ConnectionModelStatementDelegate defined in C++
     enum ActionType {
@@ -39,8 +34,8 @@ Column {
     Row {
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Signal") }
+        PopupLabel { text: qsTr("Signal"); tooltip: qsTr("The name of the signal.") }
-        PopupLabel { text: qsTr("Action") }
+        PopupLabel { text: qsTr("Action"); tooltip: qsTr("The type of the action.") }
     }
 
     Row {
@@ -75,7 +70,7 @@ Column {
                 { value: ConnectionModelStatementDelegate.ChangeState, text: qsTr("Change State") },
                 { value: ConnectionModelStatementDelegate.SetProperty, text: qsTr("Set Property") },
                 { value: ConnectionModelStatementDelegate.PrintMessage, text: qsTr("Print Message") },
-                { value: ConnectionModelStatementDelegate.Custom, text: qsTr("Custom") }
+                { value: ConnectionModelStatementDelegate.Custom, text: qsTr("Unknown") }
             ]
         }
     }
@@ -85,8 +80,8 @@ Column {
         visible: action.currentValue === ConnectionModelStatementDelegate.CallFunction
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Item") }
+        PopupLabel { text: qsTr("Item") ; tooltip: qsTr("The target item of the function.")}
-        PopupLabel { text: qsTr("Method") }
+        PopupLabel { text: qsTr("Method") ; tooltip: qsTr("The name of the function.")}
     }
 
     Row {
@@ -122,8 +117,8 @@ Column {
         visible: action.currentValue === ConnectionModelStatementDelegate.Assign
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("From") }
+        PopupLabel { text: qsTr("From") ; tooltip: qsTr("The Property to assign from.")}
-        PopupLabel { text: qsTr("To") }
+        PopupLabel { text: qsTr("To"); tooltip: qsTr("The Property to assign to.") }
     }
 
     Row {
@@ -191,8 +186,8 @@ Column {
         visible: action.currentValue === ConnectionModelStatementDelegate.ChangeState
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("State Group") }
+        PopupLabel { text: qsTr("State Group"); tooltip: qsTr("The State Group.") }
-        PopupLabel { text: qsTr("State") }
+        PopupLabel { text: qsTr("State"); tooltip: qsTr("The State .") }
     }
 
     Row {
@@ -228,8 +223,8 @@ Column {
         visible: action.currentValue === ConnectionModelStatementDelegate.SetProperty
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Item") }
+        PopupLabel { text: qsTr("Item"); tooltip: qsTr("The Item.")}
-        PopupLabel { text: qsTr("Property") }
+        PopupLabel { text: qsTr("Property"); tooltip: qsTr("The property of the item.")}
     }
 
     Row {
@@ -283,6 +278,7 @@ Column {
     PopupLabel {
         visible: action.currentValue === ConnectionModelStatementDelegate.PrintMessage
         text: qsTr("Message")
+        tooltip: qsTr("The message that is printed.")
     }
 
     StudioControls.TextField {

share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml

@@ -104,6 +104,7 @@ ListView {
                 verticalAlignment: Text.AlignVCenter
                 font.bold: false
                 leftPadding: root.rowSpacing
+                elide: Text.ElideMiddle
             }
 
             Text {
@@ -113,6 +114,7 @@ ListView {
                 color: row.textColor
                 verticalAlignment: Text.AlignVCenter
                 font.bold: false
+                elide: Text.ElideMiddle
             }
 
             Text {
@@ -122,6 +124,7 @@ ListView {
                 verticalAlignment: Text.AlignVCenter
                 color: row.textColor
                 font.bold: false
+                elide: Text.ElideMiddle
             }
 
             Rectangle {

share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml

@@ -12,6 +12,7 @@ Window {
 
     property alias titleBar: titleBarContent.children
     default property alias content: mainContent.children
+    property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
 
     width: 320
     height: column.implicitHeight
@@ -19,6 +20,16 @@ Window {
     flags: Qt.FramelessWindowHint | Qt.Dialog
     color: StudioTheme.Values.themePopoutBackground
 
+    function ensureVerticalPosition()
+    {
+        if ((window.y + window.height) > (Screen.height - window.style.dialogScreenMargin)) {
+            window.y = (Screen.height - window.height - window.style.dialogScreenMargin)
+        }
+    }
+
+    onHeightChanged: window.ensureVerticalPosition()
+
+
     function popup(item) {
         print("popup " + item)
         var padding = 12
@@ -27,6 +38,9 @@ Window {
         if (window.x < 0)
             window.x = p.x + item.width + padding
         window.y = p.y
+
+        window.ensureVerticalPosition()
+
         window.show()
         window.raise()
     }

share/qtcreator/qmldesigner/connectionseditor/PopupLabel.qml

@@ -0,0 +1,20 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
+
+import QtQuick
+import QtQuick.Controls
+import HelperWidgets as HelperWidgets
+import StudioControls as StudioControls
+import StudioTheme as StudioTheme
+
+Text {
+    width: root.columnWidth
+    color: StudioTheme.Values.themeTextColor
+    font.pixelSize: StudioTheme.Values.myFontSize
+    property alias tooltip: area.tooltip
+    ToolTipArea {
+        id: area
+        anchors.fill: parent
+        tooltip: qsTr("missing")
+    }
+}

share/qtcreator/qmldesigner/connectionseditor/PropertiesDialogForm.qml

@@ -6,19 +6,18 @@ import QtQuick.Controls 2.15
 
 import StudioControls
 
-Rectangle {
+Item {
     width: 400
     height: 800
-    color: "#1b1b1b"
+
     property var backend
 
-    Text {
+    PopupLabel {
-        id: text1
         x: 10
         y: 25
-        color: "#ffffff"
+
         text: qsTr("Type:")
-        font.pixelSize: 15
+
     }
 
     TopLevelComboBox {
@@ -33,20 +32,16 @@ Rectangle {
         onCurrentTypeIndexChanged: target.currentIndex = target.currentTypeIndex
     }
 
-    Text {
+    PopupLabel {
-        id: text2
         x: 10
         y: 131
-        color: "#ffffff"
         text: qsTr("Name")
-        font.pixelSize: 15
     }
 
     TextInput {
         id: name
         x: 70
         y: 131
-        color: "white"
         width: 156
         text: backend.name.text ?? ""
         onEditingFinished: {
@@ -54,17 +49,14 @@ Rectangle {
         }
     }
 
-    Text {
+    PopupLabel {
         x: 10
         y: 81
-        color: "#ffffff"
         text: qsTr("Value")
-        font.pixelSize: 15
     }
 
     TextInput {
         id: value
-        color: "red"
         x: 70
         y: 81
         width: 156

share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml

@@ -12,13 +12,17 @@ ListView {
     id: listView
     width: 606
     height: 160
-    interactive: false
+    clip: true
+    interactive: true
     highlightMoveDuration: 0
+    highlightResizeDuration: 0
 
     onVisibleChanged: {
         dialog.hide()
     }
 
+    property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle
+
     property int modelCurrentIndex: listView.model.currentIndex ?? 0
 
     // Something weird with currentIndex happens when items are removed added.
@@ -33,6 +37,12 @@ ListView {
         dialog.backend.currentRow = listView.currentIndex
     }
 
+    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
+
     data: [
         PropertiesDialog {
             id: dialog
@@ -41,10 +51,14 @@ ListView {
         }
     ]
 
-    delegate: Item {
+    delegate: Rectangle {
-
+        id: itemDelegate
-        width: 600
+        width: ListView.view.width
-        height: 18
+        height: listView.style.squareControlSize.height
+        color: mouseArea.containsMouse ?
+                   itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover
+                                                       : listView.style.background.hover
+                                       : "transparent"
 
         MouseArea {
             id: mouseArea
@@ -64,64 +78,90 @@ ListView {
         }
 
         Row {
-            id: row1
+            id: row
-            x: 0
-            y: 0
-            width: 600
-            height: 16
-            spacing: 10
 
+            height: itemDelegate.height
+            spacing: listView.rowSpacing
+
+            property color textColor: itemDelegate.ListView.isCurrentItem ? listView.style.text.selectedText
+                                                                          : listView.style.icon.idle
             Text {
-                width: 120
+                width: listView.rowWidth + listView.rowRest
-                color: "#ffffff"
+                height: itemDelegate.height
+                color: row.textColor
                 text: target ?? ""
                 anchors.verticalCenter: parent.verticalCenter
                 font.bold: false
+                elide: Text.ElideMiddle
+                leftPadding: listView.rowSpacing
             }
 
             Text {
-                width: 120
+                width: listView.rowWidth
+                height: itemDelegate.height
+                color: row.textColor
                 text: name ?? ""
-                color: "#ffffff"
                 anchors.verticalCenter: parent.verticalCenter
                 font.bold: false
+                elide: Text.ElideMiddle
             }
 
             Text {
-                width: 120
+                width: listView.rowWidth + listView.rowRest
+                height: itemDelegate.height
+                color: row.textColor
                 text: type ?? ""
                 anchors.verticalCenter: parent.verticalCenter
-                color: "#ffffff"
                 font.bold: false
+                elide: Text.ElideMiddle
             }
 
             Text {
-                width: 120
+                width: listView.rowWidth + listView.rowRest
+                height: itemDelegate.height
+                color: row.textColor
                 text: value ?? ""
                 anchors.verticalCenter: parent.verticalCenter
-                color: "#ffffff"
                 font.bold: false
+                elide: Text.ElideMiddle
             }
 
-            Text {
+            Rectangle {
-                width: 120
+                width: listView.style.squareControlSize.width
+                height: listView.style.squareControlSize.height
 
-                text: "-"
+                color: toolTipArea.containsMouse ?
-                anchors.verticalCenter: parent.verticalCenter
+                           itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover
-                horizontalAlignment: Text.AlignRight
+                                                               : listView.style.background.hover
-                font.pointSize: 14
+                                               : "transparent"
-                color: "#ffffff"
+
-                font.bold: true
+                Text {
-                MouseArea {
+                    anchors.fill: parent
+
+                    text: StudioTheme.Constants.remove_medium
+                    font.family: StudioTheme.Constants.iconFont.family
+                    font.pixelSize: listView.style.baseIconFontSize
+
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+
+                    color: row.textColor
+                    renderType: Text.QtRendering
+                }
+
+                HelperWidgets.ToolTipArea {
+                    id: toolTipArea
+                    tooltip: qsTr("This is a test.")
                     anchors.fill: parent
                     onClicked: listView.model.remove(index)
                 }
             }
+
         }
     }
 
     highlight: Rectangle {
-        color: "#2a5593"
+        color: listView.style.interaction
         width: 600
     }
 }