QmlDesigner: Fix Connections Popup layout

* Set proper width on labels
* Set proper width on StatementEditor
* Forward backend property into StatementEditor

Change-Id: Ia0db6ff7f235bd8d25eb0f36124fa158b76aaf04
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>

share/qtcreator/qmldesigner/connectionseditor/BindingsDialogForm.qml

@@ -22,8 +22,17 @@ Column {
     Row {
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("From") ; tooltip: qsTr("The Property to assign from.")}
-        PopupLabel { text: qsTr("To"); tooltip: qsTr("The Property to assign to.") }
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("From")
+            tooltip: qsTr("The Property to assign from.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("To")
+            tooltip: qsTr("The Property to assign to.")
+        }
     }
 
     Row {

share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml

@@ -27,8 +27,17 @@ Column {
     Row {
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Signal"); tooltip: qsTr("The name of the signal.") }
-        PopupLabel { text: qsTr("Action"); tooltip: qsTr("The type of the action.") }
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Signal")
+            tooltip: qsTr("The name of the signal.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Action")
+            tooltip: qsTr("The type of the action.")
+        }
     }
 
     Row {
@@ -93,10 +102,12 @@ Column {
     }
 
     StatementEditor {
+        width: root.width
         actionType: action.currentValue ?? ConnectionModelStatementDelegate.Custom
         horizontalSpacing: root.horizontalSpacing
         columnWidth: root.columnWidth
         statement: backend.okStatement
+        backend: root.backend
         spacing: root.verticalSpacing
     }
 
@@ -190,10 +201,12 @@ Column {
 
     //Else Statement
     StatementEditor {
+        width: root.width
         actionType: action.currentValue ?? ConnectionModelStatementDelegate.Custom
         horizontalSpacing: root.horizontalSpacing
         columnWidth: root.columnWidth
         statement: backend.koStatement
+        backend: root.backend
         spacing: root.verticalSpacing
         visible: action.currentValue !== ConnectionModelStatementDelegate.Custom
                  && backend.hasCondition && backend.hasElse

share/qtcreator/qmldesigner/connectionseditor/PopupLabel.qml

@@ -8,10 +8,10 @@ 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
+
     HelperWidgets.ToolTipArea {
         id: area
         anchors.fill: parent

share/qtcreator/qmldesigner/connectionseditor/PropertiesDialogForm.qml

@@ -38,8 +38,17 @@ Column {
     Row {
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Name") ; tooltip: qsTr("The name of the property.")}
-        PopupLabel { text: qsTr("Value"); tooltip: qsTr("The value of the property.") }
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Name")
+            tooltip: qsTr("The name of the property.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Value")
+            tooltip: qsTr("The value of the property.")
+        }
     }
 
     Row {

share/qtcreator/qmldesigner/connectionseditor/StatementEditor.qml

@@ -18,16 +18,24 @@ Column {
 
     property var statement
 
-    //implicitWidth: Math.max(16, container.childrenRect.width + container.childrenRect.x)
-    //implicitHeight: Math.max(16, container.childrenRect.height + container.childrenRect.y)
+    property var backend
 
     // Call Function
     Row {
         visible: root.actionType === ConnectionModelStatementDelegate.CallFunction
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Item") ; tooltip: qsTr("The target item of the function.")}
-        PopupLabel { text: qsTr("Method") ; tooltip: qsTr("The name of the function.")}
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Item")
+            tooltip: qsTr("The target item of the function.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Method")
+            tooltip: qsTr("The name of the function.")
+        }
     }
 
     Row {
@@ -46,7 +54,7 @@ Column {
             onCurrentTypeIndexChanged: functionId.currentIndex = functionId.currentTypeIndex
         }
 
-            StudioControls.TopLevelComboBox {
+        StudioControls.TopLevelComboBox {
             id: functionName
             style: StudioTheme.Values.connectionPopupControlStyle
             width: root.columnWidth
@@ -63,8 +71,16 @@ Column {
         visible: root.actionType === ConnectionModelStatementDelegate.Assign
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("From") ; tooltip: qsTr("The Property to assign from.")}
-        PopupLabel { text: qsTr("To"); tooltip: qsTr("The Property to assign to.") }
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("From")
+            tooltip: qsTr("The Property to assign from.")
+        }
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("To")
+            tooltip: qsTr("The Property to assign to.")
+        }
     }
 
     Row {
@@ -132,8 +148,17 @@ Column {
         visible: root.actionType === ConnectionModelStatementDelegate.ChangeState
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("State Group"); tooltip: qsTr("The State Group.") }
-        PopupLabel { text: qsTr("State"); tooltip: qsTr("The State .") }
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("State Group")
+            tooltip: qsTr("The State Group.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("State")
+            tooltip: qsTr("The State .")
+        }
     }
 
     Row {
@@ -169,8 +194,17 @@ Column {
         visible: root.actionType === ConnectionModelStatementDelegate.SetProperty
         spacing: root.horizontalSpacing
 
-        PopupLabel { text: qsTr("Item"); tooltip: qsTr("The Item.")}
-        PopupLabel { text: qsTr("Property"); tooltip: qsTr("The property of the item.")}
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Item")
+            tooltip: qsTr("The Item.")
+        }
+
+        PopupLabel {
+            width: root.columnWidth
+            text: qsTr("Property")
+            tooltip: qsTr("The property of the item.")
+        }
     }
 
     Row {
@@ -203,6 +237,7 @@ Column {
     }
 
     PopupLabel {
+        width: root.columnWidth
         visible: root.actionType === ConnectionModelStatementDelegate.SetProperty
         text: qsTr("Value")
     }
@@ -222,6 +257,7 @@ Column {
 
     // Print Message
     PopupLabel {
+        width: root.columnWidth
         visible: root.actionType === ConnectionModelStatementDelegate.PrintMessage
         text: qsTr("Message")
         tooltip: qsTr("The message that is printed.")