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

feat: add TransactionBubble for use with the chat commands 

Add only the UI component for the TransactionBubble
Was not thoroughly tested since it was only developed in QT Designer
This commit is contained in:
Jonathan Rainville 2020-08-25 14:44:29 -04:00 committed by Iuri Matias
parent 5ac9b99e3e
commit 9e2bf87d84
8 changed files with 344 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionBubble.qml Normal file
View File

@ -0,0 +1,128 @@
import QtQuick 2.3
import "../../../../../shared"
import "../../../../../imports"
import "./TransactionComponents"
Rectangle {
property string tokenAmount: "100"
property string token: "SNT"
property string fiatValue: "10 USD"
property bool outgoing: true
property string state: "addressReceived"
property string time: "9:41 AM"
id: root
width: 170
height: childrenRect.height
radius: 16
color: Style.current.background
border.color: Style.current.border
border.width: 1
StyledText {
id: title
color: Style.current.secondaryText
text: outgoing ? qsTr("↑ Outgoing transaction") : qsTr("↓ Incoming transaction")
font.weight: Font.Medium
anchors.top: parent.top
anchors.topMargin: Style.current.halfPadding
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 13
}
Item {
id: valueContainer
height: tokenText.height + fiatText.height
anchors.top: title.bottom
anchors.topMargin: 4
anchors.right: parent.right
anchors.rightMargin: 12
anchors.left: parent.left
anchors.leftMargin: 12
Image {
id: tokenImage
source: `../../../../img/tokens/${root.token}.png`
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
id: tokenText
color: Style.current.text
text: `${root.tokenAmount} ${root.token}`
anchors.left: tokenImage.right
anchors.leftMargin: Style.current.halfPadding
font.pixelSize: 22
}
StyledText {
id: fiatText
color: Style.current.secondaryText
text: root.fiatValue
anchors.top: tokenText.bottom
anchors.left: tokenText.left
font.pixelSize: 13
}
}
Loader {
id: bubbleLoader
active: root.state !== Constants.addressRequested || !outgoing
sourceComponent: stateBubbleComponent
anchors.top: valueContainer.bottom
anchors.topMargin: Style.current.halfPadding
width: parent.width
height: item.height + 12
}
Component {
id: stateBubbleComponent
StateBubble {
state: root.state
}
}
Loader {
id: buttonsLoader
active: (root.state === Constants.addressRequested && !root.outgoing) ||
(root.state === Constants.addressReceived && root.outgoing)
sourceComponent: root.outgoing ? signAndSendComponent : acceptTransactionComponent
anchors.top: bubbleLoader.active ? bubbleLoader.bottom : valueContainer.bottom
anchors.topMargin: bubbleLoader.active ? 0 : Style.current.halfPadding
width: parent.width
height: item.height
}
Component {
id: acceptTransactionComponent
AcceptTransaction {}
}
Component {
id: signAndSendComponent
SendTransactionButton {}
}
StyledText {
id: timeText
color: Style.current.secondaryText
text: root.time
anchors.bottom: parent.bottom
anchors.bottomMargin: 9
anchors.right: parent.right
anchors.rightMargin: 12
font.pixelSize: 10
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#4c4e50";formeditorZoom:1.25}
}
##^##*/

70
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/AcceptTransaction.qml Normal file
View File

@ -0,0 +1,70 @@
import QtQuick 2.3
import "../../../../../../shared"
import "../../../../../../imports"
Item {
width: parent.width
height: childrenRect.height
Separator {
id: separator1
}
StyledText {
id: acceptText
color: Style.current.blue
text: qsTr("Accept and share address")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font.weight: Font.Medium
anchors.right: parent.right
anchors.left: parent.left
bottomPadding: Style.current.halfPadding
topPadding: Style.current.halfPadding
anchors.top: separator1.bottom
font.pixelSize: 15
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
console.log('Accept')
}
}
}
Separator {
id: separator2
anchors.topMargin: 0
anchors.top: acceptText.bottom
}
StyledText {
id: declineText
color: Style.current.blue
text: qsTr("Decline")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font.weight: Font.Medium
anchors.right: parent.right
anchors.left: parent.left
bottomPadding: Style.current.padding
topPadding: Style.current.padding
anchors.top: separator2.bottom
font.pixelSize: 15
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
console.log('Decline')
}
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.25}
}
##^##*/

42
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/SendTransactionButton.qml Normal file
View File

@ -0,0 +1,42 @@
import QtQuick 2.3
import "../../../../../../shared"
import "../../../../../../imports"
Item {
width: parent.width
height: childrenRect.height
Separator {
id: separator
}
StyledText {
id: signText
color: Style.current.blue
text: qsTr("Sign and send")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
font.weight: Font.Medium
anchors.right: parent.right
anchors.left: parent.left
bottomPadding: Style.current.halfPadding
topPadding: Style.current.halfPadding
anchors.top: separator1.bottom
font.pixelSize: 15
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
console.log('Sign')
}
}
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.25}
}
##^##*/

82
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/StateBubble.qml Normal file
View File

@ -0,0 +1,82 @@
import QtQuick 2.3
import QtGraphicalEffects 1.13
import "../../../../../../shared"
import "../../../../../../imports"
Rectangle {
property string state: Constants.pending
id: root
width: childrenRect.width + 12
height: childrenRect.height
border.width: 1
border.color: Style.current.border
radius: 24
SVGImage {
id: stateImage
source: {
switch (root.state) {
case Constants.pending:
case Constants.addressReceived:
case Constants.shared:
case Constants.addressRequested: return "../../../../../img/dotsLoadings.svg"
case Constants.confirmed: return "../../../../../img/check.svg"
case Constants.unknown:
case Constants.failure:
case Constants.declined: return "../../../../../img/exclamation.svg"
default: return ""
}
}
width: 16
height: 16
anchors.left: parent.left
anchors.leftMargin: Style.current.halfPadding
anchors.verticalCenter: stateText.verticalCenter
}
ColorOverlay {
anchors.fill: stateImage
source: stateImage
color: state == Constants.confirmed ? Style.current.transparent : Style.current.text
}
StyledText {
id: stateText
color: {
if (root.state === Constants.unknown || root.state === Constants.failure) {
return Style.current.danger
}
if (root.state === Constants.confirmed || root.state === Constants.declined) {
return Style.current.text
}
return Style.current.secondaryText
}
text: {
switch (root.state) {
case Constants.pending: return qsTr("Pending")
case Constants.confirmed: return qsTr("Confirmed")
case Constants.unknown: return qsTr("Unknown token")
case Constants.addressRequested: return qsTr("Address requested")
case Constants.addressReceived: return qsTr("Address received")
case Constants.declined: return qsTr("Transaction declined")
case Constants.shared: return qsTr("Shared ‘Other Account’")
case Constants.failure: return qsTr("Failure")
default: return qsTr("Unknown state")
}
}
font.weight: Font.Medium
anchors.left: stateImage.right
anchors.leftMargin: 4
bottomPadding: Style.current.halfPadding
topPadding: Style.current.halfPadding
font.pixelSize: 13
}
}
/*##^##
Designer {
D{i:0;formeditorColor:"#808080";formeditorZoom:2}
}
##^##*/

5
ui/app/img/dotsLoadings.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="3.5" cy="8" r="1.5" fill="#939BA1"/>
<circle opacity="0.2" cx="12.5" cy="8" r="1.5" fill="#939BA1"/>
<circle opacity="0.6" cx="8" cy="8" r="1.5" fill="#939BA1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 277 B

3
ui/app/img/exclamation.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM8.25 11.25C8.25 11.9404 7.69036 12.5 7 12.5C6.30964 12.5 5.75 11.9404 5.75 11.25C5.75 10.5596 6.30964 10 7 10C7.69036 10 8.25 10.5596 8.25 11.25ZM7 2C6.44772 2 6 2.44772 6 3V7.5C6 8.05228 6.44772 8.5 7 8.5C7.55228 8.5 8 8.05229 8 7.5V3C8 2.44772 7.55228 2 7 2Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 534 B

10
ui/imports/Constants.qml
View File

@ -23,6 +23,16 @@ QtObject {
readonly property string seedWalletType: "seed"
readonly property string generatedWalletType: "generated"
// Transaction states
readonly property string pending: "pending"
readonly property string confirmed: "confirmed"
readonly property string unknown: "unknown"
readonly property string addressRequested: "addressRequested"
readonly property string addressReceived: "addressReceived"
readonly property string declined: "declined"
readonly property string shared: "shared"
readonly property string failure: "failure"
readonly property var accountColors: [
"#9B832F",
"#D37EF4",

4
ui/nim-status-client.pro
View File

@ -133,6 +133,10 @@ DISTFILES += \
app/AppLayouts/Chat/ChatColumn/MessageComponents/RectangleCorner.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/SentMessage.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/Sticker.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionBubble.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/AcceptTransaction.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/SendTransactionButton.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/TransactionComponents/StateBubble.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/UsernameLabel.qml \
app/AppLayouts/Chat/ChatColumn/MessageComponents/qmldir \