Differentiate between local and remote packages

There is a distinction between packages which are already
installed on the local machine and packages which are
available on the remote server. Even with this difference
it is important that they are handled the same and can be
reused in the same GUI elements.

In order to reduce code duplication I created a parent object
PackageList which contains the base logic and interface for
the QML and let both RemotePackageList and LocalPackageList
inherit from this.

UX specified that the gear icon (Settings.svg) should be
separate from the tabs of material and plugins. This also
ment that the current tab  item couldn't set the pageTitle
anymore. This is now defined in the Package component and
set when the loader has loaded the external QML file.

Contributes to CURA-8558
This commit is contained in:
Jelle Spijker 2021-11-01 17:02:07 +01:00
parent 03e1fc34b4
commit 86d5d315bc
No known key found for this signature in database
GPG key ID: 6662DC033BE6B99A
11 changed files with 307 additions and 136 deletions

View file

@ -0,0 +1,16 @@
// 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
import QtQuick.Layouts 1.15
import Marketplace 1.0 as Marketplace
import UM 1.4 as UM
Packages
{
pageTitle: catalog.i18nc("@header", "Manage packages")
model: Marketplace.LocalPackageList
{
}
}

View file

@ -34,7 +34,8 @@ Window
title: "Marketplace" //Seen by Ultimaker as a brand name, so this doesn't get translated.
modality: Qt.NonModal
Rectangle //Background color.
// Background color
Rectangle
{
anchors.fill: parent
color: UM.Theme.getColor("main_background")
@ -45,13 +46,15 @@ Window
spacing: UM.Theme.getSize("default_margin").height
Item //Page title.
// Page title.
Item
{
Layout.preferredWidth: parent.width
Layout.preferredHeight: childrenRect.height + UM.Theme.getSize("default_margin").height
Label
{
id: pageTitle
anchors
{
left: parent.left
@ -63,7 +66,7 @@ Window
font: UM.Theme.getFont("large")
color: UM.Theme.getColor("text")
text: pageSelectionTabBar.currentItem.pageTitle
text: ""
}
}
@ -72,10 +75,56 @@ Window
Layout.preferredWidth: parent.width
Layout.preferredHeight: childrenRect.height
TabBar //Page selection.
Button
{
id: managePackagesButton
hoverEnabled: true
width: childrenRect.width
height: childrenRect.height
anchors.right: parent.right
anchors.rightMargin: UM.Theme.getSize("default_margin").width
background: Rectangle
{
color: UM.Theme.getColor("action_button")
border.color: "transparent"
border.width: UM.Theme.getSize("default_lining").width
}
Cura.ToolTip
{
id: managePackagesTooltip
tooltipText: catalog.i18nc("@info:tooltip", "Manage packages")
arrowSize: 0
visible: managePackagesButton.hovered
}
UM.RecolorImage
{
id: managePackagesIcon
width: UM.Theme.getSize("section_icon").width
height: UM.Theme.getSize("section_icon").height
color: UM.Theme.getColor("icon")
source: UM.Theme.getIcon("Settings")
}
onClicked:
{
content.source = "ManagedPackages.qml"
}
}
// Page selection.
TabBar
{
id: pageSelectionTabBar
anchors.right: parent.right
anchors.right: managePackagesButton.left
anchors.rightMargin: UM.Theme.getSize("default_margin").width
spacing: 0
@ -84,33 +133,42 @@ Window
{
width: implicitWidth
text: catalog.i18nc("@button", "Plug-ins")
pageTitle: catalog.i18nc("@header", "Install Plugins")
onClicked: content.source = "Plugins.qml"
}
PackageTypeTab
{
width: implicitWidth
text: catalog.i18nc("@button", "Materials")
pageTitle: catalog.i18nc("@header", "Install Materials")
onClicked: content.source = "Materials.qml"
}
}
}
Rectangle //Page contents.
// Page contents.
Rectangle
{
Layout.preferredWidth: parent.width
Layout.fillHeight: true
color: UM.Theme.getColor("detail_background")
Loader //Page contents.
// Page contents.
Loader
{
id: content
anchors.fill: parent
anchors.margins: UM.Theme.getSize("default_margin").width
source: "Plugins.qml"
Connections
{
target: content
onLoaded: function()
{
pageTitle.text = content.item.pageTitle
}
}
}
}
}
}
}
}

View file

@ -5,8 +5,9 @@ import Marketplace 1.0 as Marketplace
Packages
{
model: Marketplace.PackageList
pageTitle: catalog.i18nc("@header", "Install Materials")
model: Marketplace.RemotePackageList
{
packageTypeFilter: "material"
}
}
}

View file

@ -12,9 +12,10 @@ ScrollView
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
property alias model: packagesListview.model
property string pageTitle
Component.onCompleted: model.request()
Component.onDestruction: model.abortRequest()
Component.onCompleted: model.updatePackages()
Component.onDestruction: model.abortUpdating()
ListView
{
@ -43,7 +44,8 @@ ScrollView
}
}
footer: Item //Wrapper item to add spacing between content and footer.
//Wrapper item to add spacing between content and footer.
footer: Item
{
width: parent.width
height: UM.Theme.getSize("card").height + packagesListview.spacing
@ -55,7 +57,7 @@ ScrollView
anchors.bottom: parent.bottom
enabled: packages.model.hasMore && !packages.model.isLoading || packages.model.errorMessage != ""
onClicked: packages.model.request() //Load next page in plug-in list.
onClicked: packages.model.updatePackages() //Load next page in plug-in list.
background: Rectangle
{

View file

@ -5,8 +5,9 @@ import Marketplace 1.0 as Marketplace
Packages
{
model: Marketplace.PackageList
pageTitle: catalog.i18nc("@header", "Install Plugins")
model: Marketplace.RemotePackageList
{
packageTypeFilter: "plugin"
}
}
}