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

wip: chat mini card 

todo: nim model in message
This commit is contained in:
Emil Sawicki 2024-11-04 21:39:01 +01:00
parent d45f54c238
commit 300545a3b0
8 changed files with 161 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
storybook/pages/ChatInputLinksPreviewAreaPage.qml
View File

@ -32,6 +32,7 @@ SplitView {
width: parent.width
imagePreviewArray: ["https://picsum.photos/200/300?random=1", "https://picsum.photos/200/300?random=1"]
linkPreviewModel: showLinkPreviewSettings ? emptyModel : mockedLinkPreviewModel
requestPaymentModel: mockedRequestPaymentModel
showLinkPreviewSettings: !linkPreviewEnabledSwitch.checked
visible: hasContent
@ -82,6 +83,10 @@ SplitView {
LinkPreviewModel {
id: mockedLinkPreviewModel
}
RequestPaymentModel {
id: mockedRequestPaymentModel
}
}
// category: Panels

18
storybook/src/Models/RequestPaymentModel.qml Normal file
View File

@ -0,0 +1,18 @@
import QtQuick 2.15
ListModel {
id: root
ListElement {
symbol: "WBTC"
amount: "0.00017"
address: "0x7F47C2e18a4BBf5487E6fb082eC2D9Ab0E6d7240"
chainId: 1 // main
}
ListElement {
symbol: "ETH"
amount: "12345.6789"
address: "0x7F47C2e98a4BBf5487E6fb082eC2D9Ab0E6d8881"
chainId: 10 // Opti
}
}

1
storybook/src/Models/qmldir
View File

@ -23,6 +23,7 @@ TokensBySymbolModel 1.0 TokensBySymbolModel.qml
CommunitiesModel 1.0 CommunitiesModel.qml
OnRampProvidersModel 1.0 OnRampProvidersModel.qml
SwapTransactionRoutes 1.0 SwapTransactionRoutes.qml
RequestPaymentModel 1.0 RequestPaymentModel.qml
singleton ModelsData 1.0 ModelsData.qml
singleton NetworksModel 1.0 NetworksModel.qml

15
storybook/stubs/shared/stores/RequestPaymentStore.qml
View File

@ -5,4 +5,19 @@ QtObject {
required property var flatNetworksModel
required property var processedAssetsModel
required property var accountsModel
property var requestPaymentModel: ListModel {}
function addPaymentRequest(symbol, amount, address, chainId) {
requestPaymentModel.append({
symbol: symbol,
amount: amount,
address: address,
chainId: chainId
})
}
function removePaymentRequest(index) {
requestPaymentModel.remove(index)
}
}

19
ui/imports/shared/controls/chat/ChatInputLinksPreviewArea.qml
View File

@ -32,6 +32,12 @@ Control {
*/
required property var linkPreviewModel
required property bool showLinkPreviewSettings
/*
Expected roles:
string symbol
string amount
*/
required property var requestPaymentModel
readonly property alias hoveredUrl: d.hoveredUrl
readonly property bool hasContent: imagePreviewArray.length > 0 || showLinkPreviewSettings || linkPreviewRepeater.count > 0
@ -41,6 +47,8 @@ Control {
signal linkReload(string link)
signal linkClicked(string link)
signal paymentRequestRemoved(int index)
signal enableLinkPreview()
signal enableLinkPreviewForThisMessage()
signal disableLinkPreview()
@ -96,6 +104,17 @@ Control {
onImageRemoved: root.imageRemoved(index)
visible: !!imagePreviewArray && imagePreviewArray.length > 0
}
Repeater {
id: requestPaymentRepeater
model: root.requestPaymentModel
delegate: RequestPaymentMiniCardDelegate {
required property var model
amount: model.amount
symbol: model.symbol
onClose: root.paymentRequestRemoved(model.index)
}
}
Repeater {
id: linkPreviewRepeater
model: d.filteredModel

100
ui/imports/shared/controls/chat/RequestPaymentMiniCardDelegate.qml Normal file
View File

@ -0,0 +1,100 @@
import QtQuick 2.15
import QtQuick.Layouts 1.15
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import utils 1.0
CalloutCard {
id: root
required property string amount
required property string symbol
readonly property bool containsMouse: mouseArea.hovered || closeButton.hovered
signal close()
implicitWidth:260
implicitHeight: 64
verticalPadding: 15
horizontalPadding: 12
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)
}
}
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
}
StatusBaseText {
Layout.fillWidth: true
Layout.fillHeight: true
font.pixelSize: Theme.tertiaryTextFontSize
color: Theme.palette.baseColor1
verticalAlignment: Text.AlignVCenter
text: "%1 %2".arg(root.amount).arg(root.symbol)
}
}
StatusFlatButton {
id: closeButton
icon.name: "close"
size: StatusBaseButton.Size.Small
hoverColor: Theme.palette.directColor8
textColor: Theme.palette.directColor1
onClicked: root.close()
}
}
}
HoverHandler {
id: mouseArea
target: background
cursorShape: Qt.PointingHandCursor
}
}

1
ui/imports/shared/controls/chat/qmldir
View File

@ -10,6 +10,7 @@ LinkPreviewCard 1.0 LinkPreviewCard.qml
LinkPreviewMiniCard 1.0 LinkPreviewMiniCard.qml
LinkPreviewSettingsCard 1.0 LinkPreviewSettingsCard.qml
LinkPreviewSettingsCardMenu 1.0 LinkPreviewSettingsCardMenu.qml
RequestPaymentMiniCardDelegate 1.0 RequestPaymentMiniCardDelegate.qml
MessageMouseArea 1.0 MessageMouseArea.qml
MessageReactionsRow 1.0 MessageReactionsRow.qml
ProfileHeader 1.0 ProfileHeader.qml

2
ui/imports/shared/stores/RequestPaymentStore.qml
View File

@ -5,4 +5,6 @@ QtObject {
required property var flatNetworksModel
required property var processedAssetsModel
required property var accountsModel
property var requestPaymentModel: null
}