feat(StatusListItem) expose content children and introduce padding properties

These properties are needed to enable more control over how a list
item implementation can look like.

Content children are exposed as follows:

```qml
StatusListItem {
    statusListItemTitle.[...]: ... // StatusBaseText
    sensor.[...]: ... // MouseArea

    rightPadding: ... // default 16
    leftPadding: .. // default 16
}
```
This commit is contained in:
Pascal Precht 2021-06-07 12:56:24 +02:00 committed by Michał Cieślak
parent ae9c1d810f
commit f4005ed52c
1 changed files with 9 additions and 3 deletions

View File

@ -15,6 +15,8 @@ Rectangle {
property string title: "" property string title: ""
property string subTitle: "" property string subTitle: ""
property real leftPadding: 16
property real rightPadding: 16
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
height: 20 height: 20
width: 20 width: 20
@ -27,6 +29,10 @@ Rectangle {
property StatusImageSettings image: StatusImageSettings {} property StatusImageSettings image: StatusImageSettings {}
property string label: "" property string label: ""
property alias sensor: sensor
property alias statusListItemTitle: statusListItemTitle
property alias statusListItemComponentsSlot: statusListItemComponentsSlot
property list<Item> components property list<Item> components
onComponentsChanged: { onComponentsChanged: {
@ -47,7 +53,7 @@ Rectangle {
Loader { Loader {
id: iconOrImage id: iconOrImage
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: statusListItem.leftPadding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
active: !!statusListItem.icon.name || !!statusListItem.image.source.toString() active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
@ -74,7 +80,7 @@ Rectangle {
Item { Item {
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
anchors.leftMargin: 16 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)
@ -111,7 +117,7 @@ Rectangle {
Row { Row {
id: statusListItemComponentsSlot id: statusListItemComponentsSlot
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: statusListItem.rightPadding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: 10 spacing: 10
} }