Cura/plugins/Marketplace/resources/qml/Packages.qml

// 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


ListView
{
    id: packages

    property string pageTitle
    width: parent.width

    clip: true

    Component.onCompleted: model.updatePackages()
    Component.onDestruction: model.abortUpdating()

    //ScrollBar.vertical.policy: ScrollBar.AlwaysOff

    spacing: UM.Theme.getSize("default_margin").height

    section.property: "package.sectionTitle"
    section.delegate: Rectangle
    {
        width: packages.width
        height: sectionHeaderText.height + UM.Theme.getSize("default_margin").height

        color: UM.Theme.getColor("detail_background")

        required property string section

        Label
        {
            id: sectionHeaderText
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left

            text: parent.section
            font: UM.Theme.getFont("large")
            color: UM.Theme.getColor("text")
        }
    }

    ScrollBar.vertical: ScrollBar
    {
        // Vertical ScrollBar, styled similarly to the scrollBar in the settings panel
        id: verticalScrollBar
        visible: packages.contentHeight > packages.height

        background: Item{}

        contentItem: Rectangle
        {
            id: scrollViewHandle
            implicitWidth: UM.Theme.getSize("scrollbar").width
            radius: Math.round(implicitWidth / 2)
            color: verticalScrollBar.pressed ? UM.Theme.getColor("scrollbar_handle_down") : verticalScrollBar.hovered ? UM.Theme.getColor("scrollbar_handle_hover") : UM.Theme.getColor("scrollbar_handle")
            Behavior on color { ColorAnimation { duration: 50; } }
        }
    }

    delegate: PackageCard
    {
        packageData: model.package
    }

    //Wrapper item to add spacing between content and footer.
    footer: Item
    {
        width: parent.width - UM.Theme.getSize("default_margin").width - UM.Theme.getSize("narrow_margin").width
        height: model.hasFooter || packages.model.errorMessage != "" ? UM.Theme.getSize("card").height + packages.spacing : 0
        visible: model.hasFooter || packages.model.errorMessage != ""
        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.updatePackages()  //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 packages:") + " " + 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: packages.model.count > 0 ? catalog.i18nc("@message", "No more results to load") : catalog.i18nc("@message", "No results found with current filter")
                            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")
                }
            }
        }
    }
}