status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(StatusListItem): ensure title area wraps text

This commit is contained in:
Pascal Precht 2021-07-22 16:27:29 +02:00
parent 3c4c7f040a
commit e3f7931442
No known key found for this signature in database
GPG Key ID: 0EE28D8D6FD85D7D
3 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
sandbox/ListItems.qml
View File

@ -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"

16
src/StatusQ/Components/StatusListItem.qml
View File

@ -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

1
src/StatusQ/Components/StatusNavigationListItem.qml
View File

@ -17,6 +17,7 @@ StatusListItem {
icon.background.height: 20
icon.background.color: "transparent"
statusListItemIcon.anchors.topMargin: 14
color: {
if (selected) {