QmlDesigner: Remove the collection name from CollectionDetailsView

* The collection name is removed
* Icon sizes follow the style
* The new toolbar has a background color
* Margins are modified
* An alignment bug is fixed
* HelperWidgets.AbstractButton is used instead of
HelperWidgets.IconButton

Task-number: QDS-11647
Change-Id: I9f8c9ddb3da07a90fcf9523533f9e71f4fcc881b
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>

share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml

@@ -10,15 +10,15 @@ import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 import CollectionEditorBackend
 
-Item {
+Rectangle {
     id: root
 
-    property real iconHeight: 2 * StudioTheme.Values.bigFont
     required property var model
     required property var backend
     property int selectedRow: -1
 
-    implicitHeight: container.height
+    implicitHeight: StudioTheme.Values.toolbarHeight
+    color: StudioTheme.Values.themeToolbarBackground
 
     function addNewColumn() {
         addColumnDialog.popUp(root.model.columnCount())
@@ -30,32 +30,37 @@ Item {
 
     RowLayout {
         id: container
-        width: parent.width
+
+        anchors.fill: parent
+        anchors.topMargin: StudioTheme.Values.toolbarVerticalMargin
+        anchors.bottomMargin: StudioTheme.Values.toolbarVerticalMargin
+        anchors.leftMargin: StudioTheme.Values.toolbarHorizontalMargin
+        anchors.rightMargin: StudioTheme.Values.toolbarHorizontalMargin
 
         spacing: StudioTheme.Values.sectionRowSpacing
 
         RowLayout {
             id: leftSideToolbar
 
-            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
             spacing: StudioTheme.Values.sectionRowSpacing
 
             IconButton {
-                icon: StudioTheme.Constants.addcolumnleft_medium
+                buttonIcon: StudioTheme.Constants.addcolumnleft_medium
                 tooltip: qsTr("Add property left %1").arg(leftSideToolbar.topPadding)
                 enabled: root.model.selectedColumn > -1
                 onClicked: addColumnDialog.popUp(root.model.selectedColumn - 1)
             }
 
             IconButton {
-                icon: StudioTheme.Constants.addcolumnright_medium
+                buttonIcon: StudioTheme.Constants.addcolumnright_medium
                 tooltip: qsTr("Add property right")
                 enabled: root.model.selectedColumn > -1
                 onClicked: addColumnDialog.popUp(root.model.selectedColumn + 1)
             }
 
             IconButton {
-                icon: StudioTheme.Constants.deletecolumn_medium
+                buttonIcon: StudioTheme.Constants.deletecolumn_medium
                 tooltip: qsTr("Delete selected property")
                 enabled: root.model.selectedColumn > -1
                 onClicked: root.model.removeColumn(root.model.selectedColumn)
@@ -67,21 +72,21 @@ Item {
             }
 
             IconButton {
-                icon: StudioTheme.Constants.addrowbelow_medium
+                buttonIcon: StudioTheme.Constants.addrowbelow_medium
                 tooltip: qsTr("Insert row below")
                 enabled: root.model.selectedRow > -1
                 onClicked: root.model.insertRow(root.model.selectedRow + 1)
             }
 
             IconButton {
-                icon: StudioTheme.Constants.addrowabove_medium
+                buttonIcon: StudioTheme.Constants.addrowabove_medium
                 tooltip: qsTr("Insert row above")
                 enabled: root.model.selectedRow > -1
                 onClicked: root.model.insertRow(root.model.selectedRow)
             }
 
             IconButton {
-                icon: StudioTheme.Constants.deleterow_medium
+                buttonIcon: StudioTheme.Constants.deleterow_medium
                 tooltip: qsTr("Delete selected row")
                 enabled: root.model.selectedRow > -1
                 onClicked: root.model.removeRow(root.model.selectedRow)
@@ -96,17 +101,17 @@ Item {
         RowLayout {
             id: rightSideToolbar
             spacing: StudioTheme.Values.sectionRowSpacing
-            Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+            Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
 
             IconButton {
-                icon: StudioTheme.Constants.save_medium
+                buttonIcon: StudioTheme.Constants.save_medium
                 tooltip: qsTr("Save changes")
                 enabled: root.model.collectionName !== ""
                 onClicked: root.model.saveDataStoreCollections()
             }
 
             IconButton {
-                icon: StudioTheme.Constants.export_medium
+                buttonIcon: StudioTheme.Constants.export_medium
                 tooltip: qsTr("Export model")
                 enabled: root.model.collectionName !== ""
                 onClicked: fileDialog.open()
@@ -131,11 +136,8 @@ Item {
         }
     }
 
-    component IconButton: HelperWidgets.IconButton {
+    component IconButton: HelperWidgets.AbstractButton {
-        Layout.preferredHeight: root.iconHeight
+        style: StudioTheme.Values.viewBarButtonStyle
-        Layout.preferredWidth: root.iconHeight
-        radius: StudioTheme.Values.smallRadius
-        iconSize: StudioTheme.Values.bigFont
     }
 
     component Spacer: Item {

share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml

@@ -23,35 +23,10 @@ Rectangle {
     ColumnLayout {
         id: topRow
 
-        visible: collectionNameText.text !== ""
+        visible: root.model.collectionName !== ""
 
         spacing: 0
-        anchors {
+        anchors.fill: parent
-            fill: parent
-            topMargin: 10
-            leftMargin: 15
-            rightMargin: 15
-            bottomMargin: 10
-        }
-
-        Text {
-            id: collectionNameText
-
-            leftPadding: 8
-            rightPadding: 8
-            topPadding: 3
-            bottomPadding: 3
-
-            color: StudioTheme.Values.themeTextColor
-            text: root.model.collectionName
-            font.pixelSize: StudioTheme.Values.baseFontSize
-            elide: Text.ElideRight
-        }
-
-        Item { // spacer
-            implicitWidth: 1
-            implicitHeight: 10
-        }
 
         CollectionDetailsToolbar {
             id: toolbar
@@ -71,6 +46,8 @@ Rectangle {
             rowSpacing: 1
             columnSpacing: 1
 
+            Layout.margins: StudioTheme.Values.collectionTableHorizontalMargin
+
             Layout.fillWidth: true
             Layout.fillHeight: true
             Layout.maximumWidth: parent.width

share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml

@@ -49,6 +49,9 @@ Item {
         id: grid
         readonly property bool isHorizontal: width >= 500
 
+        columnSpacing: 0
+        rowSpacing: 0
+
         anchors.fill: parent
         columns: isHorizontal ? 3 : 1
 
@@ -62,6 +65,7 @@ Item {
 
             Rectangle {
                 color: StudioTheme.Values.themeToolbarBackground
+
                 Layout.preferredHeight: StudioTheme.Values.toolbarHeight
                 Layout.fillWidth: true
 

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

@@ -246,6 +246,7 @@ QtObject {
     property real collectionItemTextSideMargin: 10
     property real collectionItemTextMargin: 5
     property real collectionItemTextPadding: 5
+    property real collectionTableHorizontalMargin: 10
 
     // NEW NEW NEW
     readonly property int flowMargin: 7