forked from qt-creator/qt-creator
Implement new item library UI
- Create a new header qml widget. - Move tabs and filtering search to the header widget. - Add imports/assets using a new "+" button on the tabs. - Remove import flow tag view (still some remainings to be removed in another commit). - Change layout from grid to vbox. - Rename some classes and variables to make them clearer. - New "Add Library" view that replaces the QML imports view (older QML imports classes removed). - Enable Search in the "add import" view. - Hide category header if only 1 category is under an import. - Assorted relevant fixes, tweaks, and clean ups. Task-number: QDS-3589 Change-Id: I710aed50858b32e024200911c6a21fd963e1b692 Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io> Reviewed-by: Henning Gründl <henning.gruendl@qt.io> Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Mahmoud Badri
@@ -27,38 +27,61 @@ import QtQuick 2.15
|
||||
import QtQuick.Layouts 1.15
|
||||
import QtQuickDesignerTheme 1.0
|
||||
import HelperWidgets 2.0
|
||||
import StudioControls 1.0 as StudioControls
|
||||
import StudioTheme 1.0 as StudioTheme
|
||||
|
||||
/* The view displaying the item grid.
|
||||
|
||||
The following Qml context properties have to be set:
|
||||
- listmodel itemLibraryModel
|
||||
- ItemLibraryModel listmodel
|
||||
- int itemLibraryIconWidth
|
||||
- int itemLibraryIconHeight
|
||||
|
||||
itemLibraryModel has to have the following structure:
|
||||
itemLibraryModel structure:
|
||||
|
||||
ListModel {
|
||||
ListElement {
|
||||
int sectionLibId
|
||||
string sectionName
|
||||
list sectionEntries: [
|
||||
ListElement {
|
||||
int itemLibId
|
||||
string itemName
|
||||
pixmap itemPixmap
|
||||
},
|
||||
...
|
||||
itemLibraryModel [
|
||||
ItemLibraryImport {
|
||||
string importName
|
||||
string importUrl
|
||||
bool importVisible
|
||||
bool importUsed
|
||||
bool importExpanded
|
||||
|
||||
list categoryModel [
|
||||
ItemLibraryCategory {
|
||||
string categoryName
|
||||
bool categoryVisible
|
||||
bool categoryExpanded
|
||||
|
||||
list itemModel [
|
||||
ItemLibraryItem {
|
||||
string itemName
|
||||
string itemLibraryIconPath
|
||||
bool itemVisible
|
||||
string componentPath
|
||||
var itemLibraryEntry
|
||||
},
|
||||
... more items
|
||||
]
|
||||
},
|
||||
... more categories
|
||||
]
|
||||
},
|
||||
... more imports
|
||||
]
|
||||
}
|
||||
...
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
ScrollView {
|
||||
id: itemsView
|
||||
|
||||
property string importToRemove: ""
|
||||
|
||||
// called from C++ to close context menu on focus out
|
||||
function closeContextMenu()
|
||||
{
|
||||
contextMenu.close()
|
||||
}
|
||||
|
||||
Item {
|
||||
id: styleConstants
|
||||
property int textWidth: 58
|
||||
@@ -71,35 +94,77 @@ ScrollView {
|
||||
// the following depend on the actual shape of the item delegate
|
||||
property int cellWidth: textWidth + 2 * cellHorizontalMargin
|
||||
property int cellHeight: itemLibraryIconHeight + textHeight +
|
||||
2 * cellVerticalMargin + cellVerticalSpacing
|
||||
2 * cellVerticalMargin + cellVerticalSpacing
|
||||
|
||||
StudioControls.Menu {
|
||||
id: contextMenu
|
||||
|
||||
StudioControls.MenuItem {
|
||||
text: qsTr("Remove Library")
|
||||
enabled: importToRemove !== ""
|
||||
&& importToRemove !== "QtQuick"
|
||||
onTriggered: rootView.removeImport(importToRemove)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: column
|
||||
spacing: 2
|
||||
Repeater {
|
||||
model: itemLibraryModel // to be set in Qml context
|
||||
delegate: Section {
|
||||
width: itemsView.width -
|
||||
(itemsView.verticalScrollBarVisible ? StudioTheme.Values.scrollBarThickness : 0)
|
||||
caption: sectionName // to be set by model
|
||||
visible: sectionVisible
|
||||
topPadding: 2
|
||||
leftPadding: 2
|
||||
rightPadding: 1
|
||||
expanded: sectionExpanded
|
||||
onExpandedChanged: itemLibraryModel.setExpanded(expanded, sectionName);
|
||||
Grid {
|
||||
id: itemGrid
|
||||
|
||||
columns: parent.width / styleConstants.cellWidth
|
||||
property int flexibleWidth: (parent.width - styleConstants.cellWidth * columns) / columns
|
||||
(itemsView.verticalScrollBarVisible ? itemsView.verticalThickness : 0)
|
||||
caption: importName
|
||||
visible: importVisible
|
||||
sectionHeight: 30
|
||||
sectionFontSize: 15
|
||||
showArrow: categoryModel.rowCount() > 0
|
||||
leftPadding: 0
|
||||
rightPadding: 0
|
||||
topPadding: 0
|
||||
bottomPadding: 0
|
||||
expanded: importExpanded
|
||||
onExpandedChanged: itemLibraryModel.setExpanded(expanded, importUrl);
|
||||
onShowContextMenu: {
|
||||
importToRemove = importUsed ? "" : importUrl
|
||||
contextMenu.popup()
|
||||
}
|
||||
|
||||
Column {
|
||||
spacing: 2
|
||||
Repeater {
|
||||
model: sectionEntries
|
||||
delegate: ItemDelegate {
|
||||
visible: itemVisible
|
||||
width: styleConstants.cellWidth + itemGrid.flexibleWidth
|
||||
height: styleConstants.cellHeight
|
||||
model: categoryModel
|
||||
delegate: Section {
|
||||
width: itemsView.width -
|
||||
(itemsView.verticalScrollBarVisible ? itemsView.verticalThickness : 0)
|
||||
sectionBackgroundColor: "transparent"
|
||||
showTopSeparator: index > 0
|
||||
hideHeader: categoryModel.rowCount() <= 1
|
||||
leftPadding: 0
|
||||
rightPadding: 0
|
||||
topPadding: 0
|
||||
bottomPadding: 0
|
||||
caption: categoryName + " (" + itemModel.rowCount() + ")"
|
||||
visible: categoryVisible
|
||||
expanded: categoryExpanded
|
||||
onExpandedChanged: itemLibraryModel.setExpanded(expanded, categoryName);
|
||||
|
||||
Grid {
|
||||
id: itemGrid
|
||||
|
||||
columns: parent.width / styleConstants.cellWidth
|
||||
property int flexibleWidth: (parent.width - styleConstants.cellWidth * columns) / columns
|
||||
|
||||
Repeater {
|
||||
model: itemModel
|
||||
delegate: ItemDelegate {
|
||||
visible: itemVisible
|
||||
width: styleConstants.cellWidth + itemGrid.flexibleWidth
|
||||
height: styleConstants.cellHeight
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,8 +32,9 @@ Flickable {
|
||||
|
||||
property alias horizontalThickness: horizontalScrollBar.height
|
||||
property alias verticalThickness: verticalScrollBar.width
|
||||
property bool bothVisible: verticalScrollBar.scrollBarVisible
|
||||
&& horizontalScrollBar.scrollBarVisible
|
||||
property bool verticalScrollBarVisible: verticalScrollBar.scrollBarVisible
|
||||
property bool horizontalScrollBarVisible: horizontalScrollBar.scrollBarVisible
|
||||
property bool bothVisible: verticalScrollBarVisible && horizontalScrollBarVisible
|
||||
|
||||
contentWidth: areaItem.childrenRect.width
|
||||
contentHeight: areaItem.childrenRect.height
|
||||
|
||||
@@ -32,6 +32,12 @@ import StudioTheme 1.0 as StudioTheme
|
||||
Item {
|
||||
id: section
|
||||
property alias caption: label.text
|
||||
property alias sectionHeight: header.height
|
||||
property alias sectionBackgroundColor: header.color
|
||||
property alias sectionFontSize: label.font.pixelSize
|
||||
property alias showTopSeparator: topSeparator.visible
|
||||
property alias showArrow: arrow.visible
|
||||
|
||||
property int leftPadding: 8
|
||||
property int topPadding: 4
|
||||
property int rightPadding: 0
|
||||
@@ -42,9 +48,18 @@ Item {
|
||||
property bool expanded: true
|
||||
property int level: 0
|
||||
property int levelShift: 10
|
||||
property bool hideHeader: false
|
||||
|
||||
onHideHeaderChanged:
|
||||
{
|
||||
header.visible = !hideHeader
|
||||
header.height = hideHeader ? 0 : 20
|
||||
}
|
||||
|
||||
clip: true
|
||||
|
||||
signal showContextMenu()
|
||||
|
||||
Rectangle {
|
||||
id: header
|
||||
height: 20
|
||||
@@ -80,13 +95,29 @@ Item {
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
onClicked: {
|
||||
section.animationDuration = 120
|
||||
section.expanded = !section.expanded
|
||||
if (mouse.button === Qt.LeftButton) {
|
||||
section.animationDuration = 120
|
||||
section.expanded = !section.expanded
|
||||
} else {
|
||||
section.showContextMenu()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: topSeparator
|
||||
height: 1
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 5 + leftPadding
|
||||
anchors.leftMargin: 5 - leftPadding
|
||||
visible: false
|
||||
color: "#666666"
|
||||
}
|
||||
|
||||
default property alias __content: row.children
|
||||
|
||||
readonly property alias contentItem: row
|
||||
|
||||
Reference in New Issue
Block a user