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>
This commit is contained in:
Ali Kianian
2024-01-19 17:58:25 +02:00
parent 875053cbaa
commit 8238764dcd
4 changed files with 30 additions and 46 deletions

View File

@@ -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 {
Layout.preferredHeight: root.iconHeight
Layout.preferredWidth: root.iconHeight
radius: StudioTheme.Values.smallRadius
iconSize: StudioTheme.Values.bigFont
component IconButton: HelperWidgets.AbstractButton {
style: StudioTheme.Values.viewBarButtonStyle
}
component Spacer: Item {

View File

@@ -23,35 +23,10 @@ Rectangle {
ColumnLayout {
id: topRow
visible: collectionNameText.text !== ""
visible: root.model.collectionName !== ""
spacing: 0
anchors {
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
}
anchors.fill: parent
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

View File

@@ -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

View File

@@ -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