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.
+//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
 
-
+/*
-OldControls.TableView
+ * 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
 {
-    itemDelegate: Item
+    id: tableScrollView
-    {
-        height: tableCellLabel.implicitHeight
 
-        UM.Label
+    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.
+
+    Row
+    {
+        id: headerBar
+        Repeater
         {
-            id: tableCellLabel
+            id: headerRepeater
-            color: styleData.selected ? UM.Theme.getColor("primary_button_text") : UM.Theme.getColor("text")
+            model: columnHeaders
-            elide: Text.ElideRight
+            Rectangle
-            text: styleData.value
+            {
-            anchors.fill: parent
+                width: Math.round(tableScrollView.width / headerRepeater.count)
-            anchors.leftMargin: 10 * screenScaleFactor
+                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
+                }
+                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
+
+                        cursorShape: Qt.SizeHorCursor
+                        drag
+                        {
+                            target: parent
+                            axis: Drag.XAxis
+                        }
+                        onMouseXChanged:
+                        {
+                            if(drag.active)
+                            {
+                                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)
+                                {
+                                    sum_widths += headerBar.children[i].width;
+                                }
+                                if(sum_widths > tableScrollView.width)
+                                {
+                                    parent.parent.width -= sum_widths - tableScrollView.width; //Limit the total width to not exceed the view.
+                                }
+                            }
+                            tableView.forceLayout();
+                        }
+                    }
+                }
+            }
         }
     }
-
+    TableView
-    rowDelegate: Rectangle
     {
-        color: styleData.selected ? UM.Theme.getColor("primary_button") : UM.Theme.getColor("main_background")
+        id: tableView
-        height: UM.Theme.getSize("table_row").height
+        anchors
-    }
-
-    // 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")
-
-        handle: Rectangle
         {
-            // Both implicit width and height have to be set, since the handle is used by both the horizontal and the vertical scrollbars
+            top: headerBar.bottom
-            implicitWidth: UM.Theme.getSize("scrollbar").width
+            left: parent.left
-            implicitHeight: UM.Theme.getSize("scrollbar").width
+            right: parent.right
-            radius: width / 2
+            bottom: parent.bottom
-            color: UM.Theme.getColor(styleData.pressed ? "scrollbar_handle_down" : (styleData.hovered ? "scrollbar_handle_hover" : "scrollbar_handle"))
         }
 
-        scrollBarBackground: Rectangle
+        clip: true
+        ScrollBar.vertical: UM.ScrollBar {}
+        columnWidthProvider: function(column)
         {
-            // Both implicit width and height have to be set, since the handle is used by both the horizontal and the vertical scrollbars
+            return headerBar.children[column].width; //Cells get the same width as their column header.
-            implicitWidth: UM.Theme.getSize("scrollbar").width
-            implicitHeight: UM.Theme.getSize("scrollbar").width
-            color: UM.Theme.getColor("main_background")
         }
 
-        // The little rectangle between the vertical and horizontal scrollbars
+        delegate: Rectangle
-        corner: Rectangle
         {
-            color: UM.Theme.getColor("main_background")
+            implicitHeight: Math.max(1, cellContent.height)
-        }
 
-        // Override the control arrows
+            color: UM.Theme.getColor((tableScrollView.currentRow == row) ? "primary" : ((row % 2 == 0) ? "main_background" : "viewport_background"))
-        incrementControl: Item { }
+
-        decrementControl: Item { }
+            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);
+                }
+            }
+        }
     }
 }