QmlDesigner: Prevent clipping the CollectionDetailsView delegates

Task-number: QDS-11011
Change-Id: I7e7997df09c8c62c72a911a3f51a9b9fe492010b
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>

share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsEditDelegate.qml

@@ -6,84 +6,144 @@ import CollectionDetails 1.0 as CollectionDetails
 import HelperWidgets 2.0 as HelperWidgets
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
+import QtQuick.Templates as T
 
 Item {
     id: root
     required property var columnType
 
     property var __modifier : textEditor
+    property bool __changesAccepted: true
 
-    width: itemColumn.width
+    TableView.onCommit: {
-    height: itemColumn.height
+        if (root.__changesAccepted)
-
+            edit = __modifier.editor.editValue
-    TableView.onCommit: edit = __modifier.editValue
+    }
 
     Component.onCompleted: {
+        __changesAccepted = true
         if (edit && edit !== "")
-            root.__modifier.editValue = edit
+            root.__modifier.editor.editValue = edit
     }
 
     onActiveFocusChanged: {
         if (root.activeFocus)
-            root.__modifier.forceActiveFocus()
+            root.__modifier.editor.forceActiveFocus()
     }
 
     Connections {
         id: modifierFocusConnection
-        target: root.__modifier
+
+        target: root.__modifier.editor
+
         function onActiveFocusChanged() {
             if (!modifierFocusConnection.target.activeFocus)
-                TableView.commit()
+                root.TableView.commit()
         }
     }
 
-    Column {
+    EditorPopup {
-        id: itemColumn
-
-        StudioControls.TextField {
         id: textEditor
 
-            property alias editValue: textEditor.text
+        editor: textField
+
+        StudioControls.TextField {
+            id: textField
+
+            property alias editValue: textField.text
 
             actionIndicator.visible: false
             translationIndicatorVisible: false
-            enabled: visible
+
-            visible: false
+            onRejected: root.__changesAccepted = false
+        }
     }
 
-        StudioControls.RealSpinBox {
+    EditorPopup {
         id: numberEditor
 
-            property alias editValue: numberEditor.realValue
+        editor: numberField
+
+        StudioControls.RealSpinBox {
+            id: numberField
+
+            property alias editValue: numberField.realValue
 
             actionIndicator.visible: false
-            enabled: visible
-            visible: false
-
             realFrom: -9e9
             realTo: 9e9
             realStepSize: 1.0
             decimals: 6
         }
-
-        StudioControls.CheckBox {
-            id: boolEditor
-
-            property alias editValue: boolEditor.checked
-
-            actionIndicatorVisible: false
-            enabled: visible
-            visible: false
     }
 
-        HelperWidgets.ColorPicker {
+    EditorPopup {
+        id: boolEditor
+
+        editor: boolField
+
+        StudioControls.CheckBox {
+            id: boolField
+
+            property alias editValue: boolField.checked
+
+            actionIndicatorVisible: false
+        }
+    }
+
+    EditorPopup {
         id: colorEditor
 
-            property alias editValue: colorEditor.color
+        editor: colorPicker
+
+        implicitHeight: colorPicker.height + topPadding + bottomPadding
+        implicitWidth: colorPicker.width + leftPadding + rightPadding
+        padding: 8
+
+        HelperWidgets.ColorPicker {
+            id: colorPicker
+
+            property alias editValue: colorPicker.color
 
             width: 100
+
+            Keys.onEnterPressed: colorPicker.focus = false
+        }
+
+        background: Rectangle {
+            color: StudioTheme.Values.themeControlBackgroundInteraction
+            border.color: StudioTheme.Values.themeInteraction
+            border.width: StudioTheme.Values.border
+        }
+    }
+
+    component EditorPopup: T.Popup {
+        id: editorPopup
+
+        required property Item editor
+
+        implicitHeight: contentHeight
+        implicitWidth: contentWidth
+
         enabled: visible
         visible: false
+
+        Connections {
+            target: editorPopup.editor
+
+            function onActiveFocusChanged() {
+                if (!editorPopup.editor.activeFocus)
+                    editorPopup.close()
+            }
+        }
+
+        Connections {
+            target: editorPopup.editor.Keys
+
+            function onEscapePressed() {
+                root.__changesAccepted = false
+                editorPopup.close()
+            }
         }
     }