From d7058ef520206c073acfdb2c96706434abe95a08 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Mon, 29 Nov 2021 17:40:53 +0100 Subject: [PATCH] Change card summary information into a column This is necessary because we can't anchor to the bottom of the card here, and because we want to swap out the description for a download count in the extended detail card. Contributes to issue CURA-8565. --- .../Marketplace/resources/qml/PackageCard.qml | 430 +++++++++--------- 1 file changed, 213 insertions(+), 217 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 9a9d59efe7..6832d30074 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -57,271 +57,267 @@ Rectangle source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg" } - // Title row. - RowLayout + ColumnLayout { - id: titleBar anchors { left: packageItem.right + leftMargin: UM.Theme.getSize("default_margin").width right: parent.right + rightMargin: UM.Theme.getSize("thick_margin").width top: parent.top topMargin: UM.Theme.getSize("narrow_margin").height - leftMargin: UM.Theme.getSize("default_margin").width - rightMargin:UM.Theme.getSize("thick_margin").width } + height: packageItem.height + packageItem.anchors.margins * 2 - Label + // Title row. + RowLayout { - text: packageData.displayName - font: UM.Theme.getFont("medium_bold") - color: UM.Theme.getColor("text") - verticalAlignment: Text.AlignTop - } + id: titleBar + Layout.preferredWidth: parent.width + Layout.preferredHeight: childrenRect.height - 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 + Label { - 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)) + text: packageData.displayName + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("text") + verticalAlignment: Text.AlignTop } - Rectangle + Control { - anchors.fill: parent - color: UM.Theme.getColor("action_button_hovered") - radius: width + 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: packageData.packageType == "plugin" ? UM.Theme.getIcon("CheckCircle") : UM.Theme.getIcon("Certified") + source: UM.Theme.getIcon("CheckCircle") // TODO } + + // onClicked: Qt.openUrlExternally( XXXXXX ) // TODO } - //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 + Label { - tooltipText: "" // TODO - visible: parent.hovered + id: packageVersionLabel + text: packageData.packageVersion + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + Layout.fillWidth: true } - UM.RecolorImage + Button { - anchors.fill: parent + id: externalLinkButton - color: UM.Theme.getColor("primary") - source: UM.Theme.getIcon("CheckCircle") // TODO - } + // 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 - // 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) - } - - } - - Item - { - id: descriptionArea - 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("default") - color: UM.Theme.getColor("text") - maximumLineCount: 2 - wrapMode: Text.Wrap - elide: Text.ElideRight - - onLineLaidOut: - { - if(truncated && line.isLast) + 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 { - 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; + 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) } } - Label + + Item { - id: tripleDotLabel - anchors.left: parent.left - anchors.leftMargin: descriptionLabel.lastLineWidth - anchors.bottom: readMoreButton.bottom + id: descriptionArea + Layout.preferredWidth: parent.width + Layout.fillHeight: true - 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. + Label + { + id: descriptionLabel + width: parent.width + property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision. - text: catalog.i18nc("@info", "Read more") - iconSource: UM.Theme.getIcon("LinkExternal") + text: packageData.description + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + maximumLineCount: 2 + wrapMode: Text.Wrap + elide: Text.ElideRight - visible: descriptionLabel.truncated - enabled: visible - leftPadding: UM.Theme.getSize("default_margin").width - rightPadding: UM.Theme.getSize("wide_margin").width - textFont: descriptionLabel.font - isIconOnRightSide: true + 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 - onClicked: Qt.openUrlExternally(packageData.packageInfoUrl) - } - } + text: "… " + font: descriptionLabel.font + color: descriptionLabel.color + visible: descriptionLabel.truncated + } + Cura.TertiaryButton + { + id: readMoreButton + anchors.right: parent.right + anchors.bottom: parent.bottom + height: fontMetrics.height //Height of a single line. - // Author and action buttons. - RowLayout - { - id: authorAndActionButton - width: parent.width - anchors - { - bottom: parent.bottom - left: packageItem.right - margins: UM.Theme.getSize("default_margin").height - } - spacing: UM.Theme.getSize("narrow_margin").width + text: catalog.i18nc("@info", "Read more") + iconSource: UM.Theme.getIcon("LinkExternal") - Label - { - id: authorBy - Layout.alignment: Qt.AlignTop + visible: descriptionLabel.truncated + enabled: visible + leftPadding: UM.Theme.getSize("default_margin").width + rightPadding: UM.Theme.getSize("wide_margin").width + textFont: descriptionLabel.font + isIconOnRightSide: true - text: catalog.i18nc("@label", "By") - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") + onClicked: Qt.openUrlExternally(packageData.packageInfoUrl) + } } - Cura.TertiaryButton + // Author and action buttons. + RowLayout { - Layout.fillWidth: true - Layout.preferredHeight: authorBy.height - Layout.alignment: Qt.AlignTop + id: authorAndActionButton + Layout.preferredWidth: parent.width + Layout.preferredHeight: childrenRect.height - 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 + spacing: UM.Theme.getSize("narrow_margin").width - onClicked: Qt.openUrlExternally(packageData.authorInfoUrl) - } + Label + { + id: authorBy + Layout.alignment: Qt.AlignTop - Cura.SecondaryButton - { - id: disableButton - Layout.alignment: Qt.AlignTop - text: catalog.i18nc("@button", "Disable") - visible: false // not functional right now, also only when unfolding and required - } + text: catalog.i18nc("@label", "By") + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + } - Cura.SecondaryButton - { - id: uninstallButton - Layout.alignment: Qt.AlignTop - text: catalog.i18nc("@button", "Uninstall") - visible: false // not functional right now, also only when unfolding and required - } + Cura.TertiaryButton + { + Layout.fillWidth: true + Layout.preferredHeight: authorBy.height + Layout.alignment: Qt.AlignTop - Cura.PrimaryButton - { - id: installButton - Layout.alignment: Qt.AlignTop - text: catalog.i18nc("@button", "Update") // OR Download, if new! - visible: false // not functional right now, also only when unfolding and required + 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: disableButton + Layout.alignment: Qt.AlignTop + text: catalog.i18nc("@button", "Disable") + visible: false // not functional right now, also only when unfolding and required + } + + Cura.SecondaryButton + { + id: uninstallButton + Layout.alignment: Qt.AlignTop + text: catalog.i18nc("@button", "Uninstall") + visible: false // not functional right now, also only when unfolding and required + } + + Cura.PrimaryButton + { + id: installButton + Layout.alignment: Qt.AlignTop + text: catalog.i18nc("@button", "Update") // OR Download, if new! + visible: false // not functional right now, also only when unfolding and required + } } }