feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Consider responsive size for the CollectionView

Browse Source 
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>
This commit is contained in:
Ali Kianian
2023-10-24 15:24:09 +03:00
parent dca7f6121c
commit eae92fd247
6 changed files with 113 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionDetailsView.qml
View File

@@ -15,7 +15,7 @@ Rectangle {
required property var backend required property var backend
required property var sortedModel required property var sortedModel
implicitWidth: 600 implicitWidth: 300
implicitHeight: 400 implicitHeight: 400
color: StudioTheme.Values.themeBackgroundColorAlternate color: StudioTheme.Values.themeBackgroundColorAlternate

66
share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionItem.qml
View File

@@ -3,7 +3,7 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import Qt.labs.platform as PlatformWidgets import QtQuick.Layouts
import HelperWidgets 2.0 as HelperWidgets import HelperWidgets 2.0 as HelperWidgets
import StudioControls 1.0 as StudioControls import StudioControls 1.0 as StudioControls
import StudioTheme as StudioTheme import StudioTheme as StudioTheme
@@ -12,7 +12,7 @@ Item {
id: root id: root
implicitWidth: 300 implicitWidth: 300
implicitHeight: innerRect.height + 6 implicitHeight: innerRect.height + 3
property color textColor property color textColor
@@ -23,7 +23,7 @@ Item {
id: boundingRect id: boundingRect
anchors.centerIn: root anchors.centerIn: root
width: root.width - 24 width: parent.width
height: nameHolder.height height: nameHolder.height
clip: true clip: true
@@ -47,21 +47,23 @@ Item {
anchors.fill: parent anchors.fill: parent
} }
Row { RowLayout {
width: parent.width - threeDots.width width: parent.width
leftPadding: 20
Text { Text {
id: moveTool id: moveTool
property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle
width: moveTool.style.squareControlSize.width Layout.preferredWidth: moveTool.style.squareControlSize.width
height: nameHolder.height Layout.preferredHeight: nameHolder.height
Layout.leftMargin: 12
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
text: StudioTheme.Constants.dragmarks text: StudioTheme.Constants.dragmarks
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: moveTool.style.baseIconFontSize font.pixelSize: moveTool.style.baseIconFontSize
color: root.textColor
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
@@ -69,9 +71,12 @@ Item {
Text { Text {
id: nameHolder id: nameHolder
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
text: collectionName text: collectionName
font.pixelSize: StudioTheme.Values.baseFontSize font.pixelSize: StudioTheme.Values.baseFontSize
color: textColor color: root.textColor
leftPadding: 5 leftPadding: 5
topPadding: 8 topPadding: 8
rightPadding: 8 rightPadding: 8
@@ -79,43 +84,42 @@ Item {
elide: Text.ElideMiddle elide: Text.ElideMiddle
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
}
Text { Text {
id: threeDots id: threeDots
text: StudioTheme.Constants.more_medium Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
font.family: StudioTheme.Constants.iconFont.family text: StudioTheme.Constants.more_medium
font.pixelSize: StudioTheme.Values.baseIconFontSize font.family: StudioTheme.Constants.iconFont.family
color: textColor font.pixelSize: StudioTheme.Values.baseIconFontSize
anchors.right: boundingRect.right color: root.textColor
anchors.verticalCenter: parent.verticalCenter rightPadding: 12
rightPadding: 12 topPadding: nameHolder.topPadding
topPadding: nameHolder.topPadding bottomPadding: nameHolder.bottomPadding
bottomPadding: nameHolder.bottomPadding horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
acceptedButtons: Qt.RightButton + Qt.LeftButton acceptedButtons: Qt.RightButton | Qt.LeftButton
onClicked: (event) => { onClicked: collectionMenu.popup()
collectionMenu.open()
event.accepted = true
} }
} }
} }
} }
PlatformWidgets.Menu { StudioControls.Menu {
id: collectionMenu id: collectionMenu
PlatformWidgets.MenuItem { closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
StudioControls.MenuItem {
text: qsTr("Delete") text: qsTr("Delete")
shortcut: StandardKey.Delete shortcut: StandardKey.Delete
onTriggered: deleteDialog.open() onTriggered: deleteDialog.open()
} }
PlatformWidgets.MenuItem { StudioControls.MenuItem {
text: qsTr("Rename") text: qsTr("Rename")
shortcut: StandardKey.Replace shortcut: StandardKey.Replace
onTriggered: renameDialog.open() onTriggered: renameDialog.open()

53
share/qtcreator/qmldesigner/collectionEditorQmlSource/CollectionView.qml
View File

@@ -3,6 +3,7 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts
import QtQuickDesignerTheme 1.0 import QtQuickDesignerTheme 1.0
import HelperWidgets 2.0 as HelperWidgets import HelperWidgets 2.0 as HelperWidgets
import StudioTheme 1.0 as StudioTheme import StudioTheme 1.0 as StudioTheme
@@ -52,19 +53,23 @@ Item {
message: "" message: ""
} }
Rectangle { GridLayout {
id: collectionsRect id: grid
readonly property bool isHorizontal: width >= 500
color: StudioTheme.Values.themeToolbarBackground anchors.fill: parent
width: 300 columns: isHorizontal ? 2 : 1
height: root.height
Column { ColumnLayout {
width: parent.width id: collectionsSideBar
Layout.alignment: Qt.AlignTop | Qt.AlignLeft
Layout.minimumWidth: 300
Layout.fillWidth: !grid.isHorizontal
Rectangle { Rectangle {
width: parent.width Layout.fillWidth: true
height: StudioTheme.Values.height + 5 Layout.preferredHeight: StudioTheme.Values.height + 5
color: StudioTheme.Values.themeToolbarBackground color: StudioTheme.Values.themeToolbarBackground
Text { Text {
@@ -100,9 +105,10 @@ Item {
} }
Rectangle { // Collections Rectangle { // Collections
width: parent.width Layout.fillWidth: true
color: StudioTheme.Values.themeBackgroundColorNormal color: StudioTheme.Values.themeBackgroundColorNormal
height: 330 Layout.minimumHeight: 150
Layout.preferredHeight: sourceListView.contentHeight
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@@ -116,20 +122,19 @@ Item {
ListView { ListView {
id: sourceListView id: sourceListView
width: parent.width anchors.fill: parent
height: contentHeight
model: root.model model: root.model
delegate: ModelSourceItem { delegate: ModelSourceItem {
implicitWidth: sourceListView.width
onDeleteItem: root.model.removeRow(index) onDeleteItem: root.model.removeRow(index)
} }
} }
} }
Rectangle { Rectangle {
width: parent.width Layout.fillWidth: true
height: addCollectionButton.height Layout.preferredHeight: addCollectionButton.height
color: StudioTheme.Values.themeBackgroundColorNormal color: StudioTheme.Values.themeBackgroundColorNormal
IconTextButton { IconTextButton {
@@ -142,17 +147,13 @@ Item {
} }
} }
} }
}
CollectionDetailsView { CollectionDetailsView {
model: root.collectionDetailsModel model: root.collectionDetailsModel
backend: root.model backend: root.model
sortedModel: root.collectionDetailsSortFilterModel sortedModel: root.collectionDetailsSortFilterModel
anchors { Layout.fillHeight: true
left: collectionsRect.right Layout.fillWidth: true
right: parent.right
top: parent.top
bottom: parent.bottom
} }
} }
} }

81
share/qtcreator/qmldesigner/collectionEditorQmlSource/ModelSourceItem.qml
View File

@@ -3,6 +3,7 @@
import QtQuick import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts
import HelperWidgets 2.0 as HelperWidgets import HelperWidgets 2.0 as HelperWidgets
import StudioControls 1.0 as StudioControls import StudioControls 1.0 as StudioControls
import StudioTheme as StudioTheme import StudioTheme as StudioTheme
@@ -11,7 +12,7 @@ Item {
id: root id: root
implicitWidth: 300 implicitWidth: 300
implicitHeight: wholeColumn.height + 6 implicitHeight: wholeColumn.height
property color textColor property color textColor
property var collectionModel property var collectionModel
@@ -26,15 +27,17 @@ Item {
root.expanded = !root.expanded || sourceIsSelected; root.expanded = !root.expanded || sourceIsSelected;
} }
Column { ColumnLayout {
id: wholeColumn id: wholeColumn
width: parent.width
spacing: 0
Item { Item {
id: boundingRect id: boundingRect
anchors.centerIn: root Layout.fillWidth: true
width: root.width - 24 Layout.preferredHeight: nameHolder.height
height: nameHolder.height Layout.leftMargin: 6
clip: true clip: true
MouseArea { MouseArea {
@@ -62,17 +65,17 @@ Item {
anchors.fill: parent anchors.fill: parent
} }
Row { RowLayout {
width: parent.width - threeDots.width width: parent.width
leftPadding: 20
Text { Text {
id: expandButton id: expandButton
property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle
width: expandButton.style.squareControlSize.width Layout.preferredWidth: expandButton.style.squareControlSize.width
height: nameHolder.height Layout.preferredHeight: nameHolder.height
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
text: StudioTheme.Constants.startNode text: StudioTheme.Constants.startNode
font.family: StudioTheme.Constants.iconFont.family font.family: StudioTheme.Constants.iconFont.family
@@ -90,17 +93,17 @@ Item {
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
acceptedButtons: Qt.RightButton + Qt.LeftButton acceptedButtons: Qt.RightButton | Qt.LeftButton
onClicked: (event) => { onClicked: root.toggleExpanded()
root.toggleExpanded()
event.accepted = true
}
} }
} }
Text { Text {
id: nameHolder id: nameHolder
Layout.fillWidth: true
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
text: sourceName text: sourceName
font.pixelSize: StudioTheme.Values.baseFontSize font.pixelSize: StudioTheme.Values.baseFontSize
color: textColor color: textColor
@@ -109,30 +112,29 @@ Item {
rightPadding: 8 rightPadding: 8
bottomPadding: 8 bottomPadding: 8
elide: Text.ElideMiddle elide: Text.ElideMiddle
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
} }
}
Text { Text {
id: threeDots id: threeDots
text: StudioTheme.Constants.more_medium Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
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
MouseArea { text: StudioTheme.Constants.more_medium
anchors.fill: parent font.family: StudioTheme.Constants.iconFont.family
acceptedButtons: Qt.RightButton + Qt.LeftButton font.pixelSize: StudioTheme.Values.baseIconFontSize
onClicked: (event) => { color: textColor
collectionMenu.popup() rightPadding: 12
event.accepted = true 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 { ListView {
id: collectionListView id: collectionListView
width: parent.width Layout.fillWidth: true
height: root.expanded ? contentHeight : 0 Layout.preferredHeight: root.expanded ? contentHeight : 0
Layout.leftMargin: 6
model: collections model: collections
clip: true clip: true
Behavior on height { Behavior on Layout.preferredHeight {
NumberAnimation {duration: 500} NumberAnimation {duration: 500}
} }
delegate: CollectionItem { delegate: CollectionItem {
width: parent.width width: collectionListView.width
onDeleteItem: root.model.removeRow(index) onDeleteItem: root.model.removeRow(index)
} }
} }
@@ -160,6 +163,8 @@ Item {
StudioControls.Menu { StudioControls.Menu {
id: collectionMenu id: collectionMenu
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
StudioControls.MenuItem { StudioControls.MenuItem {
text: qsTr("Delete") text: qsTr("Delete")
shortcut: StandardKey.Delete shortcut: StandardKey.Delete

5
src/plugins/qmldesigner/components/collectioneditor/collectionwidget.cpp
View File

@@ -129,6 +129,11 @@ void CollectionWidget::reloadQmlSource()
m_quickWidget->setSource(QUrl::fromLocalFile(collectionViewQmlPath)); m_quickWidget->setSource(QUrl::fromLocalFile(collectionViewQmlPath));
} }
QSize CollectionWidget::minimumSizeHint() const
{
return {300, 400};
}
bool CollectionWidget::loadJsonFile(const QString &jsonFileAddress) bool CollectionWidget::loadJsonFile(const QString &jsonFileAddress)
{ {
if (!isJsonFile(jsonFileAddress)) if (!isJsonFile(jsonFileAddress))

2
src/plugins/qmldesigner/components/collectioneditor/collectionwidget.h
View File

@@ -30,6 +30,8 @@ public:
void reloadQmlSource(); void reloadQmlSource();
virtual QSize minimumSizeHint() const;
Q_INVOKABLE bool loadJsonFile(const QString &jsonFileAddress); Q_INVOKABLE bool loadJsonFile(const QString &jsonFileAddress);
Q_INVOKABLE bool loadCsvFile(const QString &collectionName, const QString &csvFileAddress); Q_INVOKABLE bool loadCsvFile(const QString &collectionName, const QString &csvFileAddress);
Q_INVOKABLE bool isJsonFile(const QString &jsonFileAddress) const; Q_INVOKABLE bool isJsonFile(const QString &jsonFileAddress) const;