mirror of
https://github.com/Ultimaker/Cura.git
synced 2025-08-08 22:35:03 -06: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
1 changed files with 78 additions and 251 deletions
|
|
@ -3,6 +3,7 @@
|
|||
|
||||
import QtQuick 2.15
|
||||
import QtQuick.Controls 2.15
|
||||
import QtQuick.Layouts 1.1
|
||||
|
||||
import UM 1.6 as UM
|
||||
import Cura 1.6 as Cura
|
||||
|
|
@ -12,312 +13,138 @@ Rectangle
|
|||
property var packageData
|
||||
|
||||
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")
|
||||
radius: UM.Theme.getSize("default_radius").width
|
||||
|
||||
Image
|
||||
RowLayout
|
||||
{
|
||||
id: packageIcon
|
||||
anchors
|
||||
{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
margins: UM.Theme.getSize("default_margin").width
|
||||
}
|
||||
width: UM.Theme.getSize("card_icon").width
|
||||
height: UM.Theme.getSize("card_icon").height
|
||||
width: parent.width - UM.Theme.getSize("default_margin").width * 2
|
||||
height: childrenRect.height
|
||||
x: UM.Theme.getSize("default_margin").width
|
||||
y: UM.Theme.getSize("default_margin").height
|
||||
|
||||
source: packageData.iconUrl != "" ? packageData.iconUrl : UM.Theme.getImage("CicleOutline")
|
||||
}
|
||||
spacing: UM.Theme.getSize("default_margin").width
|
||||
|
||||
Item
|
||||
{
|
||||
anchors
|
||||
Image //Separate column for icon on the left.
|
||||
{
|
||||
top: parent.top
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
left: packageIcon.left
|
||||
margins: UM.Theme.getSize("thin_margin").width
|
||||
Layout.preferredWidth: UM.Theme.getSize("card_icon").width
|
||||
Layout.preferredHeight: UM.Theme.getSize("card_icon").height
|
||||
|
||||
source: packageData.iconUrl != "" ? packageData.iconUrl : UM.Theme.getImage("CicleOutline")
|
||||
}
|
||||
|
||||
Item
|
||||
Column
|
||||
{
|
||||
id: firstRowItems
|
||||
anchors
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
|
||||
spacing: UM.Theme.getSize("default_margin").height
|
||||
|
||||
RowLayout //Title row.
|
||||
{
|
||||
top: parent.top
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
margins: UM.Theme.getSize("thin_margin").width
|
||||
width: parent.width
|
||||
|
||||
spacing: UM.Theme.getSize("default_margin").width
|
||||
|
||||
Label
|
||||
{
|
||||
font: UM.Theme.getFont("medium_bold")
|
||||
color: UM.Theme.getColor("text")
|
||||
|
||||
text: packageData.displayName
|
||||
}
|
||||
|
||||
UM.RecolorImage
|
||||
{
|
||||
Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0
|
||||
Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0
|
||||
|
||||
color: UM.Theme.getColor("icon")
|
||||
visible: packageData.isVerified
|
||||
source: UM.Theme.getIcon("CheckCircle")
|
||||
|
||||
// TODO: on hover
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{ // placeholder for 'certified material' icon+link whenever we implement the materials part of this card
|
||||
Layout.preferredWidth: visible ? UM.Theme.getSize("section_icon").width : 0
|
||||
Layout.preferredHeight: visible ? UM.Theme.getSize("section_icon").height : 0
|
||||
|
||||
// TODO: on hover
|
||||
}
|
||||
|
||||
Label
|
||||
{
|
||||
Layout.fillWidth: true
|
||||
|
||||
text: packageData.packageVersion
|
||||
}
|
||||
|
||||
UM.RecolorImage
|
||||
{
|
||||
Layout.preferredWidth: UM.Theme.getSize("section_icon").width
|
||||
Layout.preferredHeight: UM.Theme.getSize("section_icon").height
|
||||
|
||||
color: UM.Theme.getColor("icon")
|
||||
source: UM.Theme.getIcon("Link")
|
||||
|
||||
// TODO: on clicked url
|
||||
}
|
||||
}
|
||||
|
||||
Label
|
||||
{
|
||||
id: titleLabel
|
||||
anchors
|
||||
{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
margins: UM.Theme.getSize("thin_margin").width
|
||||
}
|
||||
font: UM.Theme.getFont("medium_bold")
|
||||
color: UM.Theme.getColor("text")
|
||||
|
||||
text: packageData.displayName
|
||||
}
|
||||
|
||||
UM.RecolorImage
|
||||
{
|
||||
id: verifiedIcon
|
||||
anchors
|
||||
{
|
||||
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")
|
||||
|
||||
visible: packageData.isVerified
|
||||
source: UM.Theme.getIcon("CheckCircle")
|
||||
|
||||
// TODO: on hover
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{ // placeholder for 'certified material' icon+link whenever we implement the materials part of this card
|
||||
id: certifiedIcon
|
||||
anchors
|
||||
{
|
||||
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
|
||||
}
|
||||
|
||||
Label
|
||||
{
|
||||
id: versionLabel
|
||||
anchors
|
||||
{
|
||||
top: parent.top
|
||||
left: certifiedIcon.right
|
||||
margins: UM.Theme.getSize("thin_margin").width
|
||||
}
|
||||
|
||||
text: packageData.packageVersion
|
||||
}
|
||||
|
||||
UM.RecolorImage
|
||||
{
|
||||
id: packageInfoLink
|
||||
anchors
|
||||
{
|
||||
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")
|
||||
|
||||
source: UM.Theme.getIcon("Link")
|
||||
|
||||
// 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
|
||||
{
|
||||
id: downloadCountLobel
|
||||
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
|
||||
}
|
||||
width: parent.width
|
||||
|
||||
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
|
||||
anchors
|
||||
{
|
||||
right: parent.right
|
||||
bottom: parent.bottom
|
||||
margins: UM.Theme.getSize("thin_margin").width
|
||||
}
|
||||
//TODO: Inline in description.
|
||||
|
||||
visible: descriptionLabel.text.length > parent.charLimitSmall
|
||||
text: catalog.i18nc("@info", "Read more")
|
||||
|
||||
// TODO: overlaps elided text, is this ok?
|
||||
}
|
||||
}*/
|
||||
|
||||
// TODO: _only_ limit to 130 or 2 rows (& all that that entails) when 'small'
|
||||
}
|
||||
|
||||
Item
|
||||
{
|
||||
id: footerRowItems
|
||||
anchors
|
||||
RowLayout //Author and action buttons.
|
||||
{
|
||||
bottom: parent.bottom
|
||||
right: parent.right
|
||||
left: parent.left
|
||||
margins: UM.Theme.getSize("thin_margin").width
|
||||
}
|
||||
width: parent.width
|
||||
|
||||
Item
|
||||
{
|
||||
Label
|
||||
{
|
||||
id: preAuthorNameText
|
||||
anchors
|
||||
{
|
||||
top: parent.top
|
||||
left: parent.left
|
||||
margins: UM.Theme.getSize("thin_margin").width
|
||||
}
|
||||
|
||||
text: catalog.i18nc("@label", "By")
|
||||
}
|
||||
|
||||
Cura.TertiaryButton
|
||||
{
|
||||
id: authorNameLabel
|
||||
anchors
|
||||
{
|
||||
top: parent.top
|
||||
left: preAuthorNameText.right
|
||||
margins: UM.Theme.getSize("thin_margin").width
|
||||
}
|
||||
Layout.fillWidth: true
|
||||
|
||||
text: packageData.authorName
|
||||
|
||||
// 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
|
||||
{
|
||||
id: disableButton
|
||||
anchors
|
||||
{
|
||||
right: uninstallButton.left
|
||||
bottom: parent.bottom
|
||||
margins: UM.Theme.getSize("thin_margin").width
|
||||
}
|
||||
height: parent.height
|
||||
|
||||
text: catalog.i18nc("@button", "Disable")
|
||||
// not functional right now
|
||||
}
|
||||
|
||||
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")
|
||||
// not functional right now
|
||||
}
|
||||
|
||||
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")
|
||||
// not functional right now
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue