QmlDesigner: Adding auto completion for changing types

We reuse the ExpressionTextField but adjust a couple of properties.

Change-Id: Ib11c13e028b1211402eab69ba5a3dd6c9442de7b
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ExpressionTextField.qml

@@ -34,11 +34,17 @@ Controls.TextField {
 
     signal rejected
 
+    property bool completeOnlyTypes: false
+
     property bool completionActive: listView.count > 0
     property bool dotCompletion: false
     property int dotCursorPos: 0
     property string prefix
 
+    property alias showButtons: buttonrow.visible
+
+    property bool fixedSize: false
+
     function commitCompletion() {
         var cursorPos = textField.cursorPosition
 
@@ -74,12 +80,22 @@ Controls.TextField {
 
         anchors.top: parent.top
         anchors.topMargin: 26
-        anchors.bottomMargin: 12
+        anchors.bottomMargin: textField.fixedSize ? -180 : 12
         anchors.bottom: parent.bottom
         anchors.left: parent.left
-        anchors.leftMargin: 6
         width: 200
         spacing: 2
+        children: [
+            Rectangle {
+                visible: textField.fixedSize
+                anchors.fill: parent
+                color: creatorTheme.QmlDesignerBackgroundColorDarker
+                border.color: creatorTheme.QmlDesignerBorderColor
+                anchors.rightMargin: 12
+                z: -1
+            }
+
+        ]
     }
 
     verticalAlignment: Text.AlignTop
@@ -89,7 +105,7 @@ Controls.TextField {
 
         if (event.key === Qt.Key_Period) {
             textField.dotCursorPos = textField.cursorPosition + 1
-            var list = autoComplete(textField.text+".", textField.dotCursorPos, false)
+            var list = autoComplete(textField.text+".", textField.dotCursorPos, false, textField.completeOnlyTypes)
             textField.prefix = list.pop()
             listView.model = list;
             textField.dotCompletion = true
@@ -97,7 +113,7 @@ Controls.TextField {
             if (textField.completionActive) {
                 var list2 = autoComplete(textField.text + event.text,
                                          textField.cursorPosition + event.text.length,
-                                         true)
+                                         true, textField.completeOnlyTypes)
                 textField.prefix = list2.pop()
                 listView.model = list2;
             }
@@ -106,7 +122,7 @@ Controls.TextField {
 
     Keys.onSpacePressed: {
         if (event.modifiers & Qt.ControlModifier) {
-            var list = autoComplete(textField.text, textField.cursorPosition, true)
+            var list = autoComplete(textField.text, textField.cursorPosition, true, textField.completeOnlyTypes)
             textField.prefix = list.pop()
             listView.model = list;
             textField.dotCompletion = false
@@ -164,6 +180,7 @@ Controls.TextField {
     }
 
     Row {
+        id: buttonrow
         spacing: 2
         Button {
             width: 16

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/qmldir

@@ -40,3 +40,4 @@ ToolTipArea 2.0 ToolTipArea.qml
 UrlChooser 2.0 UrlChooser.qml
 PaddingSection 2.0 PaddingSection.qml
 RoundedPanel 2.0 RoundedPanel.qml
+ExpressionTextField 2.0 ExpressionTextField.qml

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml

@@ -40,6 +40,7 @@ Rectangle {
             y: -1
             width: itemPane.width
             Section {
+                z: 2
                 caption: qsTr("Type")
 
                 anchors.left: parent.left
@@ -52,6 +53,7 @@ Rectangle {
                     }
 
                     SecondColumnLayout {
+                        z: 2
 
                         RoundedPanel {
                             Layout.fillWidth: true
@@ -68,28 +70,28 @@ Rectangle {
                             ToolTipArea {
                                 anchors.fill: parent
                                 onDoubleClicked: {
+                                    typeLineEdit.text = backendValues.className.value
                                     typeLineEdit.visible = ! typeLineEdit.visible
                                     typeLineEdit.forceActiveFocus()
                                 }
                                 tooltip: qsTr("Change the type of this item.")
                             }
 
-                            LineEdit {
+                            ExpressionTextField {
+                                z: 2
                                 id: typeLineEdit
+                                completeOnlyTypes: true
 
                                 anchors.fill: parent
 
                                 visible: false
 
-                                backendValue: className.id
+                                showButtons: false
+                                fixedSize: true
 
-                                text: backendValues.className.value
-
-                                showTranslateCheckBox: false
-                                showExtendedFunctionButton: false
                                 onEditingFinished: {
                                     visible = false
-                                    changeTypeName(typeLineEdit.text)
+                                    changeTypeName(typeLineEdit.text.trim())
                                 }
                             }
 

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml

@@ -43,9 +43,8 @@ Rectangle {
     color: baseColor
     border.color: creatorTheme.QmlDesignerBorderColor
 
-    function autoComplete(text, pos, explicitComplete) {
+    function autoComplete(text, pos, explicitComplete, filter) {
         var stringList = statesEditorModel.autoComplete(text, pos, explicitComplete)
-        print(stringList)
         return stringList
     }
 

src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.cpp

@@ -32,6 +32,7 @@
 #include <rewritingexception.h>
 
 #include <coreplugin/messagebox.h>
+#include <utils/algorithm.h>
 
 #include <QQmlContext>
 
@@ -115,10 +116,11 @@ QString PropertyEditorContextObject::translateFunction()
     return QStringLiteral("qsTrId");
 }
 
-QStringList PropertyEditorContextObject::autoComplete(const QString &text, int pos, bool explicitComplete)
+QStringList PropertyEditorContextObject::autoComplete(const QString &text, int pos, bool explicitComplete, bool filter)
 {
     if (m_model && m_model->rewriterView())
-        return m_model->rewriterView()->autoComplete(text, pos, explicitComplete);
+        return  Utils::filtered(m_model->rewriterView()->autoComplete(text, pos, explicitComplete), [filter](const QString &string) {
+            return !filter || (!string.isEmpty() && string.at(0).isUpper()); });
 
     return QStringList();
 }

src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.h

@@ -76,7 +76,7 @@ public:
     Q_INVOKABLE QColor colorFromString(const QString &colorString);
     Q_INVOKABLE QString translateFunction();
 
-    Q_INVOKABLE QStringList autoComplete(const QString &text, int pos, bool explicitComplete);
+    Q_INVOKABLE QStringList autoComplete(const QString &text, int pos, bool explicitComplete, bool filter);
 
     Q_INVOKABLE void toogleExportAlias();