QmlDesigner: Consider responsive size for the CollectionView

Task-number: QDS-11037 Change-Id: Ida49ccf67e6aeb943087b2f51a168f98053c838e Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io> Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
2023-10-24 15:24:09 +03:00
parent dca7f6121c
commit eae92fd247
6 changed files with 113 additions and 96 deletions
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
@@ -15,7 +15,7 @@ Rectangle {
    required property var backend
    required property var sortedModel

-    implicitWidth: 600
+    implicitWidth: 300
    implicitHeight: 400

    color: StudioTheme.Values.themeBackgroundColorAlternate
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml
@@ -3,7 +3,7 @@

 import QtQuick
 import QtQuick.Controls
-import Qt.labs.platform as PlatformWidgets
+import QtQuick.Layouts
 import HelperWidgets 2.0 as HelperWidgets
 import StudioControls 1.0 as StudioControls
 import StudioTheme as StudioTheme
@@ -12,7 +12,7 @@ Item {
    id: root

    implicitWidth: 300
-    implicitHeight: innerRect.height + 6
+    implicitHeight: innerRect.height + 3

    property color textColor

@@ -23,7 +23,7 @@ Item {
        id: boundingRect

        anchors.centerIn: root
-        width: root.width - 24
+        width: parent.width
        height: nameHolder.height
        clip: true

@@ -47,21 +47,23 @@ Item {
            anchors.fill: parent
        }

-        Row {
-            width: parent.width - threeDots.width
-            leftPadding: 20
+        RowLayout {
+            width: parent.width

            Text {
                id: moveTool

                property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle

-                width: moveTool.style.squareControlSize.width
-                height: nameHolder.height
+                Layout.preferredWidth: moveTool.style.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.style.baseIconFontSize
+                color: root.textColor
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
@@ -69,9 +71,12 @@ Item {
            Text {
                id: nameHolder

+                Layout.fillWidth: true
+                Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
+
                text: collectionName
                font.pixelSize: StudioTheme.Values.baseFontSize
-                color: textColor
+                color: root.textColor
                leftPadding: 5
                topPadding: 8
                rightPadding: 8
@@ -79,43 +84,42 @@ Item {
                elide: Text.ElideMiddle
                verticalAlignment: Text.AlignVCenter
            }
-        }

-        Text {
-            id: threeDots
+            Text {
+                id: threeDots

-            text: StudioTheme.Constants.more_medium
-            font.family: StudioTheme.Constants.iconFont.family
-            font.pixelSize: StudioTheme.Values.baseIconFontSize
-            color: textColor
-            anchors.right: boundingRect.right
-            anchors.verticalCenter: parent.verticalCenter
-            rightPadding: 12
-            topPadding: nameHolder.topPadding
-            bottomPadding: nameHolder.bottomPadding
-            verticalAlignment: Text.AlignVCenter
+                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
+                text: StudioTheme.Constants.more_medium
+                font.family: StudioTheme.Constants.iconFont.family
+                font.pixelSize: StudioTheme.Values.baseIconFontSize
+                color: root.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: (event) => {
-                    collectionMenu.open()
-                    event.accepted = true
+                MouseArea {
+                    anchors.fill: parent
+                    acceptedButtons: Qt.RightButton | Qt.LeftButton
+                    onClicked: collectionMenu.popup()
                }
            }
        }
    }

-    PlatformWidgets.Menu {
+    StudioControls.Menu {
        id: collectionMenu

-        PlatformWidgets.MenuItem {
+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+
+        StudioControls.MenuItem {
            text: qsTr("Delete")
            shortcut: StandardKey.Delete
            onTriggered: deleteDialog.open()
        }

-        PlatformWidgets.MenuItem {
+        StudioControls.MenuItem {
            text: qsTr("Rename")
            shortcut: StandardKey.Replace
            onTriggered: renameDialog.open()
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml
@@ -3,6 +3,7 @@

 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import QtQuickDesignerTheme 1.0
 import HelperWidgets 2.0 as HelperWidgets
 import StudioTheme 1.0 as StudioTheme
@@ -52,19 +53,23 @@ Item {
        message: ""
    }

-    Rectangle {
-        id: collectionsRect
+    GridLayout {
+        id: grid
+        readonly property bool isHorizontal: width >= 500

-        color: StudioTheme.Values.themeToolbarBackground
-        width: 300
-        height: root.height
+        anchors.fill: parent
+        columns: isHorizontal ? 2 : 1

-        Column {
-            width: parent.width
+        ColumnLayout {
+            id: collectionsSideBar
+
+            Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+            Layout.minimumWidth: 300
+            Layout.fillWidth: !grid.isHorizontal

            Rectangle {
-                width: parent.width
-                height: StudioTheme.Values.height + 5
+                Layout.fillWidth: true
+                Layout.preferredHeight: StudioTheme.Values.height + 5
                color: StudioTheme.Values.themeToolbarBackground

                Text {
@@ -100,9 +105,10 @@ Item {
            }

            Rectangle { // Collections
-                width: parent.width
+                Layout.fillWidth: true
                color: StudioTheme.Values.themeBackgroundColorNormal
-                height: 330
+                Layout.minimumHeight: 150
+                Layout.preferredHeight: sourceListView.contentHeight

                MouseArea {
                    anchors.fill: parent
@@ -116,20 +122,19 @@ Item {
                ListView {
                    id: sourceListView

-                    width: parent.width
-                    height: contentHeight
+                    anchors.fill: parent
                    model: root.model

                    delegate: ModelSourceItem {
+                        implicitWidth: sourceListView.width
                        onDeleteItem: root.model.removeRow(index)
                    }
-
                }
            }

            Rectangle {
-                width: parent.width
-                height: addCollectionButton.height
+                Layout.fillWidth: true
+                Layout.preferredHeight: addCollectionButton.height
                color: StudioTheme.Values.themeBackgroundColorNormal

                IconTextButton {
@@ -142,17 +147,13 @@ Item {
                }
            }
        }
-    }

-    CollectionDetailsView {
-        model: root.collectionDetailsModel
-        backend: root.model
-        sortedModel: root.collectionDetailsSortFilterModel
-        anchors {
-            left: collectionsRect.right
-            right: parent.right
-            top: parent.top
-            bottom: parent.bottom
+        CollectionDetailsView {
+            model: root.collectionDetailsModel
+            backend: root.model
+            sortedModel: root.collectionDetailsSortFilterModel
+            Layout.fillHeight: true
+            Layout.fillWidth: true
        }
    }
 }
--- a/share/qtcreator/qmldesigner/collectionEditorQmlSource/ModelSourceItem.qml
+++ b/share/qtcreator/qmldesigner/collectionEditorQmlSource/ModelSourceItem.qml
@@ -3,6 +3,7 @@

 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import HelperWidgets 2.0 as HelperWidgets
 import StudioControls 1.0 as StudioControls
 import StudioTheme as StudioTheme
@@ -11,7 +12,7 @@ Item {
    id: root

    implicitWidth: 300
-    implicitHeight: wholeColumn.height + 6
+    implicitHeight: wholeColumn.height

    property color textColor
    property var collectionModel
@@ -26,15 +27,17 @@ Item {
            root.expanded = !root.expanded || sourceIsSelected;
    }

-    Column {
+    ColumnLayout {
        id: wholeColumn
+        width: parent.width
+        spacing: 0

        Item {
            id: boundingRect

-            anchors.centerIn: root
-            width: root.width - 24
-            height: nameHolder.height
+            Layout.fillWidth: true
+            Layout.preferredHeight: nameHolder.height
+            Layout.leftMargin: 6
            clip: true

            MouseArea {
@@ -62,17 +65,17 @@ Item {
                anchors.fill: parent
            }

-            Row {
-                width: parent.width - threeDots.width
-                leftPadding: 20
+            RowLayout {
+                width: parent.width

                Text {
                    id: expandButton

                    property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle

-                    width: expandButton.style.squareControlSize.width
-                    height: nameHolder.height
+                    Layout.preferredWidth: expandButton.style.squareControlSize.width
+                    Layout.preferredHeight: nameHolder.height
+                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter

                    text: StudioTheme.Constants.startNode
                    font.family: StudioTheme.Constants.iconFont.family
@@ -90,17 +93,17 @@ Item {

                    MouseArea {
                        anchors.fill: parent
-                        acceptedButtons: Qt.RightButton + Qt.LeftButton
-                        onClicked: (event) => {
-                            root.toggleExpanded()
-                            event.accepted = true
-                        }
+                        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
@@ -109,30 +112,29 @@ Item {
                    rightPadding: 8
                    bottomPadding: 8
                    elide: Text.ElideMiddle
+                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                }
-            }

-            Text {
-                id: threeDots
+                Text {
+                    id: threeDots

-                text: StudioTheme.Constants.more_medium
-                font.family: StudioTheme.Constants.iconFont.family
-                font.pixelSize: StudioTheme.Values.baseIconFontSize
-                color: textColor
-                anchors.right: boundingRect.right
-                anchors.verticalCenter: parent.verticalCenter
-                rightPadding: 12
-                topPadding: nameHolder.topPadding
-                bottomPadding: nameHolder.bottomPadding
-                verticalAlignment: Text.AlignVCenter
+                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter

-                MouseArea {
-                    anchors.fill: parent
-                    acceptedButtons: Qt.RightButton + Qt.LeftButton
-                    onClicked: (event) => {
-                        collectionMenu.popup()
-                        event.accepted = true
+                    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()
                    }
                }
            }
@@ -141,17 +143,18 @@ Item {
        ListView {
            id: collectionListView

-            width: parent.width
-            height: root.expanded ? contentHeight : 0
+            Layout.fillWidth: true
+            Layout.preferredHeight: root.expanded ? contentHeight : 0
+            Layout.leftMargin: 6
            model: collections
            clip: true

-            Behavior on height {
+            Behavior on Layout.preferredHeight {
                NumberAnimation {duration: 500}
            }

            delegate: CollectionItem {
-                width: parent.width
+                width: collectionListView.width
                onDeleteItem: root.model.removeRow(index)
            }
        }
@@ -160,6 +163,8 @@ Item {
    StudioControls.Menu {
        id: collectionMenu

+        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
+
        StudioControls.MenuItem {
            text: qsTr("Delete")
            shortcut: StandardKey.Delete
--- a/src/plugins/qmldesigner/components/collectioneditor/collectionwidget.cpp
+++ b/src/plugins/qmldesigner/components/collectioneditor/collectionwidget.cpp
@@ -129,6 +129,11 @@ void CollectionWidget::reloadQmlSource()
    m_quickWidget->setSource(QUrl::fromLocalFile(collectionViewQmlPath));
 }

+QSize CollectionWidget::minimumSizeHint() const
+{
+    return {300, 400};
+}
+
 bool CollectionWidget::loadJsonFile(const QString &jsonFileAddress)
 {
    if (!isJsonFile(jsonFileAddress))
--- a/src/plugins/qmldesigner/components/collectioneditor/collectionwidget.h
+++ b/src/plugins/qmldesigner/components/collectioneditor/collectionwidget.h
@@ -30,6 +30,8 @@ public:

    void reloadQmlSource();

+    virtual QSize minimumSizeHint() const;
+
    Q_INVOKABLE bool loadJsonFile(const QString &jsonFileAddress);
    Q_INVOKABLE bool loadCsvFile(const QString &collectionName, const QString &csvFileAddress);
    Q_INVOKABLE bool isJsonFile(const QString &jsonFileAddress) const;