Merge branch 'marketplace_redesign' of github.com:ultimaker/cura into marketplace_navigation_improvements

plugins/Marketplace/resources/qml/PackageCard.qml

@@ -12,18 +12,52 @@ Rectangle
 {
     property var packageData
 
-    width: parent ? parent.width : 0
+    width: parent ? parent.width - UM.Theme.getSize("default_margin").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
 
+    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
+        width: parent.width - UM.Theme.getSize("thin_margin").width * 2
-        height: childrenRect.height
+        height: childrenRect.height + UM.Theme.getSize("thin_margin").height * 2
-        x: UM.Theme.getSize("default_margin").width
+        x: UM.Theme.getSize("thin_margin").width
-        y: UM.Theme.getSize("default_margin").height
+        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
+                        width: UM.Theme.getSize("card_tiny_icon").width
-                        height: UM.Theme.getSize("section_icon").height
+                        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
                         }
 
-                    Rectangle
+                        UM.RecolorImage
-                    {   // placeholder for 'certified material' icon+link whenever we implement the materials part of this card
+                        {
-                        width: UM.Theme.getSize("section_icon").width
+                            anchors.fill: parent
-                        height: UM.Theme.getSize("section_icon").height
 
-                        visible: false
+                            color: UM.Theme.getColor("primary")
-                        // TODO: on hover
+                            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
                     }
                 }
 
@@ -96,21 +159,62 @@ Rectangle
                     color: UM.Theme.getColor("text")
                 }
 
-                UM.RecolorImage
+                Button
                 {
-                    Layout.preferredWidth: UM.Theme.getSize("section_icon").width
+                    id: externalLinkButton
-                    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")
+                    Rectangle
-                    source: UM.Theme.getIcon("LinkExternal")
+                    {
+                        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
-
+                Layout.alignment: Qt.AlignTop
-                spacing: UM.Theme.getSize("default_margin").width
+                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")
+                    id: installButton
-                    // not functional right now
+                    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
                 }
             }
         }

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() {

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],