From 5671b6c61f50185ea90b6ca1f6d9f45aa5f1f9e7 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 25 Jan 2022 17:51:48 +0100 Subject: [PATCH] Replace TableView with custom implementation I intend to copy this implementation to mainline Cura when it's done. Contributes to issue CURA-8686. --- .../resources/qml/OpenProjectFilesPage.qml | 26 +++- .../DigitalLibrary/resources/qml/Table.qml | 127 ++++++++++++++++++ 2 files changed, 149 insertions(+), 4 deletions(-) create mode 100644 plugins/DigitalLibrary/resources/qml/Table.qml diff --git a/plugins/DigitalLibrary/resources/qml/OpenProjectFilesPage.qml b/plugins/DigitalLibrary/resources/qml/OpenProjectFilesPage.qml index 0e55efeb39..8e77c853a3 100644 --- a/plugins/DigitalLibrary/resources/qml/OpenProjectFilesPage.qml +++ b/plugins/DigitalLibrary/resources/qml/OpenProjectFilesPage.qml @@ -1,6 +1,8 @@ -// 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 2.15 import QtQuick.Window 2.2 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 @@ -56,8 +58,24 @@ Item border.width: UM.Theme.getSize("default_lining").width border.color: UM.Theme.getColor("lining") + //We can't use Cura's TableView here, since in Cura >= 5.0 this uses QtQuick.TableView, while in Cura < 5.0 this uses QtControls1.TableView. + //So we have to define our own. Once support for 4.13 and earlier is dropped, we can switch to Cura.TableView. + Table + { + id: filesTableView + anchors.fill: parent - Cura.TableView + columnHeaders: ["Name", "Uploaded by", "Uploaded at"] + model: TableModel + { + TableModelColumn { display: "fileName" } + TableModelColumn { display: "username" } + TableModelColumn { display: "uploadedAt" } + rows: manager.digitalFactoryFileModel.items + } + } + + /*Cura.TableView { id: filesTableView anchors.fill: parent @@ -102,7 +120,7 @@ Item manager.setSelectedFileIndices(newSelection); } } - } + }*/ Label { diff --git a/plugins/DigitalLibrary/resources/qml/Table.qml b/plugins/DigitalLibrary/resources/qml/Table.qml new file mode 100644 index 0000000000..c1d01ec124 --- /dev/null +++ b/plugins/DigitalLibrary/resources/qml/Table.qml @@ -0,0 +1,127 @@ +//Copyright (C) 2022 Ultimaker B.V. +//Cura is released under the terms of the LGPLv3 or higher. + +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 + +/* + * 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 + + 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. + + Row + { + 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") + } + 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. + } + tableView.forceLayout(); + } + } + } + } + } + } + TableView + { + id: tableView + anchors + { + top: headerBar.bottom + left: parent.left + right: parent.right + bottom: parent.bottom + } + + 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 + { + height: UM.Theme.getSize("section").height + + color: UM.Theme.getColor((row % 2 == 0) ? "main_background": "viewport_background") + + Label + { + id: cellContent + anchors.fill: parent + + text: display + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + } + } + + } +} \ No newline at end of file