GitHub-Proxy/Cura
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura synced 2025-08-14 10:45:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Ensure that the packagecard looks like the design

Browse Source 
CURA-8561
This commit is contained in:
Jaime van Kessel 2021-11-17 10:27:48 +01:00
parent c8491b4752
commit 4ae01df7f5
1 changed files with 186 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

402
plugins/Marketplace/resources/qml/PackageCard.qml
View File

@ -12,9 +12,8 @@ Rectangle
{ {
property var packageData property var packageData
width: parent ? parent.width - UM.Theme.getSize("thin_margin").width : 0 width: parent ? parent.width - UM.Theme.getSize("default_margin").width : 0
height: childrenRect.height + UM.Theme.getSize("thin_margin").height * 2 height: UM.Theme.getSize("card").height
color: UM.Theme.getColor("main_background") color: UM.Theme.getColor("main_background")
radius: UM.Theme.getSize("default_radius").width radius: UM.Theme.getSize("default_radius").width
@ -25,11 +24,6 @@ Rectangle
name: "Folded" name: "Folded"
when: true // TODO when: true // TODO
PropertyChanges PropertyChanges
{
target: downloadCountRow
visible: false
}
PropertyChanges
{ {
target: descriptionArea target: descriptionArea
visible: true visible: true
@ -40,11 +34,6 @@ Rectangle
name: "Header" name: "Header"
when: false // TODO when: false // TODO
PropertyChanges PropertyChanges
{
target: downloadCountRow
visible: true
}
PropertyChanges
{ {
target: descriptionArea target: descriptionArea
visible: false visible: false
@ -59,7 +48,7 @@ Rectangle
{ {
top: parent.top top: parent.top
left: parent.left left: parent.left
margins: UM.Theme.getSize("thin_margin").width margins: UM.Theme.getSize("default_margin").width
} }
width: UM.Theme.getSize("card_icon").width width: UM.Theme.getSize("card_icon").width
height: width height: width
@ -67,263 +56,244 @@ Rectangle
source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg" source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg"
} }
Column RowLayout //Title row.
{ {
id: titleBar
anchors anchors
{ {
top: parent.top
left: packageItem.right left: packageItem.right
right: parent.right right: parent.right
margins: UM.Theme.getSize("thin_margin").width top: parent.top
topMargin: UM.Theme.getSize("default_margin").height
leftMargin: UM.Theme.getSize("default_margin").width
rightMargin:UM.Theme.getSize("thick_margin").width
} }
RowLayout //Title row. Label
{ {
width: parent.width text: packageData.displayName
spacing: UM.Theme.getSize("thin_margin").width font: UM.Theme.getFont("large_bold")
Label color: UM.Theme.getColor("text")
{ verticalAlignment: Text.AlignTop
}
text: packageData.displayName Control
font: UM.Theme.getFont("medium_bold") {
color: UM.Theme.getColor("text") Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
verticalAlignment: Text.AlignTop Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
enabled: packageData.isVerified
visible: packageData.isVerified
Cura.ToolTip
{
tooltipText: catalog.i18nc("@info", "Verified")
visible: parent.hovered
} }
Control Rectangle
{ {
Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width anchors.fill: parent
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height color: UM.Theme.getColor("action_button_hovered")
//width: UM.Theme.getSize("card_tiny_icon").width radius: width
//height: UM.Theme.getSize("card_tiny_icon").height
enabled: packageData.isVerified
visible: packageData.isVerified
Cura.ToolTip
{
tooltipText: catalog.i18nc("@info", "Verified")
visible: parent.hovered
}
Rectangle
{
anchors.fill: parent
color: UM.Theme.getColor("action_button_hovered")
radius: width
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 )
}
Control
{
Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
Layout.alignment: Qt.AlignCenter
enabled: false // remove!
visible: false // replace packageInfo.XXXXXX
// TODO: waiting for materials card implementation
Cura.ToolTip
{
tooltipText: "" // TODO
visible: parent.hovered
}
UM.RecolorImage UM.RecolorImage
{ {
anchors.fill: parent anchors.fill: parent
color: UM.Theme.getColor("primary") color: UM.Theme.getColor("primary")
source: UM.Theme.getIcon("CheckCircle") // TODO source: UM.Theme.getIcon("CheckCircle")
} }
// onClicked: Qt.openUrlExternally( XXXXXX ) // TODO
} }
Label //NOTE: Can we link to something here? (Probably a static link explaining what verified is):
{ // onClicked: Qt.openUrlExternally( XXXXXX )
text: packageData.packageVersion
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
Layout.fillWidth: true
}
UM.SimpleButton
{
id: externalLinkButton
Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
Layout.alignment: Qt.AlignTop
iconSource: UM.Theme.getIcon("LinkExternal")
hoverColor: UM.Theme.getColor("text_link")
onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
}
} }
RowLayout Control
{ {
id: downloadCountRow Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
Layout.alignment: Qt.AlignCenter
enabled: false // remove!
visible: false // replace packageInfo.XXXXXX
// TODO: waiting for materials card implementation
x: UM.Theme.getSize("thin_margin").width Cura.ToolTip
y: UM.Theme.getSize("thin_margin").height {
tooltipText: "" // TODO
spacing: UM.Theme.getSize("thin_margin").width visible: parent.hovered
}
UM.RecolorImage UM.RecolorImage
{ {
id: downloadCountIcon anchors.fill: parent
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") color: UM.Theme.getColor("primary")
source: UM.Theme.getIcon("CheckCircle") // TODO
} }
Label // onClicked: Qt.openUrlExternally( XXXXXX ) // TODO
{
id: downloadCountLabel
text: packageData.downloadCount
}
} }
Item Label
{ {
id: descriptionArea id: packageVersionLabel
text: packageData.packageVersion
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
Layout.fillWidth: true
}
UM.SimpleButton
{
id: externalLinkButton
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)
}
}
Item
{
id: descriptionArea
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
width: parent.width width: parent.width
height: descriptionLabel.height property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision.
Label text: packageData.description
font: UM.Theme.getFont("medium")
color: UM.Theme.getColor("text")
maximumLineCount: 2
wrapMode: Text.Wrap
elide: Text.ElideRight
onLineLaidOut:
{ {
id: descriptionLabel if(truncated && line.isLast)
width: parent.width
property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision.
text: packageData.description
font: UM.Theme.getFont("medium")
color: UM.Theme.getColor("text")
maximumLineCount: 2
wrapMode: Text.Wrap
elide: Text.ElideRight
onLineLaidOut:
{ {
if(truncated && line.isLast) let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - 2 * UM.Theme.getSize("default_margin").width;
if(line.implicitWidth > max_line_width)
{ {
let max_line_width = parent.width - readMoreButton.width - fontMetrics.advanceWidth("… ") - UM.Theme.getSize("default_margin").width; line.width = max_line_width;
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;
} }
else
{
line.width = line.implicitWidth - fontMetrics.advanceWidth("…"); //Truncate the ellipsis. We're adding this ourselves.
}
descriptionLabel.lastLineWidth = line.implicitWidth;
} }
} }
}
Label
{
id: tripleDotLabel
anchors.left: parent.left
anchors.leftMargin: descriptionLabel.lastLineWidth
anchors.bottom: readMoreButton.bottom
Cura.TertiaryButton text: "… "
{ font: descriptionLabel.font
id: readMoreButton color: descriptionLabel.color
anchors.right: parent.right visible: descriptionLabel.truncated
anchors.bottom: parent.bottom }
height: fontMetrics.height //Height of a single line. Cura.TertiaryButton
{
id: readMoreButton
anchors.left: tripleDotLabel.right
anchors.bottom: parent.bottom
height: fontMetrics.height //Height of a single line.
text: catalog.i18nc("@info", "Read more") text: catalog.i18nc("@info", "Read more")
iconSource: UM.Theme.getIcon("LinkExternal") iconSource: UM.Theme.getIcon("LinkExternal")
visible: descriptionLabel.truncated visible: descriptionLabel.truncated
enabled: visible enabled: visible
leftPadding: UM.Theme.getSize("default_margin").width leftPadding: UM.Theme.getSize("default_margin").width
rightPadding: UM.Theme.getSize("wide_margin").width rightPadding: UM.Theme.getSize("wide_margin").width
textFont: descriptionLabel.font textFont: descriptionLabel.font
isIconOnRightSide: true isIconOnRightSide: true
// NOTE: Is this the right URL for this action? // NOTE: Is this the right URL for this action?
onClicked: Qt.openUrlExternally(packageData.packageInfoUrl) onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
} }
}
Label RowLayout //Author and action buttons.
{ {
anchors.left: parent.left id: authorAndACtionButton
anchors.leftMargin: descriptionLabel.lastLineWidth width: parent.width
anchors.bottom: readMoreButton.bottom anchors
{
bottom: parent.bottom
left: packageItem.right
margins: UM.Theme.getSize("default_margin").height
}
spacing: UM.Theme.getSize("narrow_margin").width
text: "… " Label
font: descriptionLabel.font {
color: descriptionLabel.color id: authorBy
visible: descriptionLabel.truncated Layout.alignment: Qt.AlignTop
}
text: catalog.i18nc("@label", "By")
font: UM.Theme.getFont("default")
color: UM.Theme.getColor("text")
} }
RowLayout //Author and action buttons. Cura.TertiaryButton
{ {
width: parent.width Layout.fillWidth: true
Layout.preferredHeight: authorBy.height
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
spacing: UM.Theme.getSize("thin_margin").width
Label text: packageData.authorName
{ textFont: UM.Theme.getFont("default_bold")
id: authorBy textColor: UM.Theme.getColor("text") // override normal link color
Layout.alignment: Qt.AlignTop leftPadding: 0
rightPadding: 0
iconSource: UM.Theme.getIcon("LinkExternal")
isIconOnRightSide: true
text: catalog.i18nc("@label", "By") onClicked: Qt.openUrlExternally(packageData.authorInfoUrl)
font: UM.Theme.getFont("default") }
color: UM.Theme.getColor("text")
}
Cura.TertiaryButton Cura.SecondaryButton
{ {
Layout.fillWidth: true id: disableButton
Layout.preferredHeight: authorBy.height Layout.alignment: Qt.AlignTop
Layout.alignment: Qt.AlignTop text: catalog.i18nc("@button", "Disable")
visible: false // not functional right now, also only when unfolding and required
}
text: packageData.authorName Cura.SecondaryButton
textFont: UM.Theme.getFont("default_bold") {
textColor: UM.Theme.getColor("text") // override normal link color id: uninstallButton
leftPadding: 0 Layout.alignment: Qt.AlignTop
rightPadding: 0 text: catalog.i18nc("@button", "Uninstall")
iconSource: UM.Theme.getIcon("LinkExternal") visible: false // not functional right now, also only when unfolding and required
isIconOnRightSide: true }
onClicked: Qt.openUrlExternally(packageData.authorInfoUrl) Cura.PrimaryButton
} {
id: installButton
Cura.SecondaryButton Layout.alignment: Qt.AlignTop
{ text: catalog.i18nc("@button", "Update") // OR Download, if new!
id: disableButton visible: false // not functional right now, also only when unfolding and required
Layout.alignment: Qt.AlignTop
text: catalog.i18nc("@button", "Disable")
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")
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") // OR Download, if new!
visible: false // not functional right now, also only when unfolding and required
}
} }
} }