QmlDesigner: Remove the collection source item from the ui

- Collection Source Model item is removed from the ui
- Collection items are realigned

Task-number: QDS-11416
Change-Id: Ia185907dec9221494c3551a3a679886910f9cfeb
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml

@@ -12,7 +12,7 @@ Item {
     id: root
 
     implicitWidth: 300
-    implicitHeight: innerRect.height + 3
+    implicitHeight: boundingRect.height + 3
 
     property color textColor
     property string sourceType
@@ -24,9 +24,8 @@ Item {
     Item {
         id: boundingRect
 
-        anchors.centerIn: root
         width: parent.width
-        height: nameHolder.height
+        height: itemLayout.height
         clip: true
 
         MouseArea {
@@ -50,39 +49,24 @@ Item {
         }
 
         RowLayout {
+            id: itemLayout
+
             width: parent.width
 
-            Text {
-                id: moveTool
-
-                property StudioTheme.ControlStyle textStyle: StudioTheme.Values.viewBarButtonStyle
-
-                Layout.preferredWidth: moveTool.textStyle.squareControlSize.width
-                Layout.preferredHeight: nameHolder.height
-                Layout.leftMargin: 12
-                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-
-                text: StudioTheme.Constants.dragmarks
-                font.family: StudioTheme.Constants.iconFont.family
-                font.pixelSize: moveTool.textStyle.baseIconFontSize
-                color: root.textColor
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-            }
-
             Text {
                 id: nameHolder
 
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+                Layout.leftMargin: StudioTheme.Values.collectionItemTextSideMargin
+                Layout.topMargin: StudioTheme.Values.collectionItemTextMargin
+                Layout.bottomMargin: StudioTheme.Values.collectionItemTextMargin
 
                 text: collectionName
                 font.pixelSize: StudioTheme.Values.baseFontSize
                 color: root.textColor
-                leftPadding: 5
+                topPadding: StudioTheme.Values.collectionItemTextPadding
-                topPadding: 8
+                bottomPadding: StudioTheme.Values.collectionItemTextPadding
-                rightPadding: 8
-                bottomPadding: 8
                 elide: Text.ElideMiddle
                 verticalAlignment: Text.AlignVCenter
             }
@@ -91,13 +75,16 @@ Item {
                 id: threeDots
 
                 Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                Layout.topMargin: StudioTheme.Values.collectionItemTextMargin
+                Layout.bottomMargin: StudioTheme.Values.collectionItemTextMargin
+                Layout.rightMargin: StudioTheme.Values.collectionItemTextSideMargin
+
                 text: StudioTheme.Constants.more_medium
                 font.family: StudioTheme.Constants.iconFont.family
                 font.pixelSize: StudioTheme.Values.baseIconFontSize
                 color: root.textColor
-                rightPadding: 12
+                padding: StudioTheme.Values.collectionItemTextPadding
-                topPadding: nameHolder.topPadding
+
-                bottomPadding: nameHolder.bottomPadding
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
 
@@ -144,6 +131,7 @@ Item {
 
         title: qsTr("Deleting the model")
         clip: true
+        implicitWidth: 300
 
         contentItem: ColumnLayout {
             spacing: 2

share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml

@@ -109,14 +109,7 @@ Item {
 
                     delegate: ModelSourceItem {
                         implicitWidth: sourceListView.width
-                        onDeleteItem: root.model.removeRow(index)
                         hasSelectedTarget: root.rootView.targetNodeSelected
-                        onAddCollection: (collectionName) => {
-                            root.rootView.addCollection(collectionName,
-                                                        sourceCollectionType,
-                                                        "",
-                                                        sourceNode)
-                        }
                     }
                 }
             }

share/qtcreator/qmldesigner/collectionEditorQmlSource/ModelSourceItem.qml

@@ -12,424 +12,25 @@ Item {
     id: root
 
     implicitWidth: 300
-    implicitHeight: wholeColumn.height
+    implicitHeight: collectionListView.height
 
     property bool hasSelectedTarget
 
-    property color textColor
+    ListView {
-    property var collectionModel
+        id: collectionListView
 
-    property bool expanded: false
-    readonly property bool isJsonModel: sourceCollectionType === "json"
-
-    signal selectItem(int itemIndex)
-    signal deleteItem()
-    signal addCollection(string collectionName)
-
-    function toggleExpanded() {
-        if (collectionListView.count > 0)
-            root.expanded = !root.expanded || sourceIsSelected;
-    }
-
-    ColumnLayout {
-        id: wholeColumn
         width: parent.width
-        spacing: 0
+        implicitHeight: contentHeight
+        leftMargin: 6
 
-        Item {
+        model: internalModels
-            id: boundingRect
+        clip: true
 
-            Layout.fillWidth: true
+        delegate: CollectionItem {
-            Layout.preferredHeight: nameHolder.height
+            width: collectionListView.width
-            Layout.leftMargin: 6
+            sourceType: collectionListView.model.sourceType
-            clip: true
+            hasSelectedTarget: root.hasSelectedTarget
-
+            onDeleteItem: collectionListView.model.removeRow(index)
-            MouseArea {
-                id: itemMouse
-
-                anchors.fill: parent
-                acceptedButtons: Qt.LeftButton
-                propagateComposedEvents: true
-                hoverEnabled: true
-
-                onClicked: (event) => {
-                    if (!sourceIsSelected) {
-                        sourceIsSelected = true
-                        event.accepted = true
-                    }
-                }
-
-                onDoubleClicked: (event) => {
-                    root.toggleExpanded()
-                }
-            }
-
-            Rectangle {
-                id: innerRect
-                anchors.fill: parent
-            }
-
-            RowLayout {
-                width: parent.width
-
-                Text {
-                    id: expandButton
-
-                    property StudioTheme.ControlStyle textStyle: StudioTheme.Values.viewBarButtonStyle
-
-                    Layout.preferredWidth: expandButton.textStyle.squareControlSize.width
-                    Layout.preferredHeight: nameHolder.height
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-
-                    text: StudioTheme.Constants.startNode
-                    font.family: StudioTheme.Constants.iconFont.family
-                    font.pixelSize: 6
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    color: textColor
-
-                    rotation: root.expanded ? 90 : 0
-                    visible: collectionListView.count > 0
-
-                    Behavior on rotation {
-                        SpringAnimation { spring: 2; damping: 0.2 }
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        acceptedButtons: Qt.RightButton | Qt.LeftButton
-                        onClicked: root.toggleExpanded()
-                    }
-                }
-
-                Text {
-                    id: nameHolder
-
-                    Layout.fillWidth: true
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-
-                    text: sourceName
-                    font.pixelSize: StudioTheme.Values.baseFontSize
-                    color: textColor
-                    leftPadding: 5
-                    topPadding: 8
-                    rightPadding: 8
-                    bottomPadding: 8
-                    elide: Text.ElideMiddle
-                    horizontalAlignment: Text.AlignLeft
-                    verticalAlignment: Text.AlignVCenter
-                }
-
-                Text {
-                    id: threeDots
-
-                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-
-                    text: StudioTheme.Constants.more_medium
-                    font.family: StudioTheme.Constants.iconFont.family
-                    font.pixelSize: StudioTheme.Values.baseIconFontSize
-                    color: textColor
-                    rightPadding: 12
-                    topPadding: nameHolder.topPadding
-                    bottomPadding: nameHolder.bottomPadding
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-
-                    MouseArea {
-                        anchors.fill: parent
-                        acceptedButtons: Qt.RightButton | Qt.LeftButton
-                        onClicked: collectionMenu.popup()
-                    }
-                }
-            }
-        }
-
-        ListView {
-            id: collectionListView
-
-            Layout.fillWidth: true
-            Layout.preferredHeight: root.expanded ? contentHeight : 0
-            Layout.leftMargin: 6
-            model: internalModels
-            clip: true
-
-            Behavior on Layout.preferredHeight {
-                NumberAnimation {duration: 500}
-            }
-
-            delegate: CollectionItem {
-                width: collectionListView.width
-                sourceType: collectionListView.model.sourceType
-                hasSelectedTarget: root.hasSelectedTarget
-                onDeleteItem: collectionListView.model.removeRow(index)
-            }
         }
     }
-
-    StudioControls.Menu {
-        id: collectionMenu
-
-        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
-
-        StudioControls.MenuItem {
-            text: qsTr("Add a model")
-            visible: root.isJsonModel && internalModels !== undefined
-            onTriggered: newCollectionDialog.open()
-        }
-
-        StudioControls.MenuItem {
-            text: qsTr("Delete")
-            shortcut: StandardKey.Delete
-            onTriggered: deleteDialog.open()
-        }
-
-        StudioControls.MenuItem {
-            text: qsTr("Rename")
-            shortcut: StandardKey.Replace
-            onTriggered: renameDialog.open()
-        }
-    }
-
-    component Spacer: Item {
-        implicitWidth: 1
-        implicitHeight: StudioTheme.Values.sectionColumnSpacing
-    }
-
-    component NameField: Text {
-        Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-        horizontalAlignment: Qt.AlignRight
-        verticalAlignment: Qt.AlignCenter
-        color: StudioTheme.Values.themeTextColor
-        font.family: StudioTheme.Constants.font.family
-        font.pixelSize: StudioTheme.Values.baseIconFontSize
-    }
-
-    component ErrorField: Text {
-        color: StudioTheme.Values.themeError
-        font.family: StudioTheme.Constants.font.family
-        font.pixelSize: StudioTheme.Values.baseIconFontSize
-    }
-
-    StudioControls.Dialog {
-        id: deleteDialog
-
-        title: qsTr("Deleting source")
-
-        contentItem: ColumnLayout {
-            spacing: StudioTheme.Values.sectionColumnSpacing
-
-            Text {
-                text: qsTr("Are you sure that you want to delete source \"" + sourceName + "\"?")
-                color: StudioTheme.Values.themeTextColor
-            }
-
-            RowLayout {
-                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-                spacing: StudioTheme.Values.sectionRowSpacing
-
-                HelperWidgets.Button {
-                    id: btnDelete
-
-                    text: qsTr("Delete")
-                    onClicked: root.deleteItem(index)
-                }
-
-                HelperWidgets.Button {
-                    text: qsTr("Cancel")
-                    onClicked: deleteDialog.reject()
-                }
-            }
-        }
-    }
-
-    StudioControls.Dialog {
-        id: renameDialog
-
-        title: qsTr("Rename source")
-
-        onAccepted: {
-            if (newNameField.text !== "")
-                sourceName = newNameField.text
-        }
-
-        onOpened: {
-            newNameField.text = sourceName
-        }
-
-        contentItem: ColumnLayout {
-            spacing: 2
-
-            Text {
-                text: qsTr("Previous name: " + sourceName)
-                color: StudioTheme.Values.themeTextColor
-            }
-
-            Spacer {}
-
-            Text {
-                text: qsTr("New name:")
-                color: StudioTheme.Values.themeTextColor
-            }
-
-            StudioControls.TextField {
-                id: newNameField
-
-                Layout.fillWidth: true
-                actionIndicator.visible: false
-                translationIndicator.visible: false
-                validator: newNameValidator
-
-                Keys.onEnterPressed: renameDialog.accept()
-                Keys.onReturnPressed: renameDialog.accept()
-                Keys.onEscapePressed: renameDialog.reject()
-
-                onTextChanged: {
-                    btnRename.enabled = newNameField.text !== ""
-                }
-            }
-
-            Spacer {}
-
-            RowLayout {
-                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-                spacing: StudioTheme.Values.sectionRowSpacing
-
-                HelperWidgets.Button {
-                    id: btnRename
-
-                    text: qsTr("Rename")
-                    onClicked: renameDialog.accept()
-                }
-
-                HelperWidgets.Button {
-                    text: qsTr("Cancel")
-                    onClicked: renameDialog.reject()
-                }
-            }
-        }
-    }
-
-    StudioControls.Dialog {
-        id: newCollectionDialog
-
-        title: qsTr("Add a new model")
-
-        onOpened: newCollectionName.text = qsTr("Model")
-
-        onAccepted: root.addCollection(newCollectionName.text)
-
-        contentItem: ColumnLayout {
-            spacing: 2
-
-            NameField {
-                text: qsTr("The model name")
-            }
-
-            StudioControls.TextField {
-                id: newCollectionName
-
-                readonly property bool isValid: newCollectionName.text !== "" && !newCollectionName.alreadyExists
-                property bool alreadyExists
-
-                Layout.fillWidth: true
-
-                actionIndicator.visible: false
-                translationIndicator.visible: false
-                validator: RegularExpressionValidator {
-                    regularExpression: /^\w+$/
-                }
-
-                Keys.onEnterPressed: createCollectionButton.onClicked()
-                Keys.onReturnPressed: createCollectionButton.onClicked()
-                Keys.onEscapePressed: newCollectionDialog.reject()
-
-                onTextChanged: newCollectionName.alreadyExists = internalModels.contains(newCollectionName.text)
-            }
-
-            ErrorField {
-                text: qsTr("The model name already exists %1").arg(newCollectionName.text)
-                visible: newCollectionName.alreadyExists
-            }
-
-            Spacer{}
-
-            RowLayout {
-                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-                spacing: StudioTheme.Values.sectionRowSpacing
-
-                HelperWidgets.Button {
-                    id: createCollectionButton
-
-                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-                    text: qsTr("Add")
-                    enabled: newCollectionName.isValid
-                    onClicked: newCollectionDialog.accept()
-                }
-
-                HelperWidgets.Button {
-                    text: qsTr("Cancel")
-                    onClicked: newCollectionDialog.reject()
-                }
-            }
-        }
-    }
-
-    RegularExpressionValidator {
-        id: newNameValidator
-        regularExpression: /^\w+$/
-    }
-
-    states: [
-        State {
-            name: "default"
-            when: !sourceIsSelected && !itemMouse.containsMouse
-
-            PropertyChanges {
-                target: innerRect
-                opacity: 0.4
-                color: StudioTheme.Values.themeControlBackground
-            }
-
-            PropertyChanges {
-                target: root
-                textColor: StudioTheme.Values.themeTextColor
-            }
-        },
-        State {
-            name: "hovered"
-            when: !sourceIsSelected && itemMouse.containsMouse
-
-            PropertyChanges {
-                target: innerRect
-                opacity: 0.5
-                color: StudioTheme.Values.themeControlBackgroundHover
-            }
-
-            PropertyChanges {
-                target: root
-                textColor: StudioTheme.Values.themeTextColor
-            }
-        },
-        State {
-            name: "selected"
-            when: sourceIsSelected
-
-            PropertyChanges {
-                target: innerRect
-                opacity: 0.6
-                color: StudioTheme.Values.themeControlBackgroundInteraction
-            }
-
-            PropertyChanges {
-                target: root
-                textColor: StudioTheme.Values.themeIconColorSelected
-                expanded: true
-            }
-
-            PropertyChanges {
-                target: expandButton
-                enabled: false
-            }
-        }
-    ]
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml

@@ -242,6 +242,11 @@ QtObject {
     property real dialogButtonSpacing: 10
     property real dialogButtonPadding: 4
 
+    // Collection Editor
+    property real collectionItemTextSideMargin: 10
+    property real collectionItemTextMargin: 5
+    property real collectionItemTextPadding: 5
+
     // NEW NEW NEW
     readonly property int flowMargin: 7
     readonly property int flowSpacing: 7 // Odd so cursor has a center location