From 26a39f024013ff05ff0ba5d4b94634ca8e92e5c0 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Fri, 26 Nov 2021 16:04:23 +0100 Subject: [PATCH] Add a StackView around Marketplace to allow extra pages on top This allows a sort of full-screen pop-up to replace the entire Marketplace window contents, on top of the normal contents. The normal contents are kept as they are, but out of view. Contributes to issue CURA-8565. --- .../Marketplace/resources/qml/Marketplace.qml | 242 +++++++++--------- .../resources/qml/PackageDetails.qml | 10 + .../Marketplace/resources/qml/Packages.qml | 15 +- 3 files changed, 149 insertions(+), 118 deletions(-) create mode 100644 plugins/Marketplace/resources/qml/PackageDetails.qml diff --git a/plugins/Marketplace/resources/qml/Marketplace.qml b/plugins/Marketplace/resources/qml/Marketplace.qml index c04aa7eb6a..b293d21f92 100644 --- a/plugins/Marketplace/resources/qml/Marketplace.qml +++ b/plugins/Marketplace/resources/qml/Marketplace.qml @@ -42,143 +42,153 @@ Window anchors.fill: parent color: UM.Theme.getColor("main_background") - ColumnLayout + //The Marketplace can have a page in front of everything with package details. The stack view controls its visibility. + StackView { + id: contextStack anchors.fill: parent - spacing: UM.Theme.getSize("default_margin").height + initialItem: packageBrowse - // Page title. - Item + ColumnLayout { - Layout.preferredWidth: parent.width - Layout.preferredHeight: childrenRect.height + UM.Theme.getSize("default_margin").height + id: packageBrowse + anchors.fill: parent - Label + spacing: UM.Theme.getSize("default_margin").height + + // Page title. + Item { - id: pageTitle - anchors + Layout.preferredWidth: parent.width + Layout.preferredHeight: childrenRect.height + UM.Theme.getSize("default_margin").height + + Label { - left: parent.left - leftMargin: UM.Theme.getSize("default_margin").width - right: parent.right - rightMargin: UM.Theme.getSize("default_margin").width - bottom: parent.bottom - } - - font: UM.Theme.getFont("large") - color: UM.Theme.getColor("text") - text: content.item ? content.item.pageTitle: catalog.i18nc("@title", "Loading...") - } - } - - // Search & Top-Level Tabs - Item - { - Layout.preferredHeight: childrenRect.height - Layout.preferredWidth: parent.width - 2 * UM.Theme.getSize("thin_margin").width - RowLayout - { - width: parent.width - height: UM.Theme.getSize("button_icon").height + UM.Theme.getSize("default_margin").height - spacing: UM.Theme.getSize("thin_margin").width - - Rectangle - { - color: "transparent" - Layout.preferredHeight: parent.height - Layout.preferredWidth: searchBar.visible ? UM.Theme.getSize("thin_margin").width : 0 - Layout.fillWidth: ! searchBar.visible - } - - Cura.SearchBar - { - id: searchBar - Layout.preferredHeight: UM.Theme.getSize("button_icon").height - Layout.fillWidth: true - onTextEdited: searchStringChanged(text) - } - - // Page selection. - TabBar - { - id: pageSelectionTabBar - anchors.right: parent.right - height: UM.Theme.getSize("button_icon").height - spacing: 0 - background: Rectangle { color: "transparent" } - - PackageTypeTab + id: pageTitle + anchors { - id: pluginTabText - width: implicitWidth - text: catalog.i18nc("@button", "Plugins") - onClicked: + left: parent.left + leftMargin: UM.Theme.getSize("default_margin").width + right: parent.right + rightMargin: UM.Theme.getSize("default_margin").width + bottom: parent.bottom + } + + font: UM.Theme.getFont("large") + color: UM.Theme.getColor("text") + text: content.item ? content.item.pageTitle: catalog.i18nc("@title", "Loading...") + } + } + + // Search & Top-Level Tabs + Item + { + Layout.preferredHeight: childrenRect.height + Layout.preferredWidth: parent.width - 2 * UM.Theme.getSize("thin_margin").width + RowLayout + { + width: parent.width + height: UM.Theme.getSize("button_icon").height + UM.Theme.getSize("default_margin").height + spacing: UM.Theme.getSize("thin_margin").width + + Rectangle + { + color: "transparent" + Layout.preferredHeight: parent.height + Layout.preferredWidth: searchBar.visible ? UM.Theme.getSize("thin_margin").width : 0 + Layout.fillWidth: ! searchBar.visible + } + + Cura.SearchBar + { + id: searchBar + Layout.preferredHeight: UM.Theme.getSize("button_icon").height + Layout.fillWidth: true + onTextEdited: searchStringChanged(text) + } + + // Page selection. + TabBar + { + id: pageSelectionTabBar + anchors.right: parent.right + height: UM.Theme.getSize("button_icon").height + spacing: 0 + background: Rectangle { color: "transparent" } + + PackageTypeTab { - searchBar.text = "" - searchBar.visible = true - content.source = "Plugins.qml" + id: pluginTabText + width: implicitWidth + text: catalog.i18nc("@button", "Plugins") + onClicked: + { + searchBar.text = "" + searchBar.visible = true + content.source = "Plugins.qml" + } + } + PackageTypeTab + { + id: materialsTabText + width: implicitWidth + text: catalog.i18nc("@button", "Materials") + onClicked: + { + searchBar.text = "" + searchBar.visible = true + content.source = "Materials.qml" + } + } + ManagePackagesButton + { + onClicked: content.source = "ManagedPackages.qml" } } - PackageTypeTab - { - id: materialsTabText - width: implicitWidth - text: catalog.i18nc("@button", "Materials") - onClicked: - { - searchBar.text = "" - searchBar.visible = true - content.source = "Materials.qml" - } - } - ManagePackagesButton - { - onClicked: content.source = "ManagedPackages.qml" - } - } - TextMetrics - { - id: pluginTabTextMetrics - text: pluginTabText.text - font: pluginTabText.font + TextMetrics + { + id: pluginTabTextMetrics + text: pluginTabText.text + font: pluginTabText.font + } + TextMetrics + { + id: materialsTabTextMetrics + text: materialsTabText.text + font: materialsTabText.font + } } - TextMetrics - { - id: materialsTabTextMetrics - text: materialsTabText.text - font: materialsTabText.font - } } - } - - // Page contents. - Rectangle - { - Layout.preferredWidth: parent.width - Layout.fillHeight: true - color: UM.Theme.getColor("detail_background") // Page contents. - Loader + Rectangle { - id: content - anchors.fill: parent - anchors.margins: UM.Theme.getSize("default_margin").width - source: "Plugins.qml" + Layout.preferredWidth: parent.width + Layout.fillHeight: true + color: UM.Theme.getColor("detail_background") - Connections + // Page contents. + Loader { - target: content - function onLoaded() + id: content + anchors.fill: parent + anchors.margins: UM.Theme.getSize("default_margin").width + source: "Plugins.qml" + + Connections { - pageTitle.text = content.item.pageTitle - searchStringChanged.connect(handleSearchStringChanged) - } - function handleSearchStringChanged(new_search) - { - content.item.model.searchString = new_search + target: content + function onLoaded() + { + pageTitle.text = content.item.pageTitle + searchStringChanged.connect(handleSearchStringChanged) + } + function handleSearchStringChanged(new_search) + { + content.item.model.searchString = new_search + } } } } diff --git a/plugins/Marketplace/resources/qml/PackageDetails.qml b/plugins/Marketplace/resources/qml/PackageDetails.qml new file mode 100644 index 0000000000..4ad376e490 --- /dev/null +++ b/plugins/Marketplace/resources/qml/PackageDetails.qml @@ -0,0 +1,10 @@ +// Copyright (c) 2021 Ultimaker B.V. +// Cura is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.15 +import QtQuick.Controls 2.15 + +Label +{ + text: "Test!" +} \ No newline at end of file diff --git a/plugins/Marketplace/resources/qml/Packages.qml b/plugins/Marketplace/resources/qml/Packages.qml index 79b4bf23a5..def8d40acb 100644 --- a/plugins/Marketplace/resources/qml/Packages.qml +++ b/plugins/Marketplace/resources/qml/Packages.qml @@ -62,9 +62,20 @@ ListView } } - delegate: PackageCard + delegate: MouseArea { - packageData: model.package + width: parent.width + height: childrenRect.height + + onClicked: + { + contextStack.push(Qt.resolvedUrl("PackageDetails.qml")) + } + + PackageCard + { + packageData: model.package + } } //Wrapper item to add spacing between content and footer.