From 980cc22529ac7d9099b4228075c6c57df9c87626 Mon Sep 17 00:00:00 2001 From: Jaime van Kessel Date: Tue, 16 Nov 2021 18:02:56 +0100 Subject: [PATCH] Simplify the layout of the packageCard CURA-8561 --- .../Marketplace/resources/qml/PackageCard.qml | 478 +++++++++--------- 1 file changed, 235 insertions(+), 243 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 85df7ae0f1..770731375f 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -13,7 +13,7 @@ Rectangle property var packageData width: parent ? parent.width - UM.Theme.getSize("thin_margin").width : 0 - height: childrenRect.height + height: childrenRect.height + UM.Theme.getSize("thin_margin").height * 2 color: UM.Theme.getColor("main_background") radius: UM.Theme.getSize("default_radius").width @@ -52,289 +52,281 @@ Rectangle } ] - RowLayout + + + Image //Separate column for icon on the left. { - width: parent.width - UM.Theme.getSize("thin_margin").width * 2 - height: childrenRect.height + UM.Theme.getSize("thin_margin").height * 2 - x: UM.Theme.getSize("thin_margin").width - y: UM.Theme.getSize("thin_margin").height - - spacing: UM.Theme.getSize("default_margin").width - - Image //Separate column for icon on the left. + id: packageItem + anchors { - Layout.preferredWidth: UM.Theme.getSize("card_icon").width - Layout.preferredHeight: UM.Theme.getSize("card_icon").height - Layout.alignment: Qt.AlignTop + top: parent.top + left: parent.left + margins: UM.Theme.getSize("thin_margin").width + } + width: UM.Theme.getSize("card_icon").width + height: width - source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg" + source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg" + } + + Column + { + anchors + { + top: parent.top + left: packageItem.right + right: parent.right + margins: UM.Theme.getSize("thin_margin").width } - Column + RowLayout //Title row. { - Layout.fillWidth: true - Layout.alignment: Qt.AlignTop - - RowLayout //Title row. + width: parent.width + spacing: UM.Theme.getSize("thin_margin").width + Label { - Layout.alignment: Qt.AlignTop - width: parent.width - Label - { - Layout.alignment: Qt.AlignTop - - text: packageData.displayName - font: UM.Theme.getFont("medium_bold") - color: UM.Theme.getColor("text") - } - - Row //Row inside row, but the non-layout version skips invisible elements. - { - spacing: parent.spacing - Layout.alignment: Qt.AlignTop - - Control - { - width: UM.Theme.getSize("card_tiny_icon").width - height: UM.Theme.getSize("card_tiny_icon").height - Layout.alignment: Qt.AlignTop - - enabled: packageData.isVerified - visible: packageData.isVerified - - Cura.ToolTip - { - tooltipText: catalog.i18nc("@info", "Verified") - visible: parent.hovered - } - - Rectangle - { - anchors.fill: parent - color: UM.Theme.getColor("action_button_hovered") - radius: width - UM.RecolorImage - { - anchors.fill: parent - color: UM.Theme.getColor("primary") - source: UM.Theme.getIcon("CheckCircle") - } - } - - //NOTE: Can we link to something here? (Probably a static link explaining what verified is): - // onClicked: Qt.openUrlExternally( XXXXXX ) - } - - Control - { - width: UM.Theme.getSize("card_tiny_icon").width - height: UM.Theme.getSize("card_tiny_icon").height - Layout.alignment: Qt.AlignTop - - 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 - { - Layout.fillWidth: true - Layout.alignment: Qt.AlignTop - - text: packageData.packageVersion - font: UM.Theme.getFont("default") - color: UM.Theme.getColor("text") - } - - UM.SimpleButton - { - id: externalLinkButton - - Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width - Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height - Layout.alignment: Qt.AlignTop - - iconSource: UM.Theme.getIcon("LinkExternal") - hoverColor: UM.Theme.getColor("text_link") - backgroundColor: UM.Theme.getColor("detail_background") - hoverBackgroundColor: UM.Theme.getColor("action_button_hovered") - onClicked: Qt.openUrlExternally(packageData.packageInfoUrl) - } + text: packageData.displayName + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("text") + verticalAlignment: Text.AlignTop } - RowLayout + Control { - id: downloadCountRow + Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width + Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height + //width: UM.Theme.getSize("card_tiny_icon").width + //height: UM.Theme.getSize("card_tiny_icon").height - width: childrenRect.width - height: childrenRect.height - x: UM.Theme.getSize("thin_margin").width - y: UM.Theme.getSize("thin_margin").height + enabled: packageData.isVerified + visible: packageData.isVerified - spacing: UM.Theme.getSize("thin_margin").width + Cura.ToolTip + { + tooltipText: catalog.i18nc("@info", "Verified") + visible: parent.hovered + } + + Rectangle + { + anchors.fill: parent + color: UM.Theme.getColor("action_button_hovered") + radius: width + UM.RecolorImage + { + anchors.fill: parent + color: UM.Theme.getColor("primary") + source: UM.Theme.getIcon("CheckCircle") + } + } + + //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 { - id: downloadCountIcon - width: UM.Theme.getSize("card_tiny_icon").width - height: UM.Theme.getSize("card_tiny_icon").height - color: UM.Theme.getColor("icon") + anchors.fill: parent - source: UM.Theme.getIcon("Download") + color: UM.Theme.getColor("primary") + source: UM.Theme.getIcon("CheckCircle") // TODO } - Label - { - id: downloadCountLabel - text: packageData.downloadCount - } + // onClicked: Qt.openUrlExternally( XXXXXX ) // TODO } - Item + Label { - id: descriptionArea + text: packageData.packageVersion + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + Layout.fillWidth: true + } + + UM.SimpleButton + { + id: externalLinkButton + + Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width + Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height + Layout.alignment: Qt.AlignTop + + iconSource: UM.Theme.getIcon("LinkExternal") + hoverColor: UM.Theme.getColor("text_link") + backgroundColor: UM.Theme.getColor("detail_background") + hoverBackgroundColor: UM.Theme.getColor("action_button_hovered") + onClicked: Qt.openUrlExternally(packageData.packageInfoUrl) + } + } + + RowLayout + { + id: downloadCountRow + + x: UM.Theme.getSize("thin_margin").width + y: UM.Theme.getSize("thin_margin").height + + spacing: UM.Theme.getSize("thin_margin").width + + UM.RecolorImage + { + id: downloadCountIcon + width: UM.Theme.getSize("card_tiny_icon").width + height: UM.Theme.getSize("card_tiny_icon").height + color: UM.Theme.getColor("icon") + + source: UM.Theme.getIcon("Download") + } + + Label + { + id: downloadCountLabel + text: packageData.downloadCount + } + } + + Item + { + id: descriptionArea + width: parent.width + height: descriptionLabel.height + + Label + { + id: descriptionLabel width: parent.width - height: descriptionLabel.height + property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision. - Label + text: packageData.description + font: UM.Theme.getFont("medium") + color: UM.Theme.getColor("text") + maximumLineCount: 2 + wrapMode: Text.Wrap + elide: Text.ElideRight + + onLineLaidOut: { - 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) { - if(truncated && line.isLast) + let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - UM.Theme.getSize("default_margin").width; + if(line.implicitWidth > max_line_width) { - let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - 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; + line.width = max_line_width; } + else + { + line.width = line.implicitWidth - fontMetrics.advanceWidth("…"); //Truncate the ellipsis. We're adding this ourselves. + } + descriptionLabel.lastLineWidth = line.implicitWidth; } } - - 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 - - // NOTE: Is this the right URL for this action? - onClicked: Qt.openUrlExternally(packageData.packageInfoUrl) - } - - Label - { - anchors.left: parent.left - anchors.leftMargin: descriptionLabel.lastLineWidth - anchors.bottom: readMoreButton.bottom - - text: "… " - font: descriptionLabel.font - color: descriptionLabel.color - visible: descriptionLabel.truncated - } } - RowLayout //Author and action buttons. + Cura.TertiaryButton { - width: parent.width + 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 + + // NOTE: Is this the right URL for this action? + onClicked: Qt.openUrlExternally(packageData.packageInfoUrl) + } + + Label + { + anchors.left: parent.left + anchors.leftMargin: descriptionLabel.lastLineWidth + anchors.bottom: readMoreButton.bottom + + text: "… " + font: descriptionLabel.font + color: descriptionLabel.color + visible: descriptionLabel.truncated + } + } + + RowLayout //Author and action buttons. + { + width: parent.width + Layout.alignment: Qt.AlignTop + spacing: UM.Theme.getSize("thin_margin").width + + Label + { + id: authorBy Layout.alignment: Qt.AlignTop - spacing: UM.Theme.getSize("thin_margin").width - Label - { - id: authorBy - Layout.alignment: Qt.AlignTop + text: catalog.i18nc("@label", "By") + font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") + } - 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 - 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 - 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) + } - 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: 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.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 - } + 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 } } }