diff --git a/plugins/Marketplace/resources/qml/PackageCard.qml b/plugins/Marketplace/resources/qml/PackageCard.qml index 35eb94c422..3a185a3e02 100644 --- a/plugins/Marketplace/resources/qml/PackageCard.qml +++ b/plugins/Marketplace/resources/qml/PackageCard.qml @@ -12,18 +12,52 @@ Rectangle { property var packageData - width: parent ? parent.width : 0 - height: childrenRect.height + UM.Theme.getSize("default_margin").height * 2 + width: parent ? parent.width - UM.Theme.getSize("default_margin").width : 0 + height: childrenRect.height 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 + } + PropertyChanges + { + target: descriptionArea + visible: true + } + }, + State + { + name: "Header" + when: false // TODO + PropertyChanges + { + target: downloadCountRow + visible: true + } + PropertyChanges + { + target: descriptionArea + visible: false + } + } + ] + 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 + 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 @@ -39,17 +73,13 @@ Rectangle Column { Layout.fillWidth: true - 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 +94,58 @@ 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") + enabled: packageData.isVerified visible: packageData.isVerified - source: UM.Theme.getIcon("CheckCircle") - // TODO: on hover + Cura.ToolTip + { + tooltipText: catalog.i18nc("@info", "Verified") + visible: parent.hovered + } + + 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 ) } - 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") + source: UM.Theme.getIcon("CheckCircle") // TODO + } + + // onClicked: Qt.openUrlExternally( XXXXXX ) // TODO } } @@ -96,21 +159,62 @@ 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 + id: externalLinkButton + + 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") + Rectangle + { + anchors.fill: parent + color: externalLinkButton.hovered ? UM.Theme.getColor("action_button_hovered") : UM.Theme.getColor("detail_background") - // TODO: on clicked url + 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) + } + } + + RowLayout + { + 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 + + 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 @@ -161,6 +265,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,8 +286,8 @@ Rectangle RowLayout //Author and action buttons. { width: parent.width - - spacing: UM.Theme.getSize("default_margin").width + Layout.alignment: Qt.AlignTop + spacing: UM.Theme.getSize("thin_margin").width Label { @@ -200,30 +307,37 @@ Rectangle 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 { + 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 { - text: catalog.i18nc("@button", "Update") - // not functional right now + 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 } } } 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() { 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],