mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-07-25 15:44:04 -06:00
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.
This commit is contained in:
Ghostkeeper
Jelle Spijker
parent
34911380d2
commit
26a39f0240
3 changed files with 149 additions and 118 deletions
|
|
@ -42,143 +42,153 @@ Window
|
||||||
anchors.fill: parent
|
anchors.fill: parent
|
||||||
color: UM.Theme.getColor("main_background")
|
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
|
anchors.fill: parent
|
||||||
|
|
||||||
spacing: UM.Theme.getSize("default_margin").height
|
initialItem: packageBrowse
|
||||||
|
|
||||||
// Page title.
|
ColumnLayout
|
||||||
Item
|
|
||||||
{
|
{
|
||||||
Layout.preferredWidth: parent.width
|
id: packageBrowse
|
||||||
Layout.preferredHeight: childrenRect.height + UM.Theme.getSize("default_margin").height
|
anchors.fill: parent
|
||||||
|
|
||||||
Label
|
spacing: UM.Theme.getSize("default_margin").height
|
||||||
|
|
||||||
|
// Page title.
|
||||||
|
Item
|
||||||
{
|
{
|
||||||
id: pageTitle
|
Layout.preferredWidth: parent.width
|
||||||
anchors
|
Layout.preferredHeight: childrenRect.height + UM.Theme.getSize("default_margin").height
|
||||||
|
|
||||||
|
Label
|
||||||
{
|
{
|
||||||
left: parent.left
|
id: pageTitle
|
||||||
leftMargin: UM.Theme.getSize("default_margin").width
|
anchors
|
||||||
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: pluginTabText
|
left: parent.left
|
||||||
width: implicitWidth
|
leftMargin: UM.Theme.getSize("default_margin").width
|
||||||
text: catalog.i18nc("@button", "Plugins")
|
right: parent.right
|
||||||
onClicked:
|
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 = ""
|
id: pluginTabText
|
||||||
searchBar.visible = true
|
width: implicitWidth
|
||||||
content.source = "Plugins.qml"
|
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
|
TextMetrics
|
||||||
{
|
{
|
||||||
id: pluginTabTextMetrics
|
id: pluginTabTextMetrics
|
||||||
text: pluginTabText.text
|
text: pluginTabText.text
|
||||||
font: pluginTabText.font
|
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.
|
// Page contents.
|
||||||
Loader
|
Rectangle
|
||||||
{
|
{
|
||||||
id: content
|
Layout.preferredWidth: parent.width
|
||||||
anchors.fill: parent
|
Layout.fillHeight: true
|
||||||
anchors.margins: UM.Theme.getSize("default_margin").width
|
color: UM.Theme.getColor("detail_background")
|
||||||
source: "Plugins.qml"
|
|
||||||
|
|
||||||
Connections
|
// Page contents.
|
||||||
|
Loader
|
||||||
{
|
{
|
||||||
target: content
|
id: content
|
||||||
function onLoaded()
|
anchors.fill: parent
|
||||||
|
anchors.margins: UM.Theme.getSize("default_margin").width
|
||||||
|
source: "Plugins.qml"
|
||||||
|
|
||||||
|
Connections
|
||||||
{
|
{
|
||||||
pageTitle.text = content.item.pageTitle
|
target: content
|
||||||
searchStringChanged.connect(handleSearchStringChanged)
|
function onLoaded()
|
||||||
}
|
{
|
||||||
function handleSearchStringChanged(new_search)
|
pageTitle.text = content.item.pageTitle
|
||||||
{
|
searchStringChanged.connect(handleSearchStringChanged)
|
||||||
content.item.model.searchString = new_search
|
}
|
||||||
|
function handleSearchStringChanged(new_search)
|
||||||
|
{
|
||||||
|
content.item.model.searchString = new_search
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
10
plugins/Marketplace/resources/qml/PackageDetails.qml
Normal file
10
plugins/Marketplace/resources/qml/PackageDetails.qml
Normal file
|
|
@ -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!"
|
||||||
|
}
|
||||||
|
|
@ -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.
|
//Wrapper item to add spacing between content and footer.
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue