From e93ecd369991dd2f64f89c17326390bf967189c6 Mon Sep 17 00:00:00 2001 From: Remco Burema Date: Fri, 5 Nov 2021 09:26:27 +0100 Subject: [PATCH 01/24] Move what is already there of 'package card' to it's own file. part of CURA-8561 --- .../Marketplace/resources/qml/PackageCard.qml | 28 +++++++++++++++++++ .../Marketplace/resources/qml/Packages.qml | 19 ++----------- 2 files changed, 30 insertions(+), 17 deletions(-) create mode 100644 plugins/Marketplace/resources/qml/PackageCard.qml diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml new file mode 100644 index 0000000000..0a6c33a5b9 --- /dev/null +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -0,0 +1,28 @@ +// 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 UM 1.4 as UM + +Rectangle +{ + property var packageData + + width: parent.width + height: UM.Theme.getSize("card").height + + color: UM.Theme.getColor("main_background") + radius: UM.Theme.getSize("default_radius").width + + Label + { + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: Math.round((parent.height - height) / 2) + + text: packageData.displayName + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("text") + } +} diff --git a/plugins/Marketplace/resources/qml/Packages.qml b/plugins/Marketplace/resources/qml/Packages.qml index c9ddf88d16..95064c4469 100644 --- a/plugins/Marketplace/resources/qml/Packages.qml +++ b/plugins/Marketplace/resources/qml/Packages.qml @@ -46,24 +46,9 @@ ScrollView } } - delegate: Rectangle + delegate: PackageCard { - width: packagesListview.width - height: UM.Theme.getSize("card").height - - color: UM.Theme.getColor("main_background") - radius: UM.Theme.getSize("default_radius").width - - Label - { - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.leftMargin: Math.round((parent.height - height) / 2) - - text: model.package.displayName - font: UM.Theme.getFont("medium_bold") - color: UM.Theme.getColor("text") - } + packageData: model.package } //Wrapper item to add spacing between content and footer. From bb51dc7d140d6451e60fe4987c9e52682622916f Mon Sep 17 00:00:00 2001 From: Remco Burema Date: Fri, 5 Nov 2021 18:44:31 +0100 Subject: [PATCH 02/24] Gather and show required information. Also add 'Downalod' icon. Still very much WIP and nonfunctional. part of CURA-8561 --- plugins/Marketplace/PackageModel.py | 52 ++- .../Marketplace/resources/qml/PackageCard.qml | 315 +++++++++++++++++- .../cura-light/icons/default/Download.svg | 3 + 3 files changed, 361 insertions(+), 9 deletions(-) create mode 100644 resources/themes/cura-light/icons/default/Download.svg diff --git a/plugins/Marketplace/PackageModel.py b/plugins/Marketplace/PackageModel.py index e57a402fd6..0e73cac3b7 100644 --- a/plugins/Marketplace/PackageModel.py +++ b/plugins/Marketplace/PackageModel.py @@ -4,10 +4,12 @@ from PyQt5.QtCore import pyqtProperty, QObject from typing import Any, Dict, Optional -from UM.i18n import i18nCatalog # To translate placeholder names if data is not present. +from UM.Util import parseBool +from UM.i18n import i18nCatalog # To translate placeholder names if data is not present. catalog = i18nCatalog("cura") + class PackageModel(QObject): """ Represents a package, containing all the relevant information to be displayed about a package. @@ -25,17 +27,65 @@ class PackageModel(QObject): """ super().__init__(parent) self._package_id = package_data.get("package_id", "UnknownPackageId") + + self._icon_url = package_data.get("icon_url", "") self._display_name = package_data.get("display_name", catalog.i18nc("@label:property", "Unknown Package")) + self._is_verified = "verified" in package_data.get("tags", []) + self._package_version = package_data.get("package_version", "") # Display purpose, no need for 'UM.Version'. + self._package_info_url = package_data.get("website", "") # Not to be confused with 'download_url'. + self._download_count = package_data.get("download_count", 0) + self._description = package_data.get("description", "") + + self._download_url = package_data.get("download_url", "") # Not used yet, will be. + self._release_notes = package_data.get("release_notes", "") # Not used yet, propose to add to description? + + author_data = package_data.get("author", {}) + self._author_name = author_data.get("display_name", catalog.i18nc("@label:property", "Unknown Author")) + self._author_info_url = author_data.get("website", "") + self._section_title = section_title + # Note that there's a lot more info in the package_data than just these specified here. @pyqtProperty(str, constant = True) def packageId(self) -> str: return self._package_id + @pyqtProperty(str, constant=True) + def iconUrl(self): + return self._icon_url + @pyqtProperty(str, constant = True) def displayName(self) -> str: return self._display_name + @pyqtProperty(bool, constant=True) + def isVerified(self): + return self._is_verified + + @pyqtProperty(str, constant=True) + def packageVersion(self): + return self._package_version + + @pyqtProperty(str, constant=True) + def packageInfoUrl(self): + return self._package_info_url + + @pyqtProperty(int, constant=True) + def downloadCount(self): + return self._download_count + + @pyqtProperty(str, constant=True) + def description(self): + return self._description + + @pyqtProperty(str, constant=True) + def authorName(self): + return self._author_name + + @pyqtProperty(str, constant=True) + def authorInfoUrl(self): + return self._author_info_url + @pyqtProperty(str, constant = True) def sectionTitle(self) -> Optional[str]: return self._section_title diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 0a6c33a5b9..c200910077 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -3,7 +3,9 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 -import UM 1.4 as UM + +import UM 1.6 as UM +import Cura 1.6 as Cura Rectangle { @@ -15,14 +17,311 @@ Rectangle color: UM.Theme.getColor("main_background") radius: UM.Theme.getSize("default_radius").width - Label + Image { - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.leftMargin: Math.round((parent.height - height) / 2) + id: packageIcon + anchors + { + top: parent.top + left: parent.left + margins: UM.Theme.getSize("thin_margin").width + } + width: UM.Theme.getSize("section_icon").width * 3 + height: UM.Theme.getSize("section_icon").height * 3 - text: packageData.displayName - font: UM.Theme.getFont("medium_bold") - color: UM.Theme.getColor("text") + source: packageData.iconUrl != "" ? packageData.iconUrl : UM.Theme.getImage("CicleOutline") + } + + Item + { + anchors + { + top: parent.top + bottom: parent.bottom + right: parent.right + left: packageIcon.left + margins: UM.Theme.getSize("thin_margin").width + } + + Item + { + id: firstRowItems + anchors + { + top: parent.top + right: parent.right + left: parent.left + margins: UM.Theme.getSize("thin_margin").width + } + + Label + { + id: titleLabel + anchors + { + top: parent.top + left: parent.left + margins: UM.Theme.getSize("thin_margin").width + } + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("text") + + text: packageData.displayName + } + + UM.RecolorImage + { + id: verifiedIcon + anchors + { + top: parent.top + left: titleLabel.right + margins: UM.Theme.getSize("thin_margin").width + } + width: UM.Theme.getSize("section_icon").height + height: UM.Theme.getSize("section_icon").height + color: UM.Theme.getColor("icon") + + visible: packageData.isVerified + source: UM.Theme.getIcon("CheckCircle") + + // TODO: on hover + } + + Rectangle + { // placeholder for 'certified material' icon+link whenever we implement the materials part of this card + id: certifiedIcon + anchors + { + top: parent.top + left: verifiedIcon.right + margins: UM.Theme.getSize("thin_margin").width + } + width: UM.Theme.getSize("section_icon").height + height: UM.Theme.getSize("section_icon").height + + // TODO: on hover + } + + Label + { + id: versionLabel + anchors + { + top: parent.top + left: certifiedIcon.right + margins: UM.Theme.getSize("thin_margin").width + } + + text: packageData.packageVersion + } + + UM.RecolorImage + { + id: packageInfoLink + anchors + { + top: parent.top + right: parent.right + margins: UM.Theme.getSize("thin_margin").width + } + width: UM.Theme.getSize("section_icon").height + height: UM.Theme.getSize("section_icon").height + color: UM.Theme.getColor("icon") + + source: UM.Theme.getIcon("Link") + + // TODO: on clicked url + } + } + + Item + { + id: secondRowItems + anchors + { + top: firstRowItems.bottom + right: parent.right + left: parent.left + margins: UM.Theme.getSize("thin_margin").width + } + + UM.RecolorImage + { + id: downloadCountIcon + anchors + { + top: parent.top + left: parent.left + margins: UM.Theme.getSize("thin_margin").width + } + width: UM.Theme.getSize("section_icon").height + height: UM.Theme.getSize("section_icon").height + color: UM.Theme.getColor("icon") + + source: UM.Theme.getIcon("Download") // TODO: The right icon. + } + + Label + { + id: downloadCountLobel + anchors + { + top: parent.top + left: downloadCountIcon.right + margins: UM.Theme.getSize("thin_margin").width + } + + text: packageData.downloadCount + } + } + + Item + { + id: mainRowItems + anchors + { + top: secondRowItems.bottom + bottom: footerRowItems.top + right: parent.right + left: parent.left + margins: UM.Theme.getSize("thin_margin").width + } + + readonly property int charLimitSmall: 130 + + Label + { + id: descriptionLabel + anchors + { + top: parent.top + left: parent.left + right: parent.right + bottom: parent.bottom + margins: UM.Theme.getSize("thin_margin").width + } + + maximumLineCount: 2 + text: packageData.description.substring(0, parent.charLimitSmall) + } + + Cura.TertiaryButton + { + id: readMoreLabel + anchors + { + right: parent.right + bottom: parent.bottom + margins: UM.Theme.getSize("thin_margin").width + } + + visible: descriptionLabel.text.length > parent.charLimitSmall + text: catalog.i18nc("@info", "Read more") + + // TODO: overlaps elided text, is this ok? + } + + // TODO: _only_ limit to 130 or 2 rows (& all that that entails) when 'small' + } + + Item + { + id: footerRowItems + anchors + { + bottom: parent.bottom + right: parent.right + left: parent.left + margins: UM.Theme.getSize("thin_margin").width + } + + Item + { + Label + { + id: preAuthorNameText + anchors + { + top: parent.top + left: parent.left + margins: UM.Theme.getSize("thin_margin").width + } + + text: catalog.i18nc("@label", "By") + } + + Cura.TertiaryButton + { + id: authorNameLabel + anchors + { + top: parent.top + left: preAuthorNameText.right + margins: UM.Theme.getSize("thin_margin").width + } + + text: packageData.authorName + + // TODO on clicked (is link) -> MouseArea? + } + } + + Item + { + id: packageActionButtons + anchors + { + bottom: parent.bottom + right: parent.right + margins: UM.Theme.getSize("thin_margin").width + } + + Cura.SecondaryButton + { + id: disableButton + anchors + { + right: uninstallButton.left + bottom: parent.bottom + margins: UM.Theme.getSize("thin_margin").width + } + height: parent.height + + text: catalog.i18nc("@button", "Disable") + // not functional right now + } + + Cura.SecondaryButton + { + id: uninstallButton + anchors + { + right: updateButton.left + bottom: parent.bottom + margins: UM.Theme.getSize("thin_margin").width + } + height: parent.height + + text: catalog.i18nc("@button", "Uninstall") + // not functional right now + } + + Cura.PrimaryButton + { + id: updateButton + anchors + { + right: parent.right + bottom: parent.bottom + margins: UM.Theme.getSize("thin_margin").width + } + height: parent.height + + text: catalog.i18nc("@button", "Update") + // not functional right now + } + } + } } } diff --git a/resources/themes/cura-light/icons/default/Download.svg b/resources/themes/cura-light/icons/default/Download.svg new file mode 100644 index 0000000000..cbe0da2a99 --- /dev/null +++ b/resources/themes/cura-light/icons/default/Download.svg @@ -0,0 +1,3 @@ + + + From e0508b0f4f1fd4d0b705f70097e717cb9d03248a Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 15:08:33 +0100 Subject: [PATCH 03/24] Correct size and margins for package icon Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 6 +++--- resources/themes/cura-light/theme.json | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index c200910077..9925801abc 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -24,10 +24,10 @@ Rectangle { top: parent.top left: parent.left - margins: UM.Theme.getSize("thin_margin").width + margins: UM.Theme.getSize("default_margin").width } - width: UM.Theme.getSize("section_icon").width * 3 - height: UM.Theme.getSize("section_icon").height * 3 + width: UM.Theme.getSize("card_icon").width + height: UM.Theme.getSize("card_icon").height source: packageData.iconUrl != "" ? packageData.iconUrl : UM.Theme.getImage("CicleOutline") } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index abd4844f47..07ed1a899d 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -553,7 +553,9 @@ "standard_list_lineheight": [1.5, 1.5], "standard_arrow": [1.0, 1.0], + "card": [25.0, 8.75], + "card_icon": [6.0, 6.0], "button": [4, 4], "button_icon": [2.5, 2.5], From 4014562cdcebdcdef81503f774423efc79f57165 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 15:47:09 +0100 Subject: [PATCH 04/24] Use rows and columns instead of anchors for layout This is in my opinion much easier to follow and maintain. It also fixes the layout. The original code had a lot of overlapping parts. Contributes to issue CURA-8561. --- .../Marketplace/resources/qml/PackageCard.qml | 329 +++++------------- 1 file changed, 78 insertions(+), 251 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 9925801abc..88eeb50356 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -3,6 +3,7 @@ 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 @@ -12,312 +13,138 @@ Rectangle property var packageData width: parent.width - height: UM.Theme.getSize("card").height + height: childrenRect.height + UM.Theme.getSize("default_margin").height * 2 color: UM.Theme.getColor("main_background") radius: UM.Theme.getSize("default_radius").width - Image + RowLayout { - id: packageIcon - anchors - { - top: parent.top - left: parent.left - margins: UM.Theme.getSize("default_margin").width - } - width: UM.Theme.getSize("card_icon").width - height: UM.Theme.getSize("card_icon").height + 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 - source: packageData.iconUrl != "" ? packageData.iconUrl : UM.Theme.getImage("CicleOutline") - } + spacing: UM.Theme.getSize("default_margin").width - Item - { - anchors + Image //Separate column for icon on the left. { - top: parent.top - bottom: parent.bottom - right: parent.right - left: packageIcon.left - margins: UM.Theme.getSize("thin_margin").width + Layout.preferredWidth: UM.Theme.getSize("card_icon").width + Layout.preferredHeight: UM.Theme.getSize("card_icon").height + + source: packageData.iconUrl != "" ? packageData.iconUrl : UM.Theme.getImage("CicleOutline") } - Item + Column { - id: firstRowItems - anchors + Layout.fillWidth: true + Layout.preferredHeight: childrenRect.height + + spacing: UM.Theme.getSize("default_margin").height + + RowLayout //Title row. { - top: parent.top - right: parent.right - left: parent.left - margins: UM.Theme.getSize("thin_margin").width + width: parent.width + + spacing: UM.Theme.getSize("default_margin").width + + Label + { + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("text") + + text: packageData.displayName + } + + UM.RecolorImage + { + Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0 + Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0 + + color: UM.Theme.getColor("icon") + visible: packageData.isVerified + source: UM.Theme.getIcon("CheckCircle") + + // TODO: on hover + } + + Rectangle + { // placeholder for 'certified material' icon+link whenever we implement the materials part of this card + Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0 + Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0 + + // TODO: on hover + } + + Label + { + Layout.fillWidth: true + + text: packageData.packageVersion + } + + UM.RecolorImage + { + Layout.preferredWidth: UM.Theme.getSize("section_icon").width + Layout.preferredHeight: UM.Theme.getSize("section_icon").height + + color: UM.Theme.getColor("icon") + source: UM.Theme.getIcon("Link") + + // TODO: on clicked url + } } Label { - id: titleLabel - anchors - { - top: parent.top - left: parent.left - margins: UM.Theme.getSize("thin_margin").width - } - font: UM.Theme.getFont("medium_bold") - color: UM.Theme.getColor("text") - - text: packageData.displayName - } - - UM.RecolorImage - { - id: verifiedIcon - anchors - { - top: parent.top - left: titleLabel.right - margins: UM.Theme.getSize("thin_margin").width - } - width: UM.Theme.getSize("section_icon").height - height: UM.Theme.getSize("section_icon").height - color: UM.Theme.getColor("icon") - - visible: packageData.isVerified - source: UM.Theme.getIcon("CheckCircle") - - // TODO: on hover - } - - Rectangle - { // placeholder for 'certified material' icon+link whenever we implement the materials part of this card - id: certifiedIcon - anchors - { - top: parent.top - left: verifiedIcon.right - margins: UM.Theme.getSize("thin_margin").width - } - width: UM.Theme.getSize("section_icon").height - height: UM.Theme.getSize("section_icon").height - - // TODO: on hover - } - - Label - { - id: versionLabel - anchors - { - top: parent.top - left: certifiedIcon.right - margins: UM.Theme.getSize("thin_margin").width - } - - text: packageData.packageVersion - } - - UM.RecolorImage - { - id: packageInfoLink - anchors - { - top: parent.top - right: parent.right - margins: UM.Theme.getSize("thin_margin").width - } - width: UM.Theme.getSize("section_icon").height - height: UM.Theme.getSize("section_icon").height - color: UM.Theme.getColor("icon") - - source: UM.Theme.getIcon("Link") - - // TODO: on clicked url - } - } - - Item - { - id: secondRowItems - anchors - { - top: firstRowItems.bottom - right: parent.right - left: parent.left - margins: UM.Theme.getSize("thin_margin").width - } - - UM.RecolorImage - { - id: downloadCountIcon - anchors - { - top: parent.top - left: parent.left - margins: UM.Theme.getSize("thin_margin").width - } - width: UM.Theme.getSize("section_icon").height - height: UM.Theme.getSize("section_icon").height - color: UM.Theme.getColor("icon") - - source: UM.Theme.getIcon("Download") // TODO: The right icon. - } - - Label - { - id: downloadCountLobel - anchors - { - top: parent.top - left: downloadCountIcon.right - margins: UM.Theme.getSize("thin_margin").width - } - - text: packageData.downloadCount - } - } - - Item - { - id: mainRowItems - anchors - { - top: secondRowItems.bottom - bottom: footerRowItems.top - right: parent.right - left: parent.left - margins: UM.Theme.getSize("thin_margin").width - } - - readonly property int charLimitSmall: 130 - - Label - { - id: descriptionLabel - anchors - { - top: parent.top - left: parent.left - right: parent.right - bottom: parent.bottom - margins: UM.Theme.getSize("thin_margin").width - } + width: parent.width maximumLineCount: 2 - text: packageData.description.substring(0, parent.charLimitSmall) + text: packageData.description + elide: Text.ElideRight //TODO: Make space for Read More button. } - - Cura.TertiaryButton + /*Cura.TertiaryButton { - id: readMoreLabel - anchors - { - right: parent.right - bottom: parent.bottom - margins: UM.Theme.getSize("thin_margin").width - } + //TODO: Inline in description. visible: descriptionLabel.text.length > parent.charLimitSmall text: catalog.i18nc("@info", "Read more") // TODO: overlaps elided text, is this ok? - } + }*/ - // TODO: _only_ limit to 130 or 2 rows (& all that that entails) when 'small' - } - - Item - { - id: footerRowItems - anchors + RowLayout //Author and action buttons. { - bottom: parent.bottom - right: parent.right - left: parent.left - margins: UM.Theme.getSize("thin_margin").width - } + width: parent.width - Item - { Label { - id: preAuthorNameText - anchors - { - top: parent.top - left: parent.left - margins: UM.Theme.getSize("thin_margin").width - } - text: catalog.i18nc("@label", "By") } Cura.TertiaryButton { - id: authorNameLabel - anchors - { - top: parent.top - left: preAuthorNameText.right - margins: UM.Theme.getSize("thin_margin").width - } + Layout.fillWidth: true text: packageData.authorName // TODO on clicked (is link) -> MouseArea? } - } - - Item - { - id: packageActionButtons - anchors - { - bottom: parent.bottom - right: parent.right - margins: UM.Theme.getSize("thin_margin").width - } Cura.SecondaryButton { - id: disableButton - anchors - { - right: uninstallButton.left - bottom: parent.bottom - margins: UM.Theme.getSize("thin_margin").width - } - height: parent.height - text: catalog.i18nc("@button", "Disable") // not functional right now } Cura.SecondaryButton { - id: uninstallButton - anchors - { - right: updateButton.left - bottom: parent.bottom - margins: UM.Theme.getSize("thin_margin").width - } - height: parent.height - text: catalog.i18nc("@button", "Uninstall") // not functional right now } Cura.PrimaryButton { - id: updateButton - anchors - { - right: parent.right - bottom: parent.bottom - margins: UM.Theme.getSize("thin_margin").width - } - height: parent.height - text: catalog.i18nc("@button", "Update") // not functional right now } From 2ce31d0e71390e63986b0692d90132a3ecb5a644 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 15:51:34 +0100 Subject: [PATCH 05/24] Add placeholder image The 'CicleOutline' image doesn't exist. There is no design for this image so I'm adding the placeholder that the previous Marketplace had. Contributes to issue CURA-8561. --- plugins/Marketplace/resources/images/placeholder.svg | 3 +++ plugins/Marketplace/resources/qml/PackageCard.qml | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 plugins/Marketplace/resources/images/placeholder.svg diff --git a/plugins/Marketplace/resources/images/placeholder.svg b/plugins/Marketplace/resources/images/placeholder.svg new file mode 100644 index 0000000000..cc674a4b38 --- /dev/null +++ b/plugins/Marketplace/resources/images/placeholder.svg @@ -0,0 +1,3 @@ + + + diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 88eeb50356..52e11ebff9 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -32,7 +32,7 @@ Rectangle Layout.preferredWidth: UM.Theme.getSize("card_icon").width Layout.preferredHeight: UM.Theme.getSize("card_icon").height - source: packageData.iconUrl != "" ? packageData.iconUrl : UM.Theme.getImage("CicleOutline") + source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg" } Column From abe834752387bca92a2897344b470a537dbe26b7 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 15:54:42 +0100 Subject: [PATCH 06/24] Fix QML warning about not having parents It seems that the ListView doesn't always set the parent element correctly if it's not yet in view. This is a workaround that seems to work fine to remove the QML warnings about parent not being defined. Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 52e11ebff9..36a99410fe 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.width + width: parent ? parent.width : 0 height: childrenRect.height + UM.Theme.getSize("default_margin").height * 2 color: UM.Theme.getColor("main_background") From 8c086b9fd73e0035e1b70191c78bb91c0fe550fb Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 15:58:37 +0100 Subject: [PATCH 07/24] Align everything to top This seems to be the alignment in the design. Also gets rid of binding loops because we automatically adjust the height so you can't align to the centre or the bottom then. Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 36a99410fe..0fd2cb9ac1 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -31,6 +31,7 @@ Rectangle { Layout.preferredWidth: UM.Theme.getSize("card_icon").width Layout.preferredHeight: UM.Theme.getSize("card_icon").height + Layout.alignment: Qt.AlignTop source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg" } @@ -39,6 +40,7 @@ Rectangle { Layout.fillWidth: true Layout.preferredHeight: childrenRect.height + Layout.alignment: Qt.AlignTop spacing: UM.Theme.getSize("default_margin").height @@ -50,6 +52,8 @@ Rectangle Label { + Layout.alignment: Qt.AlignTop + font: UM.Theme.getFont("medium_bold") color: UM.Theme.getColor("text") @@ -60,6 +64,7 @@ Rectangle { Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0 Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0 + Layout.alignment: Qt.AlignTop color: UM.Theme.getColor("icon") visible: packageData.isVerified @@ -72,6 +77,7 @@ Rectangle { // placeholder for 'certified material' icon+link whenever we implement the materials part of this card Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0 Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0 + Layout.alignment: Qt.AlignTop // TODO: on hover } @@ -79,6 +85,7 @@ Rectangle Label { Layout.fillWidth: true + Layout.alignment: Qt.AlignTop text: packageData.packageVersion } @@ -87,6 +94,7 @@ Rectangle { Layout.preferredWidth: UM.Theme.getSize("section_icon").width Layout.preferredHeight: UM.Theme.getSize("section_icon").height + Layout.alignment: Qt.AlignTop color: UM.Theme.getColor("icon") source: UM.Theme.getIcon("Link") @@ -119,12 +127,15 @@ Rectangle Label { + Layout.alignment: Qt.AlignTop + text: catalog.i18nc("@label", "By") } Cura.TertiaryButton { Layout.fillWidth: true + Layout.alignment: Qt.AlignTop text: packageData.authorName From 468c2b89e196b5a92ff1a702dded52d187bb8746 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 16:09:58 +0100 Subject: [PATCH 08/24] Use wrapping for package description Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 0fd2cb9ac1..cb7f4edc54 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -107,8 +107,9 @@ Rectangle { width: parent.width - maximumLineCount: 2 text: packageData.description + maximumLineCount: 2 + wrapMode: Text.Wrap elide: Text.ElideRight //TODO: Make space for Read More button. } /*Cura.TertiaryButton From c8741898bf2aa519d3d0203f75a2ca661a7628fd Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 16:28:12 +0100 Subject: [PATCH 09/24] Decent attempt at inlining Read More button Not perfect yet. The elide is missing, for one. Contributes to issue CURA-8561. --- .../Marketplace/resources/qml/PackageCard.qml | 49 +++++++++++++------ 1 file changed, 35 insertions(+), 14 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index cb7f4edc54..15bb6bcb83 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -103,24 +103,44 @@ Rectangle } } - Label + Item { width: parent.width + height: descriptionLabel.height - text: packageData.description - maximumLineCount: 2 - wrapMode: Text.Wrap - elide: Text.ElideRight //TODO: Make space for Read More button. + Label + { + id: descriptionLabel + width: parent.width + + text: packageData.description + maximumLineCount: 2 + wrapMode: Text.Wrap + elide: Text.ElideRight + + onLineLaidOut: + { + if(line.isLast) + { + line.width = Math.min(line.width, parent.width - readMoreButton.width) + } + } + } + + Cura.TertiaryButton + { + id: readMoreButton + anchors.right: parent.right + anchors.bottom: parent.bottom + height: authorBy.height //Height of a single line. + + leftPadding: UM.Theme.getSize("default_margin").width + rightPadding: 0 + textFont: descriptionLabel.font + + text: catalog.i18nc("@info", "Read more") + } } - /*Cura.TertiaryButton - { - //TODO: Inline in description. - - visible: descriptionLabel.text.length > parent.charLimitSmall - text: catalog.i18nc("@info", "Read more") - - // TODO: overlaps elided text, is this ok? - }*/ RowLayout //Author and action buttons. { @@ -128,6 +148,7 @@ Rectangle Label { + id: authorBy Layout.alignment: Qt.AlignTop text: catalog.i18nc("@label", "By") From 57093f0ef6d003b1ed1757dc99a6d0504e63c13b Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 16:34:21 +0100 Subject: [PATCH 10/24] Hide Read More button if not truncated There would be nothing to read. Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 15bb6bcb83..4b1ab78c72 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -120,9 +120,9 @@ Rectangle onLineLaidOut: { - if(line.isLast) + if(truncated && line.isLast) { - line.width = Math.min(line.width, parent.width - readMoreButton.width) + line.width = Math.min(line.width, parent.width - readMoreButton.width); } } } @@ -134,6 +134,8 @@ Rectangle anchors.bottom: parent.bottom height: authorBy.height //Height of a single line. + visible: descriptionLabel.truncated + enabled: visible leftPadding: UM.Theme.getSize("default_margin").width rightPadding: 0 textFont: descriptionLabel.font From 7b7cb43b021bed388d7f7edc910419540bdec518 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 16:58:30 +0100 Subject: [PATCH 11/24] Improved elision It seems to correctly place the elide character now. One more detail that's incorrect is that it shows two elision characters if it's eliding due to maximum line count. I'll see what I can do... Contributes to issue CURA-8561. --- .../Marketplace/resources/qml/PackageCard.qml | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 4b1ab78c72..ee35e6c5a0 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -112,6 +112,7 @@ Rectangle { id: descriptionLabel width: parent.width + property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision. text: packageData.description maximumLineCount: 2 @@ -122,7 +123,9 @@ Rectangle { if(truncated && line.isLast) { - line.width = Math.min(line.width, parent.width - readMoreButton.width); + line.width = Math.min(line.implicitWidth, + parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ")); + descriptionLabel.lastLineWidth = line.implicitWidth; } } } @@ -132,15 +135,26 @@ Rectangle id: readMoreButton anchors.right: parent.right anchors.bottom: parent.bottom - height: authorBy.height //Height of a single line. + 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: 0 + rightPadding: UM.Theme.getSize("wide_margin").width textFont: descriptionLabel.font + isIconOnRightSide: true + } - text: catalog.i18nc("@info", "Read more") + Label + { + text: "... " + visible: descriptionLabel.truncated + anchors.left: parent.left + anchors.leftMargin: descriptionLabel.lastLineWidth + anchors.bottom: readMoreButton.bottom } } @@ -186,4 +200,10 @@ Rectangle } } } + + FontMetrics + { + id: fontMetrics + font: UM.Theme.getFont("default") + } } From 5a698bd91fafbd2bd4b95ced7c9f4e8628fd9f23 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 17:20:37 +0100 Subject: [PATCH 12/24] Truncate double ellipsis where possible I couldn't get it to truncate it if the double ellipsis is the only text on the line, like if the description contains a white line and more than 2 lines in total. It then looks like a double ellipsis (6 dots instead of 3). Doesn't look the worst, but a bit strange, but it's really difficult to fix. Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index ee35e6c5a0..d9a99c44d0 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -123,8 +123,15 @@ Rectangle { if(truncated && line.isLast) { - line.width = Math.min(line.implicitWidth, - parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ")); + let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… "); + 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; } } @@ -150,7 +157,7 @@ Rectangle Label { - text: "... " + text: "… " visible: descriptionLabel.truncated anchors.left: parent.left anchors.leftMargin: descriptionLabel.lastLineWidth From c56240f2766505f03f24b295641f2060acade6e2 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 17:22:01 +0100 Subject: [PATCH 13/24] Use correct icon for external links Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index d9a99c44d0..fa375edcb6 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -97,7 +97,7 @@ Rectangle Layout.alignment: Qt.AlignTop color: UM.Theme.getColor("icon") - source: UM.Theme.getIcon("Link") + source: UM.Theme.getIcon("LinkExternal") // TODO: on clicked url } From 234475547eb97bcce9b2b3826351df4748fc0748 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 17:25:02 +0100 Subject: [PATCH 14/24] Use correct font for all text elements Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index fa375edcb6..0e24cbcaa7 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -54,10 +54,9 @@ Rectangle { Layout.alignment: Qt.AlignTop + text: packageData.displayName font: UM.Theme.getFont("medium_bold") color: UM.Theme.getColor("text") - - text: packageData.displayName } UM.RecolorImage @@ -88,6 +87,7 @@ Rectangle Layout.alignment: Qt.AlignTop text: packageData.packageVersion + font: UM.Theme.getFont("small") } UM.RecolorImage @@ -115,6 +115,7 @@ Rectangle property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision. text: packageData.description + font: UM.Theme.getFont("default") maximumLineCount: 2 wrapMode: Text.Wrap elide: Text.ElideRight @@ -157,11 +158,13 @@ Rectangle Label { - text: "… " - visible: descriptionLabel.truncated anchors.left: parent.left anchors.leftMargin: descriptionLabel.lastLineWidth anchors.bottom: readMoreButton.bottom + + text: "… " + font: descriptionLabel.font + visible: descriptionLabel.truncated } } @@ -175,6 +178,7 @@ Rectangle Layout.alignment: Qt.AlignTop text: catalog.i18nc("@label", "By") + font: UM.Theme.getFont("default") } Cura.TertiaryButton @@ -183,6 +187,7 @@ Rectangle Layout.alignment: Qt.AlignTop text: packageData.authorName + textFont: UM.Theme.getFont("default") // TODO on clicked (is link) -> MouseArea? } From 4119cf420970b2fee440347f92dedf86a1f196e9 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 17:30:52 +0100 Subject: [PATCH 15/24] Fix layout of author button Bold, correct position and add the icon. Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 0e24cbcaa7..0c5f133dfb 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -172,6 +172,8 @@ Rectangle { width: parent.width + spacing: UM.Theme.getSize("default_margin").width + Label { id: authorBy @@ -184,10 +186,15 @@ Rectangle Cura.TertiaryButton { Layout.fillWidth: true + Layout.preferredHeight: authorBy.height Layout.alignment: Qt.AlignTop text: packageData.authorName - textFont: UM.Theme.getFont("default") + textFont: UM.Theme.getFont("default_bold") + leftPadding: 0 + rightPadding: 0 + iconSource: UM.Theme.getIcon("LinkExternal") + isIconOnRightSide: true // TODO on clicked (is link) -> MouseArea? } From f498952830803c04063040dcda2ebfbc2c5e9397 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 17:32:22 +0100 Subject: [PATCH 16/24] Give text colours to text This way it's still visible in the dark theme, rather than black on black. Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 0c5f133dfb..61632de3ef 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -88,6 +88,7 @@ Rectangle text: packageData.packageVersion font: UM.Theme.getFont("small") + color: UM.Theme.getColor("text") } UM.RecolorImage @@ -116,6 +117,7 @@ Rectangle text: packageData.description font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") maximumLineCount: 2 wrapMode: Text.Wrap elide: Text.ElideRight @@ -164,6 +166,7 @@ Rectangle text: "… " font: descriptionLabel.font + color: descriptionLabel.color visible: descriptionLabel.truncated } } @@ -181,6 +184,7 @@ Rectangle text: catalog.i18nc("@label", "By") font: UM.Theme.getFont("default") + color: UM.Theme.getColor("text") } Cura.TertiaryButton From d526e3be8cca3e2240608a8ad6350f88327a63f8 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 17:40:10 +0100 Subject: [PATCH 17/24] Easier layout shifting when icons are invisible The Row element automatically hides them and removes any spacing if they are invisible. Contributes to issue CURA-8561. --- .../Marketplace/resources/qml/PackageCard.qml | 33 +++++++++++-------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 61632de3ef..ab26699ce8 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -59,26 +59,31 @@ Rectangle color: UM.Theme.getColor("text") } - UM.RecolorImage + Row //Row inside row, but the non-layout version skips invisible elements. { - Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0 - Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0 + spacing: parent.spacing Layout.alignment: Qt.AlignTop - color: UM.Theme.getColor("icon") - visible: packageData.isVerified - source: UM.Theme.getIcon("CheckCircle") + UM.RecolorImage + { + width: UM.Theme.getSize("section_icon").width + height: UM.Theme.getSize("section_icon").height - // TODO: on hover - } + color: UM.Theme.getColor("icon") + visible: packageData.isVerified + source: UM.Theme.getIcon("CheckCircle") - Rectangle - { // placeholder for 'certified material' icon+link whenever we implement the materials part of this card - Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0 - Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0 - Layout.alignment: Qt.AlignTop + // TODO: on hover + } - // TODO: on hover + 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 + + visible: false + // TODO: on hover + } } Label From d186912596d2882ecbe5da584e35f970eef77849 Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 17:45:44 +0100 Subject: [PATCH 18/24] Correcter font sizes according to design Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index ab26699ce8..2472e71348 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -92,7 +92,7 @@ Rectangle Layout.alignment: Qt.AlignTop text: packageData.packageVersion - font: UM.Theme.getFont("small") + font: UM.Theme.getFont("default") color: UM.Theme.getColor("text") } @@ -121,7 +121,7 @@ Rectangle property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision. text: packageData.description - font: UM.Theme.getFont("default") + font: UM.Theme.getFont("medium") color: UM.Theme.getColor("text") maximumLineCount: 2 wrapMode: Text.Wrap @@ -131,7 +131,7 @@ Rectangle { if(truncated && line.isLast) { - let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… "); + 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; @@ -232,6 +232,6 @@ Rectangle FontMetrics { id: fontMetrics - font: UM.Theme.getFont("default") + font: UM.Theme.getFont("medium") } } From 1efdd9205bf36f3aac5dca1c1ea0b7955cad11af Mon Sep 17 00:00:00 2001 From: Ghostkeeper Date: Tue, 9 Nov 2021 17:47:32 +0100 Subject: [PATCH 19/24] Use primary colour for verified icon Contributes to issue CURA-8561. --- plugins/Marketplace/resources/qml/PackageCard.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 2472e71348..35eb94c422 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -69,7 +69,7 @@ Rectangle width: UM.Theme.getSize("section_icon").width height: UM.Theme.getSize("section_icon").height - color: UM.Theme.getColor("icon") + color: UM.Theme.getColor("primary") visible: packageData.isVerified source: UM.Theme.getIcon("CheckCircle") From 51de2340825c46a798aeffe72a0d8d69012b6882 Mon Sep 17 00:00:00 2001 From: Remco Burema Date: Wed, 10 Nov 2021 18:09:36 +0100 Subject: [PATCH 20/24] 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 21/24] 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 22/24] 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 23/24] 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 24/24] 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 }