fix(chat): Update preview label issue

Fixes #16926
status-im · Dec 12, 2024 · 6aa37b8 · 6aa37b8
1 parent b093553
commit 6aa37b8
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 74 deletions.
diff --git a/storybook/src/Models/PaymentRequestModel.qml b/storybook/src/Models/PaymentRequestModel.qml
@@ -10,8 +10,8 @@ ListModel {
         chainId: 1 // main
     }
     ListElement {
-        symbol: "ETH"
-        amount: "12345.6789"
+        symbol: "ARBI"
+        amount: "12345.67892131231313213123445"
         address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881"
         chainId: 10 // Opti
     }

diff --git a/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml b/ui/imports/shared/controls/chat/PaymentRequestMiniCardDelegate.qml
@@ -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
-
-        RowLayout {
-            id: layout
-            anchors.fill: parent
-            spacing: 16
-
-            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)
-                }
-            }
+    contentItem: GridLayout {
+        rowSpacing: 0
+        columnSpacing: Theme.halfPadding
+        columns: 4
+        rows: 3
+
+        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")
 
-            ColumnLayout {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-
-                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
-                    }
-                }
+            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)
             }
+        }
+
+        Item {
+            Layout.fillHeight: true
+            Layout.preferredWidth: Theme.halfPadding / 2
+            Layout.rowSpan: 3
+        }
+
+        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()
+        }
 
-            StatusFlatButton {
-                id: closeButton
-                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
+            }
+            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
             }
         }
     }