Cura/plugins/Marketplace/resources/qml/PackageCard.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 QtQuick.Layouts 1.1

import UM 1.6 as UM
import Cura 1.6 as Cura

Rectangle
{
    property var packageData

    width: parent ? parent.width - UM.Theme.getSize("default_margin").width - UM.Theme.getSize("narrow_margin").width: 0
    height: UM.Theme.getSize("card").height
    color: UM.Theme.getColor("main_background")
    radius: UM.Theme.getSize("default_radius").width

    states:
    [
        State
        {
            name: "Folded"
            when: true  // TODO
            PropertyChanges
            {
                target: descriptionArea
                visible: true
            }
        },
        State
        {
            name: "Header"
            when: false  // TODO
            PropertyChanges
            {
                target: descriptionArea
                visible: false
            }
        }
    ]

    // Separate column for icon on the left.
    Image
    {
        id: packageItem
        anchors
        {
            top: parent.top
            left: parent.left
            margins: UM.Theme.getSize("default_margin").width
        }
        width: UM.Theme.getSize("card_icon").width
        height: width

        source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg"
    }

    // Title row.
    RowLayout
    {
        id: titleBar
        anchors
        {
            left: packageItem.right
            right: parent.right
            top: parent.top
            topMargin: UM.Theme.getSize("default_margin").height
            leftMargin: UM.Theme.getSize("default_margin").width
            rightMargin:UM.Theme.getSize("thick_margin").width
        }

        Label
        {
            text: packageData.displayName
            font: UM.Theme.getFont("large_bold")
            color: UM.Theme.getColor("text")
            verticalAlignment: Text.AlignTop
        }

        Control
        {
            Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
            Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height


            enabled: packageData.isCheckedByUltimaker
            visible: packageData.isCheckedByUltimaker

            Cura.ToolTip
            {
                tooltipText:
                {
                    switch(packageData.packageType)
                    {
                        case "plugin": return catalog.i18nc("@info", "Ultimaker Verified Plug-in");
                        case "material": return catalog.i18nc("@info", "Ultimaker Certified Material");
                        default: return catalog.i18nc("@info", "Ultimaker Verified Package");
                    }
                }
                visible: parent.hovered
                targetPoint: Qt.point(0, Math.round(parent.y + parent.height / 2))
            }

            Rectangle
            {
                anchors.fill: parent
                color: UM.Theme.getColor("action_button_hovered")
                radius: width
                UM.RecolorImage
                {
                    anchors.fill: parent
                    color: UM.Theme.getColor("primary")
                    source: packageData.packageType == "plugin" ? UM.Theme.getIcon("CheckCircle") : UM.Theme.getIcon("Certified")
                }
            }

            //NOTE: Can we link to something here? (Probably a static link explaining what verified is):
            // onClicked: Qt.openUrlExternally( XXXXXX )
        }

        Control
        {
            Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
            Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
            Layout.alignment: Qt.AlignCenter
            enabled: false  // remove!
            visible: false  // replace packageInfo.XXXXXX
            // TODO: waiting for materials card implementation

            Cura.ToolTip
            {
                tooltipText: "" // TODO
                visible: parent.hovered
            }

            UM.RecolorImage
            {
                anchors.fill: parent

                color: UM.Theme.getColor("primary")
                source: UM.Theme.getIcon("CheckCircle") // TODO
            }

            // onClicked: Qt.openUrlExternally( XXXXXX )  // TODO
        }

        Label
        {
            id: packageVersionLabel
            text: packageData.packageVersion
            font: UM.Theme.getFont("default")
            color: UM.Theme.getColor("text")
            Layout.fillWidth: true
        }

        Button
        {
            id: externalLinkButton

            // For some reason if i set padding, they don't match up. If i set all of them explicitly, it does work?
            leftPadding: UM.Theme.getSize("narrow_margin").width
            rightPadding: UM.Theme.getSize("narrow_margin").width
            topPadding: UM.Theme.getSize("narrow_margin").width
            bottomPadding: UM.Theme.getSize("narrow_margin").width

            Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width + 2 * padding
            Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").width + 2 * padding
            contentItem: UM.RecolorImage
            {
                source: UM.Theme.getIcon("LinkExternal")
                color: UM.Theme.getColor("icon")
                implicitWidth: UM.Theme.getSize("card_tiny_icon").width
                implicitHeight: UM.Theme.getSize("card_tiny_icon").height
            }

            background: Rectangle
            {
                color: externalLinkButton.hovered ? UM.Theme.getColor("action_button_hovered"): "transparent"
                radius: externalLinkButton.width / 2
            }
            onClicked: Qt.openUrlExternally(packageData.authorInfoUrl)
        }

    }

    // Description area
    Item
    {
        id: descriptionArea
        height: childrenRect.height > descriptionLabel.height ? childrenRect.height : descriptionLabel.height
        anchors
        {
            top: titleBar.bottom
            left: packageItem.right
            right: parent.right
            rightMargin: UM.Theme.getSize("default_margin").width
            leftMargin: UM.Theme.getSize("default_margin").width
        }
        Label
        {
            id: descriptionLabel
            width: parent.width
            property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision.

            text: packageData.description
            font: UM.Theme.getFont("medium")
            color: UM.Theme.getColor("text")
            maximumLineCount: 2
            wrapMode: Text.Wrap
            elide: Text.ElideRight

            onLineLaidOut:
            {
                if(truncated && line.isLast)
                {
                    let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - 2 * UM.Theme.getSize("default_margin").width;
                    if(line.implicitWidth > max_line_width)
                    {
                        line.width = max_line_width;
                    }
                    else
                    {
                        line.width = line.implicitWidth - fontMetrics.advanceWidth("…"); //Truncate the ellipsis. We're adding this ourselves.
                    }
                    descriptionLabel.lastLineWidth = line.implicitWidth;
                }
            }
        }
        Label
        {
            id: tripleDotLabel
            anchors.left: parent.left
            anchors.leftMargin: descriptionLabel.lastLineWidth
            anchors.bottom: readMoreButton.bottom

            text: "… "
            font: descriptionLabel.font
            color: descriptionLabel.color
            visible: descriptionLabel.truncated
        }
        Cura.TertiaryButton
        {
            id: readMoreButton
            anchors.left: tripleDotLabel.right
            anchors.bottom: parent.bottom
            height: fontMetrics.height //Height of a single line.

            text: catalog.i18nc("@info", "Read more")
            iconSource: UM.Theme.getIcon("LinkExternal")

            visible: descriptionLabel.truncated
            enabled: visible
            leftPadding: UM.Theme.getSize("default_margin").width
            rightPadding: UM.Theme.getSize("wide_margin").width
            textFont: descriptionLabel.font
            isIconOnRightSide: true

            onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
        }
    }

    // Author and action buttons.
    RowLayout
    {
        id: authorAndActionButton
        width: parent.width
        anchors
        {
            bottom: parent.bottom
            left: packageItem.right
            right: parent.right
            margins: UM.Theme.getSize("default_margin").height
        }
        spacing: UM.Theme.getSize("narrow_margin").width

        Label
        {
            id: authorBy
            Layout.alignment: Qt.AlignVCenter

            text: catalog.i18nc("@label", "By")
            font: UM.Theme.getFont("default")
            color: UM.Theme.getColor("text")
        }

        Cura.TertiaryButton
        {
            Layout.fillWidth: true
            Layout.preferredHeight: authorBy.height
            Layout.alignment: Qt.AlignVCenter

            text: packageData.authorName
            textFont: UM.Theme.getFont("default_bold")
            textColor: UM.Theme.getColor("text") // override normal link color
            leftPadding: 0
            rightPadding: 0
            iconSource: UM.Theme.getIcon("LinkExternal")
            isIconOnRightSide: true

            onClicked: Qt.openUrlExternally(packageData.authorInfoUrl)
        }

        Cura.SecondaryButton
        {
            id: enableManageButton
            Layout.alignment: Qt.AlignTop
            text: packageData.enableManageButtonText
            visible: packageData.enableManageButtonVisible
        }

        Cura.SecondaryButton
        {
            id: installManageButton
            Layout.alignment: Qt.AlignTop
            text: packageData.installManageButtonText
            visible: packageData.installManageButtonVisible
        }

        Cura.PrimaryButton
        {
            id: updateManageButton
            Layout.alignment: Qt.AlignTop
            text: catalog.i18nc("@button", "Update") // OR Download, if new!
            visible: packageData.updateManageButtonVisible
        }
    }

    FontMetrics
    {
        id: fontMetrics
        font: UM.Theme.getFont("medium")
    }
}