From 51de2340825c46a798aeffe72a0d8d69012b6882 Mon Sep 17 00:00:00 2001 From: Remco Burema Date: Wed, 10 Nov 2021 18:09:36 +0100 Subject: [PATCH 1/5] Links, hovers, ensmallify layout. part of CURA-8561 --- .../Marketplace/resources/qml/PackageCard.qml | 144 +++++++++++++----- resources/themes/cura-light/theme.json | 1 + 2 files changed, 111 insertions(+), 34 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 35eb94c422..05a74de228 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -13,19 +13,18 @@ Rectangle property var packageData width: parent ? parent.width : 0 - height: childrenRect.height + UM.Theme.getSize("default_margin").height * 2 + height: childrenRect.height color: UM.Theme.getColor("main_background") radius: UM.Theme.getSize("default_radius").width RowLayout { - width: parent.width - UM.Theme.getSize("default_margin").width * 2 - height: childrenRect.height - x: UM.Theme.getSize("default_margin").width - y: UM.Theme.getSize("default_margin").height + width: parent.width - UM.Theme.getSize("thin_margin").width * 2 + x: UM.Theme.getSize("thin_margin").width + y: UM.Theme.getSize("thin_margin").height - spacing: UM.Theme.getSize("default_margin").width + spacing: UM.Theme.getSize("thin_margin").width Image //Separate column for icon on the left. { @@ -42,14 +41,11 @@ Rectangle Layout.preferredHeight: childrenRect.height Layout.alignment: Qt.AlignTop - spacing: UM.Theme.getSize("default_margin").height - RowLayout //Title row. { + Layout.alignment: Qt.AlignTop width: parent.width - spacing: UM.Theme.getSize("default_margin").width - Label { Layout.alignment: Qt.AlignTop @@ -64,25 +60,59 @@ Rectangle spacing: parent.spacing Layout.alignment: Qt.AlignTop - UM.RecolorImage + Control { - width: UM.Theme.getSize("section_icon").width - height: UM.Theme.getSize("section_icon").height + width: UM.Theme.getSize("card_tiny_icon").width + height: UM.Theme.getSize("card_tiny_icon").height + Layout.alignment: Qt.AlignTop - color: UM.Theme.getColor("primary") - visible: packageData.isVerified - source: UM.Theme.getIcon("CheckCircle") + enabled: packageData.isVerified - // TODO: on hover + Cura.ToolTip + { + tooltipText: catalog.i18nc("@info", "Verified") + visible: parent.hovered + } + + UM.RecolorImage + { + anchors.fill: parent + + color: UM.Theme.getColor("primary") + visible: packageData.isVerified + source: UM.Theme.getIcon("CheckCircle") + } + + //NOTE: Can we link to something here? (Probably a static link explaining what verified is): + // onClicked: Qt.openUrlExternally( XXXXXX ) } - Rectangle - { // placeholder for 'certified material' icon+link whenever we implement the materials part of this card - width: UM.Theme.getSize("section_icon").width - height: UM.Theme.getSize("section_icon").height + Control + { + width: UM.Theme.getSize("card_tiny_icon").width + height: UM.Theme.getSize("card_tiny_icon").height + Layout.alignment: Qt.AlignTop - visible: false - // TODO: on hover + 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") + visible: packageData.isVerified + source: UM.Theme.getIcon("CheckCircle") // TODO + } + + // onClicked: Qt.openUrlExternally( XXXXXX ) // TODO } } @@ -96,16 +126,52 @@ Rectangle color: UM.Theme.getColor("text") } - UM.RecolorImage + Button { - Layout.preferredWidth: UM.Theme.getSize("section_icon").width - Layout.preferredHeight: UM.Theme.getSize("section_icon").height + Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width + Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height Layout.alignment: Qt.AlignTop - color: UM.Theme.getColor("icon") - source: UM.Theme.getIcon("LinkExternal") + UM.RecolorImage + { + anchors.fill: parent + color: UM.Theme.getColor("icon") + source: UM.Theme.getIcon("LinkExternal") + } - // TODO: on clicked url + onClicked: Qt.openUrlExternally(packageData.packageInfoUrl) + } + } + + RowLayout + { + width: parent.width - UM.Theme.getSize("thin_margin").width * 2 + height: childrenRect.height + x: UM.Theme.getSize("thin_margin").width + y: UM.Theme.getSize("thin_margin").height + + spacing: UM.Theme.getSize("thin_margin").width + + enabled: false // remove + visible: false // replace w state? + // TODO: hide/unhide on states (folded versus header state) + + UM.RecolorImage + { + id: downloadCountIcon + width: UM.Theme.getSize("card_tiny_icon").height + height: UM.Theme.getSize("card_tiny_icon").height + color: UM.Theme.getColor("icon") + + source: UM.Theme.getIcon("Download") + } + + Label + { + id: downloadCountLabel + anchors.left: downloadCountIcon.right + + text: packageData.downloadCount } } @@ -161,6 +227,9 @@ Rectangle 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 @@ -179,13 +248,13 @@ Rectangle RowLayout //Author and action buttons. { width: parent.width - - spacing: UM.Theme.getSize("default_margin").width + Layout.alignment: Qt.AlignBottom + spacing: UM.Theme.getSize("thin_margin").width Label { id: authorBy - Layout.alignment: Qt.AlignTop + Layout.alignment: Qt.AlignBottom text: catalog.i18nc("@label", "By") font: UM.Theme.getFont("default") @@ -196,32 +265,39 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: authorBy.height - Layout.alignment: Qt.AlignTop + Layout.alignment: Qt.AlignBottom 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 - // TODO on clicked (is link) -> MouseArea? + onClicked: Qt.openUrlExternally(packageData.authorInfoUrl) } Cura.SecondaryButton { + Layout.alignment: Qt.AlignBottom + Layout.preferredHeight: authorBy.height text: catalog.i18nc("@button", "Disable") // not functional right now } Cura.SecondaryButton { + Layout.alignment: Qt.AlignBottom + Layout.preferredHeight: authorBy.height text: catalog.i18nc("@button", "Uninstall") // not functional right now } Cura.PrimaryButton { + Layout.alignment: Qt.AlignBottom + Layout.preferredHeight: authorBy.height text: catalog.i18nc("@button", "Update") // not functional right now } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 07ed1a899d..a4f3172036 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -556,6 +556,7 @@ "card": [25.0, 8.75], "card_icon": [6.0, 6.0], + "card_tiny_icon": [1.2, 1.2], "button": [4, 4], "button_icon": [2.5, 2.5], From c1f2da8820794dea4f1c38b1124d9c77c0086bd4 Mon Sep 17 00:00:00 2001 From: Remco Burema Date: Thu, 11 Nov 2021 17:30:43 +0100 Subject: [PATCH 2/5] Layout fixes. Prevent 'height' based binding loops. part of CURA-8561 --- .../Marketplace/resources/qml/PackageCard.qml | 23 ++++++++----------- resources/qml/ToolTip.qml | 4 ++-- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 05a74de228..00f66751e3 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -12,7 +12,7 @@ Rectangle { property var packageData - width: parent ? parent.width : 0 + width: parent ? parent.width - UM.Theme.getSize("default_margin").width : 0 height: childrenRect.height color: UM.Theme.getColor("main_background") @@ -21,10 +21,11 @@ Rectangle RowLayout { 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("thin_margin").width + spacing: UM.Theme.getSize("default_margin").width Image //Separate column for icon on the left. { @@ -38,7 +39,6 @@ Rectangle Column { Layout.fillWidth: true - Layout.preferredHeight: childrenRect.height Layout.alignment: Qt.AlignTop RowLayout //Title row. @@ -169,8 +169,6 @@ Rectangle Label { id: downloadCountLabel - anchors.left: downloadCountIcon.right - text: packageData.downloadCount } } @@ -248,13 +246,13 @@ Rectangle RowLayout //Author and action buttons. { width: parent.width - Layout.alignment: Qt.AlignBottom + Layout.alignment: Qt.AlignTop spacing: UM.Theme.getSize("thin_margin").width Label { id: authorBy - Layout.alignment: Qt.AlignBottom + Layout.alignment: Qt.AlignTop text: catalog.i18nc("@label", "By") font: UM.Theme.getFont("default") @@ -265,7 +263,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: authorBy.height - Layout.alignment: Qt.AlignBottom + Layout.alignment: Qt.AlignTop text: packageData.authorName textFont: UM.Theme.getFont("default_bold") @@ -280,24 +278,21 @@ Rectangle Cura.SecondaryButton { - Layout.alignment: Qt.AlignBottom - Layout.preferredHeight: authorBy.height + Layout.alignment: Qt.AlignTop text: catalog.i18nc("@button", "Disable") // not functional right now } Cura.SecondaryButton { - Layout.alignment: Qt.AlignBottom - Layout.preferredHeight: authorBy.height + Layout.alignment: Qt.AlignTop text: catalog.i18nc("@button", "Uninstall") // not functional right now } Cura.PrimaryButton { - Layout.alignment: Qt.AlignBottom - Layout.preferredHeight: authorBy.height + Layout.alignment: Qt.AlignTop text: catalog.i18nc("@button", "Update") // not functional right now } diff --git a/resources/qml/ToolTip.qml b/resources/qml/ToolTip.qml index 3157f81d89..c4edc5a361 100644 --- a/resources/qml/ToolTip.qml +++ b/resources/qml/ToolTip.qml @@ -38,7 +38,7 @@ ToolTip onAboutToHide: hide() // If the text is not set, just set the height to 0 to prevent it from showing - height: text != "" ? label.contentHeight + 2 * UM.Theme.getSize("thin_margin").width: 0 + height: label.contentHeight + 2 * UM.Theme.getSize("thin_margin").width x: { @@ -74,7 +74,7 @@ ToolTip } function show() { - opacity = 1 + opacity = text != "" ? 1 : 0 } function hide() { From 82f140aa395c3d54221ae2f11df741b4627cbe30 Mon Sep 17 00:00:00 2001 From: Remco Burema Date: Thu, 11 Nov 2021 18:07:21 +0100 Subject: [PATCH 3/5] Folded versus unfolded. Hide disable/uninstall/install buttons, they're not active anyway and it's not part of this ticket in what state they should be hidden or not. What is part of the folded versus header is the download count row. (Also adapt link color.) part of CURA-8561 --- .../Marketplace/resources/qml/PackageCard.qml | 59 +++++++++++++++---- 1 file changed, 47 insertions(+), 12 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 00f66751e3..35bf17b0c9 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -18,6 +18,30 @@ Rectangle color: UM.Theme.getColor("main_background") radius: UM.Theme.getSize("default_radius").width + states: + [ + State + { + name: "Folded" + when: true // TODO + PropertyChanges + { + target: downloadCountRow + visible: false + } + }, + State + { + name: "Header" + when: false // TODO + PropertyChanges + { + target: downloadCountRow + visible: true + } + } + ] + RowLayout { width: parent.width - UM.Theme.getSize("thin_margin").width * 2 @@ -128,15 +152,23 @@ Rectangle Button { + id: externalLinkButton + Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height Layout.alignment: Qt.AlignTop - UM.RecolorImage + Rectangle { anchors.fill: parent - color: UM.Theme.getColor("icon") - source: UM.Theme.getIcon("LinkExternal") + color: externalLinkButton.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("detail_background") + + UM.RecolorImage + { + anchors.fill: parent + color: externalLinkButton.hovered ? UM.Theme.getColor("text_link") : UM.Theme.getColor("text") + source: UM.Theme.getIcon("LinkExternal") + } } onClicked: Qt.openUrlExternally(packageData.packageInfoUrl) @@ -145,21 +177,21 @@ Rectangle RowLayout { - width: parent.width - UM.Theme.getSize("thin_margin").width * 2 + id: downloadCountRow + + width: childrenRect.width height: childrenRect.height x: UM.Theme.getSize("thin_margin").width y: UM.Theme.getSize("thin_margin").height spacing: UM.Theme.getSize("thin_margin").width - enabled: false // remove - visible: false // replace w state? - // TODO: hide/unhide on states (folded versus header state) + visible: false // start up invisible (see states) UM.RecolorImage { id: downloadCountIcon - width: UM.Theme.getSize("card_tiny_icon").height + width: UM.Theme.getSize("card_tiny_icon").width height: UM.Theme.getSize("card_tiny_icon").height color: UM.Theme.getColor("icon") @@ -278,23 +310,26 @@ Rectangle Cura.SecondaryButton { + id: disableButton Layout.alignment: Qt.AlignTop text: catalog.i18nc("@button", "Disable") - // not functional right now + 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") - // not functional right now + 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") - // not functional right now + text: catalog.i18nc("@button", "Update") // OR Download, if new! + visible: false // not functional right now, also only when unfolding and required } } } From 4a7a74cba61d295750a86e5e99e93adcf3145523 Mon Sep 17 00:00:00 2001 From: Remco Burema Date: Fri, 12 Nov 2021 08:45:09 +0100 Subject: [PATCH 4/5] Also make description area foldable. part of CURA-8561 --- plugins/Marketplace/resources/qml/PackageCard.qml | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 35bf17b0c9..bbe7cd4de6 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -29,6 +29,11 @@ Rectangle target: downloadCountRow visible: false } + PropertyChanges + { + target: descriptionArea + visible: true + } }, State { @@ -39,6 +44,11 @@ Rectangle target: downloadCountRow visible: true } + PropertyChanges + { + target: descriptionArea + visible: false + } } ] @@ -186,8 +196,6 @@ Rectangle spacing: UM.Theme.getSize("thin_margin").width - visible: false // start up invisible (see states) - UM.RecolorImage { id: downloadCountIcon @@ -207,6 +215,7 @@ Rectangle Item { + id: descriptionArea width: parent.width height: descriptionLabel.height From d47b2fb5dd6a1a8559ce1ce7006f0218a62a0500 Mon Sep 17 00:00:00 2001 From: Remco Burema Date: Fri, 12 Nov 2021 08:52:48 +0100 Subject: [PATCH 5/5] Control should be (in)visible, not (just) image. part oc CURA-8561 --- plugins/Marketplace/resources/qml/PackageCard.qml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index bbe7cd4de6..3a185a3e02 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -101,6 +101,7 @@ Rectangle Layout.alignment: Qt.AlignTop enabled: packageData.isVerified + visible: packageData.isVerified Cura.ToolTip { @@ -113,7 +114,6 @@ Rectangle anchors.fill: parent color: UM.Theme.getColor("primary") - visible: packageData.isVerified source: UM.Theme.getIcon("CheckCircle") } @@ -142,7 +142,6 @@ Rectangle anchors.fill: parent color: UM.Theme.getColor("primary") - visible: packageData.isVerified source: UM.Theme.getIcon("CheckCircle") // TODO }