diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml index 192d027e635..9bd6d23f63c 100644 --- 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 diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml index a92cdf065d8..5ce42d0a901 100644 --- 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() diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml index 4b2708e96ca..4903913b7c0 100644 --- 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 } } } diff --git a/share/qtcreator/qmldesigner/collectionEditorQmlSource/ModelSourceItem.qml b/share/qtcreator/qmldesigner/collectionEditorQmlSource/ModelSourceItem.qml index ef609e7f2be..74cc718a6b0 100644 --- 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 diff --git a/src/plugins/qmldesigner/components/collectioneditor/collectionwidget.cpp b/src/plugins/qmldesigner/components/collectioneditor/collectionwidget.cpp index 7811ee622cd..2cb09044be1 100644 --- 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)) diff --git a/src/plugins/qmldesigner/components/collectioneditor/collectionwidget.h b/src/plugins/qmldesigner/components/collectioneditor/collectionwidget.h index f1e3e232e89..f902c86c226 100644 --- 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;