Copy new Table implementation to Cura.TableView

There we can re-use it. We can't re-use that implementation from the Digital Library itself, since that plug-in needs to be compatible with older Cura versions as well.

Contributes to issue CURA-8686.
This commit is contained in:
Ghostkeeper 2022-01-25 18:37:34 +01:00
parent 39e29ae768
commit 6457410a53
No known key found for this signature in database
GPG key ID: D2A8871EE34EC59A
2 changed files with 128 additions and 48 deletions

View file

@ -5,7 +5,6 @@ import Qt.labs.qmlmodels 1.0
import QtQuick 2.15
import QtQuick.Controls 2.15
import DigitalFactory 1.0 as DF
import UM 1.5 as UM
/*

View file

@ -1,67 +1,148 @@
// Copyright (C) 2021 Ultimaker B.V.
//Copyright (C) 2022 Ultimaker B.V.
//Cura is released under the terms of the LGPLv3 or higher.
import QtQuick 2.10
import QtQuick.Controls 1.4 as OldControls // TableView doesn't exist in the QtQuick Controls 2.x in 5.10, so use the old one
import QtQuick.Controls 2.3
import QtQuick.Controls.Styles 1.4
import Qt.labs.qmlmodels 1.0
import QtQuick 2.15
import QtQuick.Controls 2.15
import UM 1.5 as UM
/*
* A re-sizeable table of data.
*
* This table combines a list of headers with a TableView to show certain roles in a table.
* The columns of the table can be resized.
* When the table becomes too big, you can scroll through the table. When a column becomes too small, the contents of
* the table are elided.
* The table gets Cura's themeing.
*/
Item
{
id: tableScrollView
OldControls.TableView
{
itemDelegate: Item
{
height: tableCellLabel.implicitHeight
required property var columnHeaders //The text to show in the headers of each column.
property alias model: tableView.model //A TableModel to display in this table. To use a ListModel for the rows, use "rows: listModel.items"
property int currentRow: -1 //The selected row index.
property var onDoubleClicked: function(row) {} //Something to execute when double clicked. Accepts one argument: The index of the row that was clicked on.
UM.Label
Row
{
id: tableCellLabel
color: styleData.selected ? UM.Theme.getColor("primary_button_text") : UM.Theme.getColor("text")
id: headerBar
Repeater
{
id: headerRepeater
model: columnHeaders
Rectangle
{
width: Math.round(tableScrollView.width / headerRepeater.count)
height: UM.Theme.getSize("section").height
color: UM.Theme.getColor("secondary")
Label
{
id: contentText
anchors.left: parent.left
anchors.leftMargin: UM.Theme.getSize("narrow_margin").width
anchors.right: parent.right
anchors.rightMargin: UM.Theme.getSize("narrow_margin").width
text: modelData
font: UM.Theme.getFont("medium_bold")
color: UM.Theme.getColor("text")
elide: Text.ElideRight
text: styleData.value
}
Rectangle
{
anchors
{
right: parent.right
top: parent.top
bottom: parent.bottom
}
width: UM.Theme.getSize("thick_lining").width
color: UM.Theme.getColor("thick_lining")
MouseArea
{
anchors.fill: parent
anchors.leftMargin: 10 * screenScaleFactor
}
}
rowDelegate: Rectangle
cursorShape: Qt.SizeHorCursor
drag
{
color: styleData.selected ? UM.Theme.getColor("primary_button") : UM.Theme.getColor("main_background")
height: UM.Theme.getSize("table_row").height
target: parent
axis: Drag.XAxis
}
// Use the old styling technique since it's the only way to make the scrollbars themed in the TableView
style: TableViewStyle
onMouseXChanged:
{
backgroundColor: UM.Theme.getColor("main_background")
handle: Rectangle
if(drag.active)
{
// Both implicit width and height have to be set, since the handle is used by both the horizontal and the vertical scrollbars
implicitWidth: UM.Theme.getSize("scrollbar").width
implicitHeight: UM.Theme.getSize("scrollbar").width
radius: width / 2
color: UM.Theme.getColor(styleData.pressed ? "scrollbar_handle_down" : (styleData.hovered ? "scrollbar_handle_hover" : "scrollbar_handle"))
}
scrollBarBackground: Rectangle
parent.parent.width = Math.max(10, parent.parent.width + mouseX); //Don't go smaller than 10 pixels, to make sure you can still scale it back.
let sum_widths = 0;
for(let i = 0; i < headerBar.children.length; ++i)
{
// Both implicit width and height have to be set, since the handle is used by both the horizontal and the vertical scrollbars
implicitWidth: UM.Theme.getSize("scrollbar").width
implicitHeight: UM.Theme.getSize("scrollbar").width
color: UM.Theme.getColor("main_background")
sum_widths += headerBar.children[i].width;
}
// The little rectangle between the vertical and horizontal scrollbars
corner: Rectangle
if(sum_widths > tableScrollView.width)
{
color: UM.Theme.getColor("main_background")
parent.parent.width -= sum_widths - tableScrollView.width; //Limit the total width to not exceed the view.
}
}
tableView.forceLayout();
}
}
}
}
}
}
TableView
{
id: tableView
anchors
{
top: headerBar.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
}
// Override the control arrows
incrementControl: Item { }
decrementControl: Item { }
clip: true
ScrollBar.vertical: UM.ScrollBar {}
columnWidthProvider: function(column)
{
return headerBar.children[column].width; //Cells get the same width as their column header.
}
delegate: Rectangle
{
implicitHeight: Math.max(1, cellContent.height)
color: UM.Theme.getColor((tableScrollView.currentRow == row) ? "primary" : ((row % 2 == 0) ? "main_background" : "viewport_background"))
Label
{
id: cellContent
width: parent.width
text: display
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
}
MouseArea
{
anchors.fill: parent
onClicked:
{
tableScrollView.currentRow = row; //Select this row.
}
onDoubleClicked:
{
tableScrollView.onDoubleClicked(row);
}
}
}
}
}