status-im
/
StatusQ
mirror of https://github.com/status-im/StatusQ.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusListItem): support tertiaryTitle 

Usage:

```qml
StatusListItem {
    title: ...
    subTitle: ...
    tertiaryTitle: ...
}
```

Closes #275
This commit is contained in:
Pascal Precht 2021-07-20 14:01:27 +02:00 committed by Pascal Precht
parent fda9b71f7b
commit 031319968d
2 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sandbox/ListItems.qml
View File

@ -143,6 +143,15 @@ GridLayout {
subTitle: "Subtitle" subTitle: "Subtitle"
} }
StatusListItem {
title: "Title"
subTitle: "Subtitle"
tertiaryTitle: "Tertiary title"
statusListItemTitle.font.pixelSize: 17
statusListItemTitle.font.weight: Font.Bold
}
StatusListItem { StatusListItem {
title: "Title" title: "Title"
subTitle: "Subtitle" subTitle: "Subtitle"

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

@ -8,7 +8,7 @@ Rectangle {
id: statusListItem id: statusListItem
implicitWidth: 448 implicitWidth: 448
implicitHeight: 64 implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
enum Type { enum Type {
Primary, Primary,
@ -34,6 +34,7 @@ Rectangle {
property string title: "" property string title: ""
property string subTitle: "" property string subTitle: ""
property string tertiaryTitle: ""
property real leftPadding: 16 property real leftPadding: 16
property real rightPadding: 16 property real rightPadding: 16
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
@ -69,6 +70,7 @@ Rectangle {
property alias sensor: sensor property alias sensor: sensor
property alias statusListItemTitle: statusListItemTitle property alias statusListItemTitle: statusListItemTitle
property alias statusListItemSubTitle: statusListItemSubTitle property alias statusListItemSubTitle: statusListItemSubTitle
property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
property alias statusListItemComponentsSlot: statusListItemComponentsSlot property alias statusListItemComponentsSlot: statusListItemComponentsSlot
property list<Item> components property list<Item> components
@ -144,10 +146,13 @@ Rectangle {
} }
Item { Item {
id: statusListItemTitleArea
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
anchors.leftMargin: statusListItem.leftPadding anchors.leftMargin: statusListItem.leftPadding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) height: statusListItemTitle.height +
(statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) +
(statusListItemTertiaryTitle.visible ? statusListItemTertiaryTitle.height : 0)
StatusBaseText { StatusBaseText {
id: statusListItemTitle id: statusListItemTitle
@ -171,9 +176,18 @@ Rectangle {
text: statusListItem.subTitle text: statusListItem.subTitle
font.pixelSize: 15 font.pixelSize: 15
color: Theme.palette.baseColor1 color: !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
visible: !!statusListItem.subTitle visible: !!statusListItem.subTitle
} }
StatusBaseText {
id: statusListItemTertiaryTitle
anchors.top: statusListItemSubTitle.bottom
text: statusListItem.tertiaryTitle
color: Theme.palette.baseColor1
font.pixelSize: 13
visible: !!statusListItem.tertiaryTitle
}
} }
StatusBaseText { StatusBaseText {