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

feat(StatusListItem): Added new properties to handle inline tags needed in the wallet section (#879)

This commit is contained in:
Khushboo-dev-cpp 2022-09-09 00:03:28 +02:00 committed by Michał Cieślak
parent 19b9c6e164
commit a298dace74
2 changed files with 95 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
ui/StatusQ/sandbox/controls/ListItems.qml
View File

@ -576,4 +576,42 @@ ColumnLayout {
asset.isLetterIdenticon: true asset.isLetterIdenticon: true
loadingFailed: true loadingFailed: true
} }
StatusListItem {
implicitWidth: 600
title: "List Item with Tags"
subTitle: "03:32"
asset.isLetterIdenticon: true
inlineTagModel: 6
inlineTagDelegate: StatusListItemTag {
height: 24
title: "tag"
asset.isLetterIdenticon: true
}
components: [
ColumnLayout {
Row {
Layout.alignment: Qt.AlignRight
spacing: 4
StatusIcon {
color: Theme.palette.successColor1
icon: "arrow-up"
rotation: 135
height: 18
}
StatusBaseText {
text: "0.0000015 ETH"
font.pixelSize: 15
color: Theme.palette.directColor1
}
}
StatusBaseText {
Layout.alignment: Qt.AlignRight
text: "1201.10 USD"
font.pixelSize: 15
color: Theme.palette.baseColor1
}
}
]
}
} }

70
ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
View File

@ -31,6 +31,8 @@ Rectangle {
property Component bottomDelegate property Component bottomDelegate
property alias tagsModel: tagsRepeater.model property alias tagsModel: tagsRepeater.model
property Component tagsDelegate property Component tagsDelegate
property var inlineTagModel: []
property Component inlineTagDelegate
property bool loading: false property bool loading: false
property bool loadingFailed: false property bool loadingFailed: false
@ -278,25 +280,67 @@ Rectangle {
anchors.leftMargin: 4 anchors.leftMargin: 4
} }
StatusBaseText { RowLayout {
id: statusListItemSubTitle id: statusListItemSubtitleTagsRow
objectName: "statusListItemSubTitle"
anchors.top: statusListItemTitle.bottom anchors.top: statusListItemTitle.bottom
anchors.topMargin: 4
width: parent.width width: parent.width
text: statusListItem.subTitle spacing: 4
font.pixelSize: 15
color: statusListItem.loadingFailed ? Theme.palette.dangerColor1 StatusBaseText {
: !statusListItem.enabled || !statusListItem.tertiaryTitle id: statusListItemSubTitle
? Theme.palette.baseColor1 objectName: "statusListItemSubTitle"
: Theme.palette.directColor1
height: visible ? contentHeight : 0 Layout.alignment: Qt.AlignVCenter
visible: !!statusListItem.subTitle Layout.preferredWidth: inlineTagModelRepeater.count > 0 ? contentWidth : parent.width
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
text: statusListItem.subTitle
font.pixelSize: 15
color: statusListItem.loadingFailed ? Theme.palette.dangerColor1
: !statusListItem.enabled || !statusListItem.tertiaryTitle
? Theme.palette.baseColor1
: Theme.palette.directColor1
visible: !!statusListItem.subTitle
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
}
StatusBaseText {
id: dot
Layout.alignment: Qt.AlignVCenter
Layout.topMargin: -48
text: "."
font.pixelSize: 40
color: Theme.palette.baseColor1
lineHeightMode: Text.FixedHeight
lineHeight: 24
visible: inlineTagModelRepeater.count > 0
}
StatusScrollView {
id: inlineTagModelRepeaterRow
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
Layout.preferredHeight: row.height
contentHeight: row.height
contentWidth: row.width
padding: 0
clip: true
Row {
id: row
Repeater {
id: inlineTagModelRepeater
model: inlineTagModel
delegate: inlineTagDelegate
}
}
}
} }
StatusBaseText { StatusBaseText {
id: statusListItemTertiaryTitle id: statusListItemTertiaryTitle
anchors.top: statusListItemSubTitle.bottom anchors.top: statusListItemSubtitleTagsRow.bottom
width: parent.width width: parent.width
height: visible ? contentHeight : 0 height: visible ? contentHeight : 0
text: statusListItem.tertiaryTitle text: statusListItem.tertiaryTitle