QmlDesigner: Polish the ui of the Model Editor

- The main toolbar of the Model editor is aligned with the rest
  of the ui
- Update/Save icon is updated
- Tooltips for save and export actions are modified
- Minimum size for the Model editor is applied

Fixes: QDS-11449
Fixes: QDS-11244
Change-Id: Ice389ae439ac855eb3a5d3197a2365e6d2506a90
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
(cherry picked from commit f7ecfedba0381cf3362f8e95ab74c14552d4d99c)
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

3 files changed, 18 insertions, 14 deletions

diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml
index e627a6b6db..78a8152a76 100644
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsToolbar.qml
@@ -99,15 +99,15 @@ Item {
             Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
 
             IconButton {
-                icon: StudioTheme.Constants.updateContent_medium
-                tooltip: qsTr("Update existing file with changes")
+                icon: StudioTheme.Constants.save_medium
+                tooltip: qsTr("Save changes")
                 enabled: root.model.collectionName !== ""
                 onClicked: root.model.saveCurrentCollection()
             }
 
             IconButton {
                 icon: StudioTheme.Constants.export_medium
-                tooltip: qsTr("Export the model to a new file")
+                tooltip: qsTr("Export model")
                 enabled: root.model.collectionName !== ""
                 onClicked: fileDialog.open()
             }
diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml
index 95ef2b4b78..32f71cc231 100644
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml
@@ -55,32 +55,35 @@ Item {
 
         ColumnLayout {
             id: collectionsSideBar
+            spacing: 0
 
             Layout.alignment: Qt.AlignTop | Qt.AlignLeft
             Layout.minimumWidth: 300
             Layout.fillWidth: !grid.isHorizontal
 
-            RowLayout {
-                spacing: StudioTheme.Values.sectionRowSpacing
+            Rectangle {
+                color: StudioTheme.Values.themeToolbarBackground
+                Layout.preferredHeight: StudioTheme.Values.toolbarHeight
                 Layout.fillWidth: true
-                Layout.preferredHeight: 50
 
                 Text {
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-                    Layout.fillWidth: true
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.left: parent.left
+                    anchors.leftMargin: StudioTheme.Values.toolbarHorizontalMargin
 
                     text: qsTr("Data Models")
                     font.pixelSize: StudioTheme.Values.baseFontSize
                     color: StudioTheme.Values.themeTextColor
-                    leftPadding: 15
                 }
 
-                HelperWidgets.IconButton {
-                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                HelperWidgets.AbstractButton {
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.right: parent.right
+                    anchors.rightMargin: StudioTheme.Values.toolbarHorizontalMargin
 
-                    icon: StudioTheme.Constants.import_medium
+                    style: StudioTheme.Values.viewBarButtonStyle
+                    buttonIcon: StudioTheme.Constants.import_medium
                     tooltip: qsTr("Import a model")
-                    radius: StudioTheme.Values.smallRadius
 
                     onClicked: importDialog.open()
                 }
@@ -117,7 +120,7 @@ Item {
             HelperWidgets.IconButton {
                 id: addCollectionButton
 
-                iconSize:16
+                iconSize: 16
                 Layout.fillWidth: true
                 Layout.minimumWidth: 24
                 Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
diff --git a/src/plugins/qmldesigner/components/collectioneditor/collectionview.cpp b/src/plugins/qmldesigner/components/collectioneditor/collectionview.cpp
index f6a24280d1..9140f02ec5 100644
--- a/src/plugins/qmldesigner/components/collectioneditor/collectionview.cpp
+++ b/src/plugins/qmldesigner/components/collectioneditor/collectionview.cpp
@@ -61,6 +61,7 @@ QmlDesigner::WidgetInfo CollectionView::widgetInfo()
 {
     if (m_widget.isNull()) {
         m_widget = new CollectionWidget(this);
+        m_widget->setMinimumSize(m_widget->minimumSizeHint());
 
         auto collectionEditorContext = new Internal::CollectionEditorContext(m_widget.data());
         Core::ICore::addContextObject(collectionEditorContext);