Ensure that the packagecard looks like the design

CURA-8561
This commit is contained in:
Jaime van Kessel 2021-11-17 10:27:48 +01:00
parent c8491b4752
commit 4ae01df7f5

View File

@ -12,9 +12,8 @@ Rectangle
{
property var packageData
width: parent ? parent.width - UM.Theme.getSize("thin_margin").width : 0
height: childrenRect.height + UM.Theme.getSize("thin_margin").height * 2
width: parent ? parent.width - UM.Theme.getSize("default_margin").width : 0
height: UM.Theme.getSize("card").height
color: UM.Theme.getColor("main_background")
radius: UM.Theme.getSize("default_radius").width
@ -25,11 +24,6 @@ Rectangle
name: "Folded"
when: true // TODO
PropertyChanges
{
target: downloadCountRow
visible: false
}
PropertyChanges
{
target: descriptionArea
visible: true
@ -40,11 +34,6 @@ Rectangle
name: "Header"
when: false // TODO
PropertyChanges
{
target: downloadCountRow
visible: true
}
PropertyChanges
{
target: descriptionArea
visible: false
@ -59,7 +48,7 @@ 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("card_icon").width
height: width
@ -67,25 +56,23 @@ Rectangle
source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg"
}
Column
{
anchors
{
top: parent.top
left: packageItem.right
right: parent.right
margins: UM.Theme.getSize("thin_margin").width
}
RowLayout //Title row.
{
width: parent.width
spacing: UM.Theme.getSize("thin_margin").width
id: titleBar
anchors
{
left: packageItem.right
right: parent.right
top: parent.top
topMargin: UM.Theme.getSize("default_margin").height
leftMargin: UM.Theme.getSize("default_margin").width
rightMargin:UM.Theme.getSize("thick_margin").width
}
Label
{
text: packageData.displayName
font: UM.Theme.getFont("medium_bold")
font: UM.Theme.getFont("large_bold")
color: UM.Theme.getColor("text")
verticalAlignment: Text.AlignTop
}
@ -94,8 +81,7 @@ Rectangle
{
Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
//width: UM.Theme.getSize("card_tiny_icon").width
//height: UM.Theme.getSize("card_tiny_icon").height
enabled: packageData.isVerified
visible: packageData.isVerified
@ -151,6 +137,7 @@ Rectangle
Label
{
id: packageVersionLabel
text: packageData.packageVersion
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
@ -161,48 +148,27 @@ Rectangle
{
id: externalLinkButton
Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
Layout.preferredWidth: packageVersionLabel.height
Layout.preferredHeight: packageVersionLabel.height
Layout.alignment: Qt.AlignTop
iconSource: UM.Theme.getIcon("LinkExternal")
hoverColor: UM.Theme.getColor("text_link")
onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
}
}
RowLayout
{
id: downloadCountRow
x: UM.Theme.getSize("thin_margin").width
y: UM.Theme.getSize("thin_margin").height
spacing: UM.Theme.getSize("thin_margin").width
UM.RecolorImage
{
id: downloadCountIcon
width: UM.Theme.getSize("card_tiny_icon").width
height: UM.Theme.getSize("card_tiny_icon").height
color: UM.Theme.getColor("icon")
source: UM.Theme.getIcon("Download")
}
Label
{
id: downloadCountLabel
text: packageData.downloadCount
}
}
Item
{
id: descriptionArea
width: parent.width
height: descriptionLabel.height
anchors
{
top: titleBar.bottom
left: packageItem.right
right: parent.right
rightMargin: UM.Theme.getSize("default_margin").width
leftMargin: UM.Theme.getSize("default_margin").width
}
Label
{
id: descriptionLabel
@ -220,7 +186,7 @@ Rectangle
{
if(truncated && line.isLast)
{
let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - UM.Theme.getSize("default_margin").width;
let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - 2 * UM.Theme.getSize("default_margin").width;
if(line.implicitWidth > max_line_width)
{
line.width = max_line_width;
@ -233,11 +199,22 @@ Rectangle
}
}
}
Label
{
id: tripleDotLabel
anchors.left: parent.left
anchors.leftMargin: descriptionLabel.lastLineWidth
anchors.bottom: readMoreButton.bottom
text: "… "
font: descriptionLabel.font
color: descriptionLabel.color
visible: descriptionLabel.truncated
}
Cura.TertiaryButton
{
id: readMoreButton
anchors.right: parent.right
anchors.left: tripleDotLabel.right
anchors.bottom: parent.bottom
height: fontMetrics.height //Height of a single line.
@ -254,25 +231,19 @@ Rectangle
// NOTE: Is this the right URL for this action?
onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
}
Label
{
anchors.left: parent.left
anchors.leftMargin: descriptionLabel.lastLineWidth
anchors.bottom: readMoreButton.bottom
text: "… "
font: descriptionLabel.font
color: descriptionLabel.color
visible: descriptionLabel.truncated
}
}
RowLayout //Author and action buttons.
{
id: authorAndACtionButton
width: parent.width
Layout.alignment: Qt.AlignTop
spacing: UM.Theme.getSize("thin_margin").width
anchors
{
bottom: parent.bottom
left: packageItem.right
margins: UM.Theme.getSize("default_margin").height
}
spacing: UM.Theme.getSize("narrow_margin").width
Label
{
@ -325,7 +296,6 @@ Rectangle
visible: false // not functional right now, also only when unfolding and required
}
}
}
FontMetrics
{