From 0546f58e575a61977ab3a449956161a765ba2acd Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Mon, 29 Nov 2021 18:26:28 +0100 Subject: [PATCH] Add extended description header Wrapping the whole content so far in another column so that we can have a wider part below, automatically aligned. Contributes to issue CURA-8565. --- .../Marketplace/resources/qml/PackageCard.qml | 596 ++++++++++-------- 1 file changed, 316 insertions(+), 280 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 59bd90de9b..1a9e32b03b 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -13,7 +13,7 @@ Rectangle property var packageData property bool expanded: false - height: UM.Theme.getSize("card").height + height: childrenRect.height color: UM.Theme.getColor("main_background") radius: UM.Theme.getSize("default_radius").width @@ -33,6 +33,11 @@ Rectangle target: downloadCount visible: false } + PropertyChanges + { + target: extendedDescription + visible: false + } }, State { @@ -48,311 +53,342 @@ Rectangle target: downloadCount visible: true } + PropertyChanges + { + target: extendedDescription + visible: true + } } ] - // Separate column for icon on the left. - Image + Column { - 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 + width: parent.width - source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg" - } - - ColumnLayout - { - 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 - } - height: packageItem.height + packageItem.anchors.margins * 2 - - // Title row. - RowLayout - { - id: titleBar - Layout.preferredWidth: parent.width - Layout.preferredHeight: childrenRect.height - - Label - { - text: packageData.displayName - font: UM.Theme.getFont("medium_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) - } - } + spacing: 0 Item { - id: shortDescription - Layout.preferredWidth: parent.width - Layout.fillHeight: true + width: parent.width + height: UM.Theme.getSize("card").height - Label + Image { - 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: + id: packageItem + anchors { - if(truncated && line.isLast) + 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" + } + + ColumnLayout + { + 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 + } + height: packageItem.height + packageItem.anchors.margins * 2 + + // Title row. + RowLayout + { + id: titleBar + Layout.preferredWidth: parent.width + Layout.preferredHeight: childrenRect.height + + Label { - let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - 2 * UM.Theme.getSize("default_margin").width; - if(line.implicitWidth > max_line_width) + text: packageData.displayName + font: UM.Theme.getFont("medium_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 { - line.width = max_line_width; + 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)) } - else + + Rectangle { - line.width = line.implicitWidth - fontMetrics.advanceWidth("…"); //Truncate the ellipsis. We're adding this ourselves. + 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") + } } - descriptionLabel.lastLineWidth = line.implicitWidth; + + //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) + } + } + + Item + { + id: shortDescription + Layout.preferredWidth: parent.width + Layout.fillHeight: true + + 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) + { + 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: descriptionLabel.bottom + + 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. + + 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) + } + } + + Row + { + id: downloadCount + Layout.preferredWidth: parent.width + Layout.fillHeight: true + + UM.RecolorImage + { + id: downloadsIcon + width: UM.Theme.getSize("card_tiny_icon").width + height: UM.Theme.getSize("card_tiny_icon").height + + source: UM.Theme.getIcon("Download") + color: UM.Theme.getColor("text") + } + + Label + { + anchors.verticalCenter: downloadsIcon.verticalCenter + + color: UM.Theme.getColor("text") + font: UM.Theme.getFont("default") + text: packageData.downloadCount + } + } + + // Author and action buttons. + RowLayout + { + id: authorAndActionButton + Layout.preferredWidth: parent.width + Layout.preferredHeight: childrenRect.height + + spacing: UM.Theme.getSize("narrow_margin").width + + Label + { + id: authorBy + Layout.alignment: Qt.AlignTop + + 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.AlignTop + + 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 } } } - Label - { - id: tripleDotLabel - anchors.left: parent.left - anchors.leftMargin: descriptionLabel.lastLineWidth - anchors.bottom: descriptionLabel.bottom - - 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. - - 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) - } } - Row + Column { - id: downloadCount - Layout.preferredWidth: parent.width - Layout.fillHeight: true - - UM.RecolorImage - { - id: downloadsIcon - width: UM.Theme.getSize("card_tiny_icon").width - height: UM.Theme.getSize("card_tiny_icon").height - - source: UM.Theme.getIcon("Download") - color: UM.Theme.getColor("text") - } + id: extendedDescription + padding: UM.Theme.getSize("default_margin").width + topPadding: 0 Label { - anchors.verticalCenter: downloadsIcon.verticalCenter - + text: catalog.i18nc("@header", "Description") + font: UM.Theme.getFont("medium_bold") color: UM.Theme.getColor("text") - font: UM.Theme.getFont("default") - text: packageData.downloadCount - } - } - - // Author and action buttons. - RowLayout - { - id: authorAndActionButton - Layout.preferredWidth: parent.width - Layout.preferredHeight: childrenRect.height - - spacing: UM.Theme.getSize("narrow_margin").width - - Label - { - id: authorBy - Layout.alignment: Qt.AlignTop - - 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.AlignTop - - 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 } } }