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 chainId: 1 // main
} }
ListElement { ListElement {
symbol: "ETH" symbol: "ARBI"
amount: "12345.6789" amount: "12345.67892131231313213123445"
address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881" address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881"
chainId: 10 // Opti chainId: 10 // Opti
} }

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

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