mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-08-07 05:53:59 -06:00
Change card summary information into a column
This is necessary because we can't anchor to the bottom of the card here, and because we want to swap out the description for a download count in the extended detail card. Contributes to issue CURA-8565.
This commit is contained in:
Ghostkeeper
parent
8ecd2f86a4
commit
d7058ef520
1 changed files with 213 additions and 217 deletions
|
|
@ -57,271 +57,267 @@ Rectangle
|
|||
source: packageData.iconUrl != "" ? packageData.iconUrl : "../images/placeholder.svg"
|
||||
}
|
||||
|
||||
// Title row.
|
||||
RowLayout
|
||||
ColumnLayout
|
||||
{
|
||||
id: titleBar
|
||||
anchors
|
||||
{
|
||||
left: packageItem.right
|
||||
leftMargin: UM.Theme.getSize("default_margin").width
|
||||
right: parent.right
|
||||
rightMargin: UM.Theme.getSize("thick_margin").width
|
||||
top: parent.top
|
||||
topMargin: UM.Theme.getSize("narrow_margin").height
|
||||
leftMargin: UM.Theme.getSize("default_margin").width
|
||||
rightMargin:UM.Theme.getSize("thick_margin").width
|
||||
}
|
||||
height: packageItem.height + packageItem.anchors.margins * 2
|
||||
|
||||
Label
|
||||
// Title row.
|
||||
RowLayout
|
||||
{
|
||||
text: packageData.displayName
|
||||
font: UM.Theme.getFont("medium_bold")
|
||||
color: UM.Theme.getColor("text")
|
||||
verticalAlignment: Text.AlignTop
|
||||
}
|
||||
id: titleBar
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
|
||||
Control
|
||||
{
|
||||
Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
|
||||
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
|
||||
|
||||
|
||||
enabled: packageData.isCheckedByUltimaker
|
||||
visible: packageData.isCheckedByUltimaker
|
||||
|
||||
Cura.ToolTip
|
||||
Label
|
||||
{
|
||||
tooltipText:
|
||||
{
|
||||
switch(packageData.packageType)
|
||||
{
|
||||
case "plugin": return catalog.i18nc("@info", "Ultimaker Verified Plug-in");
|
||||
case "material": return catalog.i18nc("@info", "Ultimaker Certified Material");
|
||||
default: return catalog.i18nc("@info", "Ultimaker Verified Package");
|
||||
}
|
||||
}
|
||||
visible: parent.hovered
|
||||
targetPoint: Qt.point(0, Math.round(parent.y + parent.height / 2))
|
||||
text: packageData.displayName
|
||||
font: UM.Theme.getFont("medium_bold")
|
||||
color: UM.Theme.getColor("text")
|
||||
verticalAlignment: Text.AlignTop
|
||||
}
|
||||
|
||||
Rectangle
|
||||
Control
|
||||
{
|
||||
anchors.fill: parent
|
||||
color: UM.Theme.getColor("action_button_hovered")
|
||||
radius: width
|
||||
Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width
|
||||
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").height
|
||||
|
||||
|
||||
enabled: packageData.isCheckedByUltimaker
|
||||
visible: packageData.isCheckedByUltimaker
|
||||
|
||||
Cura.ToolTip
|
||||
{
|
||||
tooltipText:
|
||||
{
|
||||
switch(packageData.packageType)
|
||||
{
|
||||
case "plugin": return catalog.i18nc("@info", "Ultimaker Verified Plug-in");
|
||||
case "material": return catalog.i18nc("@info", "Ultimaker Certified Material");
|
||||
default: return catalog.i18nc("@info", "Ultimaker Verified Package");
|
||||
}
|
||||
}
|
||||
visible: parent.hovered
|
||||
targetPoint: Qt.point(0, Math.round(parent.y + parent.height / 2))
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
anchors.fill: parent
|
||||
color: UM.Theme.getColor("action_button_hovered")
|
||||
radius: width
|
||||
UM.RecolorImage
|
||||
{
|
||||
anchors.fill: parent
|
||||
color: UM.Theme.getColor("primary")
|
||||
source: packageData.packageType == "plugin" ? UM.Theme.getIcon("CheckCircle") : UM.Theme.getIcon("Certified")
|
||||
}
|
||||
}
|
||||
|
||||
//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
|
||||
{
|
||||
anchors.fill: parent
|
||||
|
||||
color: UM.Theme.getColor("primary")
|
||||
source: packageData.packageType == "plugin" ? UM.Theme.getIcon("CheckCircle") : UM.Theme.getIcon("Certified")
|
||||
source: UM.Theme.getIcon("CheckCircle") // TODO
|
||||
}
|
||||
|
||||
// onClicked: Qt.openUrlExternally( XXXXXX ) // TODO
|
||||
}
|
||||
|
||||
//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
|
||||
Label
|
||||
{
|
||||
tooltipText: "" // TODO
|
||||
visible: parent.hovered
|
||||
id: packageVersionLabel
|
||||
text: packageData.packageVersion
|
||||
font: UM.Theme.getFont("default")
|
||||
color: UM.Theme.getColor("text")
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
UM.RecolorImage
|
||||
Button
|
||||
{
|
||||
anchors.fill: parent
|
||||
id: externalLinkButton
|
||||
|
||||
color: UM.Theme.getColor("primary")
|
||||
source: UM.Theme.getIcon("CheckCircle") // TODO
|
||||
}
|
||||
// For some reason if i set padding, they don't match up. If i set all of them explicitly, it does work?
|
||||
leftPadding: UM.Theme.getSize("narrow_margin").width
|
||||
rightPadding: UM.Theme.getSize("narrow_margin").width
|
||||
topPadding: UM.Theme.getSize("narrow_margin").width
|
||||
bottomPadding: UM.Theme.getSize("narrow_margin").width
|
||||
|
||||
// onClicked: Qt.openUrlExternally( XXXXXX ) // TODO
|
||||
}
|
||||
|
||||
Label
|
||||
{
|
||||
id: packageVersionLabel
|
||||
text: packageData.packageVersion
|
||||
font: UM.Theme.getFont("default")
|
||||
color: UM.Theme.getColor("text")
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Button
|
||||
{
|
||||
id: externalLinkButton
|
||||
|
||||
// For some reason if i set padding, they don't match up. If i set all of them explicitly, it does work?
|
||||
leftPadding: UM.Theme.getSize("narrow_margin").width
|
||||
rightPadding: UM.Theme.getSize("narrow_margin").width
|
||||
topPadding: UM.Theme.getSize("narrow_margin").width
|
||||
bottomPadding: UM.Theme.getSize("narrow_margin").width
|
||||
|
||||
Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width + 2 * padding
|
||||
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").width + 2 * padding
|
||||
contentItem: UM.RecolorImage
|
||||
{
|
||||
source: UM.Theme.getIcon("LinkExternal")
|
||||
color: UM.Theme.getColor("icon")
|
||||
implicitWidth: UM.Theme.getSize("card_tiny_icon").width
|
||||
implicitHeight: UM.Theme.getSize("card_tiny_icon").height
|
||||
}
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
color: externalLinkButton.hovered ? UM.Theme.getColor("action_button_hovered"): "transparent"
|
||||
radius: externalLinkButton.width / 2
|
||||
}
|
||||
onClicked: Qt.openUrlExternally(packageData.authorInfoUrl)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
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
|
||||
property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision.
|
||||
|
||||
text: packageData.description
|
||||
font: UM.Theme.getFont("default")
|
||||
color: UM.Theme.getColor("text")
|
||||
maximumLineCount: 2
|
||||
wrapMode: Text.Wrap
|
||||
elide: Text.ElideRight
|
||||
|
||||
onLineLaidOut:
|
||||
{
|
||||
if(truncated && line.isLast)
|
||||
Layout.preferredWidth: UM.Theme.getSize("card_tiny_icon").width + 2 * padding
|
||||
Layout.preferredHeight: UM.Theme.getSize("card_tiny_icon").width + 2 * padding
|
||||
contentItem: UM.RecolorImage
|
||||
{
|
||||
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;
|
||||
}
|
||||
else
|
||||
{
|
||||
line.width = line.implicitWidth - fontMetrics.advanceWidth("…"); //Truncate the ellipsis. We're adding this ourselves.
|
||||
}
|
||||
descriptionLabel.lastLineWidth = line.implicitWidth;
|
||||
source: UM.Theme.getIcon("LinkExternal")
|
||||
color: UM.Theme.getColor("icon")
|
||||
implicitWidth: UM.Theme.getSize("card_tiny_icon").width
|
||||
implicitHeight: UM.Theme.getSize("card_tiny_icon").height
|
||||
}
|
||||
|
||||
background: Rectangle
|
||||
{
|
||||
color: externalLinkButton.hovered ? UM.Theme.getColor("action_button_hovered"): "transparent"
|
||||
radius: externalLinkButton.width / 2
|
||||
}
|
||||
onClicked: Qt.openUrlExternally(packageData.authorInfoUrl)
|
||||
}
|
||||
}
|
||||
Label
|
||||
|
||||
Item
|
||||
{
|
||||
id: tripleDotLabel
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: descriptionLabel.lastLineWidth
|
||||
anchors.bottom: readMoreButton.bottom
|
||||
id: descriptionArea
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.fillHeight: true
|
||||
|
||||
text: "… "
|
||||
font: descriptionLabel.font
|
||||
color: descriptionLabel.color
|
||||
visible: descriptionLabel.truncated
|
||||
}
|
||||
Cura.TertiaryButton
|
||||
{
|
||||
id: readMoreButton
|
||||
anchors.left: tripleDotLabel.right
|
||||
anchors.bottom: parent.bottom
|
||||
height: fontMetrics.height //Height of a single line.
|
||||
Label
|
||||
{
|
||||
id: descriptionLabel
|
||||
width: parent.width
|
||||
property real lastLineWidth: 0; //Store the width of the last line, to properly position the elision.
|
||||
|
||||
text: catalog.i18nc("@info", "Read more")
|
||||
iconSource: UM.Theme.getIcon("LinkExternal")
|
||||
text: packageData.description
|
||||
font: UM.Theme.getFont("default")
|
||||
color: UM.Theme.getColor("text")
|
||||
maximumLineCount: 2
|
||||
wrapMode: Text.Wrap
|
||||
elide: Text.ElideRight
|
||||
|
||||
visible: descriptionLabel.truncated
|
||||
enabled: visible
|
||||
leftPadding: UM.Theme.getSize("default_margin").width
|
||||
rightPadding: UM.Theme.getSize("wide_margin").width
|
||||
textFont: descriptionLabel.font
|
||||
isIconOnRightSide: true
|
||||
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)
|
||||
{
|
||||
line.width = max_line_width;
|
||||
}
|
||||
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
|
||||
|
||||
onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
|
||||
}
|
||||
}
|
||||
text: "… "
|
||||
font: descriptionLabel.font
|
||||
color: descriptionLabel.color
|
||||
visible: descriptionLabel.truncated
|
||||
}
|
||||
Cura.TertiaryButton
|
||||
{
|
||||
id: readMoreButton
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
height: fontMetrics.height //Height of a single line.
|
||||
|
||||
// Author and action buttons.
|
||||
RowLayout
|
||||
{
|
||||
id: authorAndActionButton
|
||||
width: parent.width
|
||||
anchors
|
||||
{
|
||||
bottom: parent.bottom
|
||||
left: packageItem.right
|
||||
margins: UM.Theme.getSize("default_margin").height
|
||||
}
|
||||
spacing: UM.Theme.getSize("narrow_margin").width
|
||||
text: catalog.i18nc("@info", "Read more")
|
||||
iconSource: UM.Theme.getIcon("LinkExternal")
|
||||
|
||||
Label
|
||||
{
|
||||
id: authorBy
|
||||
Layout.alignment: Qt.AlignTop
|
||||
visible: descriptionLabel.truncated
|
||||
enabled: visible
|
||||
leftPadding: UM.Theme.getSize("default_margin").width
|
||||
rightPadding: UM.Theme.getSize("wide_margin").width
|
||||
textFont: descriptionLabel.font
|
||||
isIconOnRightSide: true
|
||||
|
||||
text: catalog.i18nc("@label", "By")
|
||||
font: UM.Theme.getFont("default")
|
||||
color: UM.Theme.getColor("text")
|
||||
onClicked: Qt.openUrlExternally(packageData.packageInfoUrl)
|
||||
}
|
||||
}
|
||||
|
||||
Cura.TertiaryButton
|
||||
// Author and action buttons.
|
||||
RowLayout
|
||||
{
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: authorBy.height
|
||||
Layout.alignment: Qt.AlignTop
|
||||
id: authorAndActionButton
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
|
||||
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
|
||||
spacing: UM.Theme.getSize("narrow_margin").width
|
||||
|
||||
onClicked: Qt.openUrlExternally(packageData.authorInfoUrl)
|
||||
}
|
||||
Label
|
||||
{
|
||||
id: authorBy
|
||||
Layout.alignment: Qt.AlignTop
|
||||
|
||||
Cura.SecondaryButton
|
||||
{
|
||||
id: disableButton
|
||||
Layout.alignment: Qt.AlignTop
|
||||
text: catalog.i18nc("@button", "Disable")
|
||||
visible: false // not functional right now, also only when unfolding and required
|
||||
}
|
||||
text: catalog.i18nc("@label", "By")
|
||||
font: UM.Theme.getFont("default")
|
||||
color: UM.Theme.getColor("text")
|
||||
}
|
||||
|
||||
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.TertiaryButton
|
||||
{
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: authorBy.height
|
||||
Layout.alignment: Qt.AlignTop
|
||||
|
||||
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
|
||||
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
|
||||
|
||||
onClicked: Qt.openUrlExternally(packageData.authorInfoUrl)
|
||||
}
|
||||
|
||||
Cura.SecondaryButton
|
||||
{
|
||||
id: disableButton
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue