From 6aa37b8b698bb0818b164d8f8b5ea4a7e74ef136 Mon Sep 17 00:00:00 2001 From: Emil Sawicki Date: Wed, 11 Dec 2024 08:41:43 +0100 Subject: [PATCH] fix(chat): Update preview label issue Fixes #16926 --- storybook/src/Models/PaymentRequestModel.qml | 4 +- .../chat/PaymentRequestMiniCardDelegate.qml | 150 ++++++++++-------- 2 files changed, 83 insertions(+), 71 deletions(-) diff --git a/storybook/src/Models/PaymentRequestModel.qml b/storybook/src/Models/PaymentRequestModel.qml index 2e6128ae19..f6f160aba9 100644 --- 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 index e226e85bf5..c19abc3d4d 100644 --- 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 + 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 } } }