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.

plugins/DigitalLibrary/resources/qml/Table.qml

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

resources/qml/TableView.qml

@@ -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 Qt.labs.qmlmodels 1.0
-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 2.15
-import QtQuick.Controls 2.3
+import QtQuick.Controls 2.15
-import QtQuick.Controls.Styles 1.4
 
 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
+    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"
-    itemDelegate: Item
+    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.
-        height: tableCellLabel.implicitHeight
 
-        UM.Label
+    Row
     {
-            id: tableCellLabel
+        id: headerBar
-            color: styleData.selected ? UM.Theme.getColor("primary_button_text") : UM.Theme.getColor("text")
+        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")
+                            target: parent
-        height: UM.Theme.getSize("table_row").height
+                            axis: Drag.XAxis
                         }
-
+                        onMouseXChanged:
-    // Use the old styling technique since it's the only way to make the scrollbars themed in the TableView
-    style: TableViewStyle
                         {
-        backgroundColor: UM.Theme.getColor("main_background")
+                            if(drag.active)
-
-        handle: Rectangle
                             {
-            // Both implicit width and height have to be set, since the handle is used by both the horizontal and the vertical scrollbars
+                                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.
-            implicitWidth: UM.Theme.getSize("scrollbar").width
+                                let sum_widths = 0;
-            implicitHeight: UM.Theme.getSize("scrollbar").width
+                                for(let i = 0; i < headerBar.children.length; ++i)
-            radius: width / 2
-            color: UM.Theme.getColor(styleData.pressed ? "scrollbar_handle_down" : (styleData.hovered ? "scrollbar_handle_hover" : "scrollbar_handle"))
-        }
-
-        scrollBarBackground: Rectangle
                                 {
-            // Both implicit width and height have to be set, since the handle is used by both the horizontal and the vertical scrollbars
+                                    sum_widths += headerBar.children[i].width;
-            implicitWidth: UM.Theme.getSize("scrollbar").width
-            implicitHeight: UM.Theme.getSize("scrollbar").width
-            color: UM.Theme.getColor("main_background")
                                 }
-
+                                if(sum_widths > tableScrollView.width)
-        // The little rectangle between the vertical and horizontal scrollbars
-        corner: Rectangle
                                 {
-            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
+        clip: true
-        incrementControl: Item { }
+        ScrollBar.vertical: UM.ScrollBar {}
-        decrementControl: Item { }
+        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);
+                }
+            }
+        }
     }
 }