mirror of
https://git.mirrors.martin98.com/https://github.com/Ultimaker/Cura
synced 2025-08-18 03:35:56 +08:00
Use rows and columns instead of anchors for layout
This is in my opinion much easier to follow and maintain. It also fixes the layout. The original code had a lot of overlapping parts. Contributes to issue CURA-8561.
This commit is contained in:
Ghostkeeper
parent
e0508b0f4f
commit
4014562cdc
@ -3,6 +3,7 @@
|
|||||||
|
|
||||||
import QtQuick 2.15
|
import QtQuick 2.15
|
||||||
import QtQuick.Controls 2.15
|
import QtQuick.Controls 2.15
|
||||||
|
import QtQuick.Layouts 1.1
|
||||||
|
|
||||||
import UM 1.6 as UM
|
import UM 1.6 as UM
|
||||||
import Cura 1.6 as Cura
|
import Cura 1.6 as Cura
|
||||||
@ -12,57 +13,43 @@ Rectangle
|
|||||||
property var packageData
|
property var packageData
|
||||||
|
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: UM.Theme.getSize("card").height
|
height: childrenRect.height + UM.Theme.getSize("default_margin").height * 2
|
||||||
|
|
||||||
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
|
||||||
|
|
||||||
Image
|
RowLayout
|
||||||
{
|
{
|
||||||
id: packageIcon
|
width: parent.width - UM.Theme.getSize("default_margin").width * 2
|
||||||
anchors
|
height: childrenRect.height
|
||||||
|
x: UM.Theme.getSize("default_margin").width
|
||||||
|
y: UM.Theme.getSize("default_margin").height
|
||||||
|
|
||||||
|
spacing: UM.Theme.getSize("default_margin").width
|
||||||
|
|
||||||
|
Image //Separate column for icon on the left.
|
||||||
{
|
{
|
||||||
top: parent.top
|
Layout.preferredWidth: UM.Theme.getSize("card_icon").width
|
||||||
left: parent.left
|
Layout.preferredHeight: UM.Theme.getSize("card_icon").height
|
||||||
margins: UM.Theme.getSize("default_margin").width
|
|
||||||
}
|
|
||||||
width: UM.Theme.getSize("card_icon").width
|
|
||||||
height: UM.Theme.getSize("card_icon").height
|
|
||||||
|
|
||||||
source: packageData.iconUrl != "" ? packageData.iconUrl : UM.Theme.getImage("CicleOutline")
|
source: packageData.iconUrl != "" ? packageData.iconUrl : UM.Theme.getImage("CicleOutline")
|
||||||
}
|
}
|
||||||
|
|
||||||
Item
|
Column
|
||||||
{
|
{
|
||||||
anchors
|
Layout.fillWidth: true
|
||||||
{
|
Layout.preferredHeight: childrenRect.height
|
||||||
top: parent.top
|
|
||||||
bottom: parent.bottom
|
|
||||||
right: parent.right
|
|
||||||
left: packageIcon.left
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
Item
|
spacing: UM.Theme.getSize("default_margin").height
|
||||||
|
|
||||||
|
RowLayout //Title row.
|
||||||
{
|
{
|
||||||
id: firstRowItems
|
width: parent.width
|
||||||
anchors
|
|
||||||
{
|
spacing: UM.Theme.getSize("default_margin").width
|
||||||
top: parent.top
|
|
||||||
right: parent.right
|
|
||||||
left: parent.left
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
Label
|
Label
|
||||||
{
|
{
|
||||||
id: titleLabel
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
left: parent.left
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
font: UM.Theme.getFont("medium_bold")
|
font: UM.Theme.getFont("medium_bold")
|
||||||
color: UM.Theme.getColor("text")
|
color: UM.Theme.getColor("text")
|
||||||
|
|
||||||
@ -71,17 +58,10 @@ Rectangle
|
|||||||
|
|
||||||
UM.RecolorImage
|
UM.RecolorImage
|
||||||
{
|
{
|
||||||
id: verifiedIcon
|
Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0
|
||||||
anchors
|
Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
left: titleLabel.right
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
width: UM.Theme.getSize("section_icon").height
|
|
||||||
height: UM.Theme.getSize("section_icon").height
|
|
||||||
color: UM.Theme.getColor("icon")
|
|
||||||
|
|
||||||
|
color: UM.Theme.getColor("icon")
|
||||||
visible: packageData.isVerified
|
visible: packageData.isVerified
|
||||||
source: UM.Theme.getIcon("CheckCircle")
|
source: UM.Theme.getIcon("CheckCircle")
|
||||||
|
|
||||||
@ -90,234 +70,81 @@ Rectangle
|
|||||||
|
|
||||||
Rectangle
|
Rectangle
|
||||||
{ // placeholder for 'certified material' icon+link whenever we implement the materials part of this card
|
{ // placeholder for 'certified material' icon+link whenever we implement the materials part of this card
|
||||||
id: certifiedIcon
|
Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0
|
||||||
anchors
|
Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
left: verifiedIcon.right
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
width: UM.Theme.getSize("section_icon").height
|
|
||||||
height: UM.Theme.getSize("section_icon").height
|
|
||||||
|
|
||||||
// TODO: on hover
|
// TODO: on hover
|
||||||
}
|
}
|
||||||
|
|
||||||
Label
|
Label
|
||||||
{
|
{
|
||||||
id: versionLabel
|
Layout.fillWidth: true
|
||||||
anchors
|
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
left: certifiedIcon.right
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
text: packageData.packageVersion
|
text: packageData.packageVersion
|
||||||
}
|
}
|
||||||
|
|
||||||
UM.RecolorImage
|
UM.RecolorImage
|
||||||
{
|
{
|
||||||
id: packageInfoLink
|
Layout.preferredWidth: UM.Theme.getSize("section_icon").width
|
||||||
anchors
|
Layout.preferredHeight: UM.Theme.getSize("section_icon").height
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
right: parent.right
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
width: UM.Theme.getSize("section_icon").height
|
|
||||||
height: UM.Theme.getSize("section_icon").height
|
|
||||||
color: UM.Theme.getColor("icon")
|
|
||||||
|
|
||||||
|
color: UM.Theme.getColor("icon")
|
||||||
source: UM.Theme.getIcon("Link")
|
source: UM.Theme.getIcon("Link")
|
||||||
|
|
||||||
// TODO: on clicked url
|
// TODO: on clicked url
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Item
|
|
||||||
{
|
|
||||||
id: secondRowItems
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
top: firstRowItems.bottom
|
|
||||||
right: parent.right
|
|
||||||
left: parent.left
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
UM.RecolorImage
|
|
||||||
{
|
|
||||||
id: downloadCountIcon
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
left: parent.left
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
width: UM.Theme.getSize("section_icon").height
|
|
||||||
height: UM.Theme.getSize("section_icon").height
|
|
||||||
color: UM.Theme.getColor("icon")
|
|
||||||
|
|
||||||
source: UM.Theme.getIcon("Download") // TODO: The right icon.
|
|
||||||
}
|
|
||||||
|
|
||||||
Label
|
Label
|
||||||
{
|
{
|
||||||
id: downloadCountLobel
|
width: parent.width
|
||||||
anchors
|
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
left: downloadCountIcon.right
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
text: packageData.downloadCount
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Item
|
|
||||||
{
|
|
||||||
id: mainRowItems
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
top: secondRowItems.bottom
|
|
||||||
bottom: footerRowItems.top
|
|
||||||
right: parent.right
|
|
||||||
left: parent.left
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
readonly property int charLimitSmall: 130
|
|
||||||
|
|
||||||
Label
|
|
||||||
{
|
|
||||||
id: descriptionLabel
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
left: parent.left
|
|
||||||
right: parent.right
|
|
||||||
bottom: parent.bottom
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
maximumLineCount: 2
|
maximumLineCount: 2
|
||||||
text: packageData.description.substring(0, parent.charLimitSmall)
|
text: packageData.description
|
||||||
|
elide: Text.ElideRight //TODO: Make space for Read More button.
|
||||||
}
|
}
|
||||||
|
/*Cura.TertiaryButton
|
||||||
Cura.TertiaryButton
|
|
||||||
{
|
{
|
||||||
id: readMoreLabel
|
//TODO: Inline in description.
|
||||||
anchors
|
|
||||||
{
|
|
||||||
right: parent.right
|
|
||||||
bottom: parent.bottom
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
visible: descriptionLabel.text.length > parent.charLimitSmall
|
visible: descriptionLabel.text.length > parent.charLimitSmall
|
||||||
text: catalog.i18nc("@info", "Read more")
|
text: catalog.i18nc("@info", "Read more")
|
||||||
|
|
||||||
// TODO: overlaps elided text, is this ok?
|
// TODO: overlaps elided text, is this ok?
|
||||||
}
|
}*/
|
||||||
|
|
||||||
// TODO: _only_ limit to 130 or 2 rows (& all that that entails) when 'small'
|
RowLayout //Author and action buttons.
|
||||||
}
|
{
|
||||||
|
width: parent.width
|
||||||
|
|
||||||
Item
|
|
||||||
{
|
|
||||||
id: footerRowItems
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
bottom: parent.bottom
|
|
||||||
right: parent.right
|
|
||||||
left: parent.left
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
Item
|
|
||||||
{
|
|
||||||
Label
|
Label
|
||||||
{
|
{
|
||||||
id: preAuthorNameText
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
left: parent.left
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
text: catalog.i18nc("@label", "By")
|
text: catalog.i18nc("@label", "By")
|
||||||
}
|
}
|
||||||
|
|
||||||
Cura.TertiaryButton
|
Cura.TertiaryButton
|
||||||
{
|
{
|
||||||
id: authorNameLabel
|
Layout.fillWidth: true
|
||||||
anchors
|
|
||||||
{
|
|
||||||
top: parent.top
|
|
||||||
left: preAuthorNameText.right
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
text: packageData.authorName
|
text: packageData.authorName
|
||||||
|
|
||||||
// TODO on clicked (is link) -> MouseArea?
|
// TODO on clicked (is link) -> MouseArea?
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
Item
|
|
||||||
{
|
|
||||||
id: packageActionButtons
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
bottom: parent.bottom
|
|
||||||
right: parent.right
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
|
|
||||||
Cura.SecondaryButton
|
Cura.SecondaryButton
|
||||||
{
|
{
|
||||||
id: disableButton
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
right: uninstallButton.left
|
|
||||||
bottom: parent.bottom
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
height: parent.height
|
|
||||||
|
|
||||||
text: catalog.i18nc("@button", "Disable")
|
text: catalog.i18nc("@button", "Disable")
|
||||||
// not functional right now
|
// not functional right now
|
||||||
}
|
}
|
||||||
|
|
||||||
Cura.SecondaryButton
|
Cura.SecondaryButton
|
||||||
{
|
{
|
||||||
id: uninstallButton
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
right: updateButton.left
|
|
||||||
bottom: parent.bottom
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
height: parent.height
|
|
||||||
|
|
||||||
text: catalog.i18nc("@button", "Uninstall")
|
text: catalog.i18nc("@button", "Uninstall")
|
||||||
// not functional right now
|
// not functional right now
|
||||||
}
|
}
|
||||||
|
|
||||||
Cura.PrimaryButton
|
Cura.PrimaryButton
|
||||||
{
|
{
|
||||||
id: updateButton
|
|
||||||
anchors
|
|
||||||
{
|
|
||||||
right: parent.right
|
|
||||||
bottom: parent.bottom
|
|
||||||
margins: UM.Theme.getSize("thin_margin").width
|
|
||||||
}
|
|
||||||
height: parent.height
|
|
||||||
|
|
||||||
text: catalog.i18nc("@button", "Update")
|
text: catalog.i18nc("@button", "Update")
|
||||||
// not functional right now
|
// not functional right now
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user