From c31665f0691c0e0956cde4f1e3fcccd3a0da49f2 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Thu, 28 Oct 2021 17:34:55 +0200 Subject: [PATCH] Move list of packages QML to a re-usable component We'll need to have the same design for plug-ins and for materials. Contributes to issue CURA-8557. --- .../Marketplace/resources/qml/Packages.qml | 172 ++++++++++++++++++ plugins/Marketplace/resources/qml/Plugins.qml | 169 +---------------- 2 files changed, 175 insertions(+), 166 deletions(-) create mode 100644 plugins/Marketplace/resources/qml/Packages.qml diff --git a/plugins/Marketplace/resources/qml/Packages.qml b/plugins/Marketplace/resources/qml/Packages.qml new file mode 100644 index 0000000000..fc58910fa2 --- /dev/null +++ b/plugins/Marketplace/resources/qml/Packages.qml @@ -0,0 +1,172 @@ +// 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 UM 1.4 as UM + +ScrollView +{ + id: packages + clip: true + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + + property alias model: pluginColumn.model + + ListView + { + id: pluginColumn + width: parent.width + + spacing: UM.Theme.getSize("default_margin").height + + delegate: Rectangle + { + width: pluginColumn.width + height: UM.Theme.getSize("card").height + + color: UM.Theme.getColor("main_background") + radius: UM.Theme.getSize("default_radius").width + + Label + { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: Math.round((parent.height - height) / 2) + + text: model.package.displayName + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("text") + } + } + + footer: Item //Wrapper item to add spacing between content and footer. + { + width: parent.width + height: UM.Theme.getSize("card").height + pluginColumn.spacing + Button + { + id: loadMoreButton + width: parent.width + height: UM.Theme.getSize("card").height + 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. + + background: Rectangle + { + anchors.fill: parent + radius: UM.Theme.getSize("default_radius").width + color: UM.Theme.getColor("main_background") + } + + Row + { + anchors.centerIn: parent + + spacing: UM.Theme.getSize("thin_margin").width + + states: + [ + State + { + name: "Error" + when: packages.model.errorMessage != "" + PropertyChanges + { + target: errorIcon + visible: true + } + PropertyChanges + { + target: loadMoreIcon + visible: false + } + PropertyChanges + { + target: loadMoreLabel + text: catalog.i18nc("@button", "Failed to load plug-ins:") + " " + packages.model.errorMessage + "\n" + catalog.i18nc("@button", "Retry?") + } + }, + State + { + name: "Loading" + when: packages.model.isLoading + PropertyChanges + { + target: loadMoreIcon + source: UM.Theme.getIcon("ArrowDoubleCircleRight") + color: UM.Theme.getColor("action_button_disabled_text") + } + PropertyChanges + { + target: loadMoreLabel + text: catalog.i18nc("@button", "Loading") + color: UM.Theme.getColor("action_button_disabled_text") + } + }, + State + { + name: "LastPage" + when: !packages.model.hasMore + PropertyChanges + { + target: loadMoreIcon + visible: false + } + PropertyChanges + { + target: loadMoreLabel + text: catalog.i18nc("@button", "No more results to load") + color: UM.Theme.getColor("action_button_disabled_text") + } + } + ] + + Item + { + width: (errorIcon.visible || loadMoreIcon.visible) ? UM.Theme.getSize("small_button_icon").width : 0 + height: UM.Theme.getSize("small_button_icon").height + anchors.verticalCenter: loadMoreLabel.verticalCenter + + UM.StatusIcon + { + id: errorIcon + anchors.fill: parent + + status: UM.StatusIcon.Status.ERROR + visible: false + } + UM.RecolorImage + { + id: loadMoreIcon + anchors.fill: parent + + source: UM.Theme.getIcon("ArrowDown") + color: UM.Theme.getColor("secondary_button_text") + + RotationAnimator + { + target: loadMoreIcon + from: 0 + to: 360 + duration: 1000 + loops: Animation.Infinite + running: packages.model.isLoading + alwaysRunToEnd: true + } + } + } + Label + { + id: loadMoreLabel + text: catalog.i18nc("@button", "Load more") + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("secondary_button_text") + } + } + } + } + } +} diff --git a/plugins/Marketplace/resources/qml/Plugins.qml b/plugins/Marketplace/resources/qml/Plugins.qml index 0fbe8b7734..7ed5323941 100644 --- a/plugins/Marketplace/resources/qml/Plugins.qml +++ b/plugins/Marketplace/resources/qml/Plugins.qml @@ -1,174 +1,11 @@ // 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 Marketplace 1.0 as Marketplace -import UM 1.4 as UM -ScrollView +Packages { - clip: true - ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - - ListView + model: Marketplace.PackageList { - id: pluginColumn - width: parent.width - - model: Marketplace.PackageList - { - id: pluginList - } - spacing: UM.Theme.getSize("default_margin").height - - delegate: Rectangle - { - width: pluginColumn.width - height: UM.Theme.getSize("card").height - - color: UM.Theme.getColor("main_background") - radius: UM.Theme.getSize("default_radius").width - - Label - { - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.leftMargin: Math.round((parent.height - height) / 2) - - text: model.package.displayName - font: UM.Theme.getFont("medium_bold") - color: UM.Theme.getColor("text") - } - } - - footer: Item //Wrapper item to add spacing between content and footer. - { - width: parent.width - height: UM.Theme.getSize("card").height + pluginColumn.spacing - Button - { - id: loadMoreButton - width: parent.width - height: UM.Theme.getSize("card").height - anchors.bottom: parent.bottom - - enabled: pluginList.hasMore && !pluginList.isLoading || pluginList.errorMessage != "" - onClicked: pluginList.request() //Load next page in plug-in list. - - background: Rectangle - { - anchors.fill: parent - radius: UM.Theme.getSize("default_radius").width - color: UM.Theme.getColor("main_background") - } - - Row - { - anchors.centerIn: parent - - spacing: UM.Theme.getSize("thin_margin").width - - states: - [ - State - { - name: "Error" - when: pluginList.errorMessage != "" - PropertyChanges - { - target: errorIcon - visible: true - } - PropertyChanges - { - target: loadMoreIcon - visible: false - } - PropertyChanges - { - target: loadMoreLabel - text: catalog.i18nc("@button", "Failed to load plug-ins:") + " " + pluginList.errorMessage + "\n" + catalog.i18nc("@button", "Retry?") - } - }, - State - { - name: "Loading" - when: pluginList.isLoading - PropertyChanges - { - target: loadMoreIcon - source: UM.Theme.getIcon("ArrowDoubleCircleRight") - color: UM.Theme.getColor("action_button_disabled_text") - } - PropertyChanges - { - target: loadMoreLabel - text: catalog.i18nc("@button", "Loading") - color: UM.Theme.getColor("action_button_disabled_text") - } - }, - State - { - name: "LastPage" - when: !pluginList.hasMore - PropertyChanges - { - target: loadMoreIcon - visible: false - } - PropertyChanges - { - target: loadMoreLabel - text: catalog.i18nc("@button", "No more results to load") - color: UM.Theme.getColor("action_button_disabled_text") - } - } - ] - - Item - { - width: (errorIcon.visible || loadMoreIcon.visible) ? UM.Theme.getSize("small_button_icon").width : 0 - height: UM.Theme.getSize("small_button_icon").height - anchors.verticalCenter: loadMoreLabel.verticalCenter - - UM.StatusIcon - { - id: errorIcon - anchors.fill: parent - - status: UM.StatusIcon.Status.ERROR - visible: false - } - UM.RecolorImage - { - id: loadMoreIcon - anchors.fill: parent - - source: UM.Theme.getIcon("ArrowDown") - color: UM.Theme.getColor("secondary_button_text") - - RotationAnimator - { - target: loadMoreIcon - from: 0 - to: 360 - duration: 1000 - loops: Animation.Infinite - running: pluginList.isLoading - alwaysRunToEnd: true - } - } - } - Label - { - id: loadMoreLabel - text: catalog.i18nc("@button", "Load more") - font: UM.Theme.getFont("medium_bold") - color: UM.Theme.getColor("secondary_button_text") - } - } - } - } } -} +} \ No newline at end of file