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

fix(chat): Update preview label issue 

Fixes #16926
This commit is contained in:
Emil Sawicki 2024-12-11 08:41:43 +01:00 committed by Anthony Laibe
parent b0935537cf
commit 6aa37b8b69
2 changed files with 83 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/src/Models/PaymentRequestModel.qml
View File

@ -10,8 +10,8 @@ ListModel {
chainId: 1 // main
}
ListElement {
symbol: "ETH"
amount: "12345.6789"
symbol: "ARBI"
amount: "12345.67892131231313213123445"
address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881"
chainId: 10 // Opti
}

150
ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
View File

@ -25,81 +25,93 @@ CalloutCard {
borderColor: Theme.palette.directColor7
backgroundColor: root.containsMouse ? Theme.palette.directColor7 : Theme.palette.background
contentItem: Item {
implicitHeight: layout.implicitHeight
implicitWidth: layout.implicitWidth
contentItem: GridLayout {
rowSpacing: 0
columnSpacing: Theme.halfPadding
columns: 4
rows: 3
RowLayout {
id: layout
anchors.fill: parent
spacing: 16
StatusRoundIcon {
id: favIcon
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.preferredWidth: 36
Layout.preferredHeight: 36
Layout.rowSpan: 3
asset.width: 24
asset.height: 24
asset.bgColor: Theme.palette.directColor7
asset.bgHeight: 36
asset.bgWidth: 36
asset.color: Theme.palette.primaryColor1
asset.name: Theme.svg("send")
StatusRoundIcon {
id: favIcon
Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
Layout.preferredWidth: 36
Layout.preferredHeight: 36
asset.width: 24
asset.height: 24
asset.bgColor: Theme.palette.directColor7
asset.bgHeight: 36
asset.bgWidth: 36
asset.color: Theme.palette.primaryColor1
asset.name: Theme.svg("send")
StatusSmartIdenticon {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.right
asset.width: 16
asset.height: 16
asset.bgColor: root.containsMouse ? Theme.palette.transparent : Theme.palette.background
asset.bgHeight: 20
asset.bgWidth: 20
asset.isImage: true
asset.name: Constants.tokenIcon(root.symbol)
}
StatusSmartIdenticon {
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.right
asset.width: 16
asset.height: 16
asset.bgColor: root.containsMouse ? Theme.palette.transparent : Theme.palette.background
asset.bgHeight: 20
asset.bgWidth: 20
asset.isImage: true
asset.name: Constants.tokenIcon(root.symbol)
}
}
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Item {
Layout.fillHeight: true
Layout.preferredWidth: Theme.halfPadding / 2
Layout.rowSpan: 3
}
StatusBaseText {
Layout.fillWidth: true
Layout.fillHeight: true
text: qsTr("Payment request")
font.pixelSize: Theme.additionalTextSize
font.weight: Font.Medium
}
RowLayout {
Layout.fillWidth: true
Layout.fillHeight: true
StatusBaseText {
Layout.maximumWidth: parent.width * 0.8
Layout.fillHeight: true
font.pixelSize: Theme.tertiaryTextFontSize
color: Theme.palette.baseColor1
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
text: root.amount
}
StatusBaseText {
Layout.fillHeight: true
font.pixelSize: Theme.tertiaryTextFontSize
color: Theme.palette.baseColor1
verticalAlignment: Text.AlignVCenter
text: root.symbol
}
}
Item {
// NOTE this item is added because for some reason the "Payment request" text is not rendered until hover
Layout.preferredHeight: 1
Layout.fillWidth: true
}
StatusFlatButton {
id: closeButton
Layout.rowSpan: 3
icon.name: "close"
size: StatusBaseButton.Size.Small
hoverColor: Theme.palette.directColor8
textColor: Theme.palette.directColor1
onClicked: root.close()
}
StatusBaseText {
Layout.fillWidth: true
text: qsTr("Payment request")
font.pixelSize: Theme.additionalTextSize
font.weight: Font.Medium
}
Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: Theme.halfPadding / 2
StatusBaseText {
id: amountText
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: parent.right
anchors.rightMargin: symbolText.paintedWidth
font.pixelSize: Theme.tertiaryTextFontSize
color: Theme.palette.baseColor1
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
text: root.amount
}
StatusFlatButton {
id: closeButton
icon.name: "close"
size: StatusBaseButton.Size.Small
hoverColor: Theme.palette.directColor8
textColor: Theme.palette.directColor1
onClicked: root.close()
StatusBaseText {
id: symbolText
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: amountText.paintedWidth + Theme.halfPadding
font.pixelSize: Theme.tertiaryTextFontSize
color: Theme.palette.baseColor1
verticalAlignment: Text.AlignVCenter
text: root.symbol
}
}
}