fix(StatusListItem): ensure title area wraps text
This commit is contained in:
parent
3c4c7f040a
commit
e3f7931442
|
@ -152,6 +152,16 @@ GridLayout {
|
|||
statusListItemTitle.font.weight: Font.Bold
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves."
|
||||
tertiaryTitle: "Tertiary title"
|
||||
icon.name: "info"
|
||||
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
statusListItemTitle.font.weight: Font.Bold
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
|
|
|
@ -68,6 +68,8 @@ Rectangle {
|
|||
property int type: StatusListItem.Type.Primary
|
||||
|
||||
property alias sensor: sensor
|
||||
|
||||
property alias statusListItemIcon: iconOrImage
|
||||
property alias statusListItemTitle: statusListItemTitle
|
||||
property alias statusListItemSubTitle: statusListItemSubTitle
|
||||
property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
|
||||
|
@ -95,7 +97,8 @@ Rectangle {
|
|||
id: iconOrImage
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: statusListItem.leftPadding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 12
|
||||
sourceComponent: {
|
||||
if (statusListItem.icon.isLetterIdenticon) {
|
||||
return statusLetterIdenticon
|
||||
|
@ -148,7 +151,10 @@ Rectangle {
|
|||
Item {
|
||||
id: statusListItemTitleArea
|
||||
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
|
||||
anchors.right: statusListItemLabel.visible ?
|
||||
statusListItemLabel.left : statusListItemComponentsSlot.left
|
||||
anchors.leftMargin: statusListItem.leftPadding
|
||||
anchors.rightMargin: statusListItem.rightPadding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: statusListItemTitle.height +
|
||||
(statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) +
|
||||
|
@ -157,7 +163,9 @@ Rectangle {
|
|||
StatusBaseText {
|
||||
id: statusListItemTitle
|
||||
text: statusListItem.title
|
||||
width: parent.width
|
||||
font.pixelSize: 15
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
color: {
|
||||
switch (statusListItem.type) {
|
||||
case StatusListItem.Type.Primary:
|
||||
|
@ -173,24 +181,28 @@ Rectangle {
|
|||
StatusBaseText {
|
||||
id: statusListItemSubTitle
|
||||
anchors.top: statusListItemTitle.bottom
|
||||
|
||||
width: parent.width
|
||||
text: statusListItem.subTitle
|
||||
font.pixelSize: 15
|
||||
color: !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
|
||||
visible: !!statusListItem.subTitle
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: statusListItemTertiaryTitle
|
||||
anchors.top: statusListItemSubTitle.bottom
|
||||
width: parent.width
|
||||
text: statusListItem.tertiaryTitle
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 13
|
||||
visible: !!statusListItem.tertiaryTitle
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: statusListItemLabel
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: statusListItemComponentsSlot.left
|
||||
anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
|
||||
|
|
|
@ -17,6 +17,7 @@ StatusListItem {
|
|||
icon.background.height: 20
|
||||
icon.background.color: "transparent"
|
||||
|
||||
statusListItemIcon.anchors.topMargin: 14
|
||||
|
||||
color: {
|
||||
if (selected) {
|
||||
|
|
Loading…
Reference in New Issue