[GUI] Properly implement transaction delegate
Now that sending transactions works, it was time to rewrite the GUI representation of a transaction to be general enough for more than just one transaction type.
This commit is contained in:
Nathan Hourt
parent
13d83904c9
commit
762c8712a8
7 changed files with 117 additions and 26 deletions
|
|
@ -42,7 +42,8 @@ int main(int argc, char *argv[])
|
|||
qmlRegisterType<GrapheneApplication>("Graphene.Client", 0, 1, "GrapheneApplication");
|
||||
qmlRegisterType<Transaction>("Graphene.Client", 0, 1, "Transaction");
|
||||
|
||||
qmlRegisterInterface<OperationBase>("OperationBase");
|
||||
qmlRegisterUncreatableType<OperationBase>("Graphene.Client", 0, 1, "OperationBase",
|
||||
"OperationBase is an abstract base class; cannot be created");
|
||||
qmlRegisterType<TransferOperation>("Graphene.Client", 0, 1, "TransferOperation");
|
||||
|
||||
qmlRegisterUncreatableType<OperationBuilder>("Graphene.Client", 0, 1, "OperationBuilder",
|
||||
|
|
|
|||
|
|
@ -34,40 +34,26 @@ FormBase {
|
|||
}
|
||||
|
||||
Rectangle {
|
||||
id: trxBackground
|
||||
anchors.fill: trxColumn
|
||||
anchors.margins: Scaling.mm(-2)
|
||||
id: background
|
||||
Layout.preferredHeight: childrenRect.height + Scaling.mm(4)
|
||||
Layout.preferredWidth: childrenRect.width + Scaling.mm(4)
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
radius: 8.0
|
||||
samples: 16
|
||||
horizontalOffset: Scaling.mm(.5)
|
||||
verticalOffset: Scaling.mm(.5)
|
||||
source: trxBackground
|
||||
source: background
|
||||
color: "#80000000"
|
||||
transparentBorder: true
|
||||
}
|
||||
}
|
||||
Column {
|
||||
id: trxColumn
|
||||
Layout.preferredWidth: Scaling.cm(10)
|
||||
spacing: Scaling.mm(2)
|
||||
|
||||
Repeater {
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
model: trx.operations
|
||||
Label {
|
||||
property Asset transferAsset: app.model.getAsset(modelData.amountType)
|
||||
property Asset feeAsset: app.model.getAsset(modelData.feeType)
|
||||
text: {
|
||||
return qsTr("Transfer %1 %2 from %3 to %4\nFee: %5 %6").arg(transferAsset.formatAmount(modelData.amount))
|
||||
.arg(transferAsset.symbol)
|
||||
.arg(app.model.getAccount(modelData.sender).name)
|
||||
.arg(app.model.getAccount(modelData.receiver).name)
|
||||
.arg(feeAsset.formatAmount(modelData.fee))
|
||||
.arg(feeAsset.symbol)
|
||||
}
|
||||
}
|
||||
TransactionDelegate {
|
||||
x: Scaling.mm(2)
|
||||
y: Scaling.mm(2)
|
||||
trx: __trx
|
||||
Layout.preferredWidth: Scaling.cm(10)
|
||||
app: base.app
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
|
|
|
|||
37
programs/light_client/qml/TransactionDelegate.qml
Normal file
37
programs/light_client/qml/TransactionDelegate.qml
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import QtQuick 2.5
|
||||
import QtQuick.Layouts 1.2
|
||||
|
||||
import Graphene.Client 0.1
|
||||
|
||||
import "."
|
||||
|
||||
ColumnLayout {
|
||||
id: base
|
||||
spacing: Scaling.mm(2)
|
||||
|
||||
property Transaction trx
|
||||
property GrapheneApplication app
|
||||
|
||||
Repeater {
|
||||
model: trx.operations
|
||||
Loader {
|
||||
function load() {
|
||||
var source
|
||||
switch (modelData.operationType) {
|
||||
case OperationBase.TransferOperationType: source = "TransferOperationDelegate.qml"
|
||||
}
|
||||
setSource(source, {"op": modelData, "app": base.app, "width": base.width})
|
||||
}
|
||||
Component.onCompleted: load()
|
||||
// Debugging shim; disable before release
|
||||
MouseArea {
|
||||
anchors.fill: item
|
||||
onClicked: {
|
||||
console.log("Reloading " + parent.source)
|
||||
parent.source = ""
|
||||
parent.load()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -79,6 +79,8 @@ FormBase {
|
|||
maximumValue: maxBalance? maxBalance.amountReal() : 0
|
||||
decimals: maxBalance? maxBalance.type.precision : 0
|
||||
|
||||
Keys.onReturnPressed: if (finishLine.rightButtonEnabled) finishLine.clickRight()
|
||||
|
||||
property Balance maxBalance: assetField.enabled && senderPicker.showBalance >= 0?
|
||||
senderPicker.balances[senderPicker.showBalance] : null
|
||||
property int precisionAdjustment: maxBalance? Math.pow(10, maxBalance.type.precision) : 1
|
||||
|
|
@ -114,7 +116,7 @@ FormBase {
|
|||
senderPicker.accountControlLevel >= 1? qsTr("Transfer") : qsTr("Propose")
|
||||
}
|
||||
rightButtonEnabled: senderPicker.account && recipientPicker.account && senderPicker.account !== recipientPicker.account && amountField.value
|
||||
requiresUnlocking: encryptMemoField.checked
|
||||
requiresUnlocking: encryptMemoField.checked && memoField.text
|
||||
Layout.fillWidth: true
|
||||
|
||||
onLeftButtonClicked: canceled({})
|
||||
|
|
|
|||
59
programs/light_client/qml/TransferOperationDelegate.qml
Normal file
59
programs/light_client/qml/TransferOperationDelegate.qml
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import QtQuick 2.5
|
||||
import QtQuick.Layouts 1.2
|
||||
|
||||
import Graphene.Client 0.1
|
||||
|
||||
import "."
|
||||
|
||||
ColumnLayout {
|
||||
id: base
|
||||
|
||||
property TransferOperation op
|
||||
property GrapheneApplication app
|
||||
|
||||
property Asset transferAsset: app.model.getAsset(op.amountType)
|
||||
property Asset feeAsset: app.model.getAsset(op.feeType)
|
||||
property Account sender: app.model.getAccount(op.sender)
|
||||
property Account receiver: app.model.getAccount(op.receiver)
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Identicon {
|
||||
height: Scaling.cm(1)
|
||||
width: Scaling.cm(1)
|
||||
name: sender.name
|
||||
}
|
||||
Text {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text: "-><br/>%1 %2".arg(transferAsset.formatAmount(op.amount)).arg(transferAsset.symbol)
|
||||
horizontalAlignment: Text.Center
|
||||
}
|
||||
Identicon {
|
||||
height: Scaling.cm(1)
|
||||
width: Scaling.cm(1)
|
||||
name: receiver.name
|
||||
}
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
horizontalAlignment: Text.AlignRight
|
||||
text: qsTr("Transfer from %1 to %2").arg(sender.name).arg(receiver.name)
|
||||
}
|
||||
Text {
|
||||
Layout.fillWidth: true
|
||||
horizontalAlignment: Text.AlignRight
|
||||
font.pointSize: 9
|
||||
text: qsTr("Fee: %1 %2").arg(feeAsset.formatAmount(op.fee)).arg(feeAsset.symbol)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: op.memo? qsTr("Memo: %1").arg(op.memoIsEncrypted && !app.wallet.isLocked? op.decryptedMemo(app.wallet, app.model)
|
||||
: op.memo)
|
||||
: qsTr("No memo")
|
||||
color: op.memo? "black" : "grey"
|
||||
font.italic: !op.memo
|
||||
}
|
||||
}
|
||||
|
|
@ -18,8 +18,12 @@ RowLayout {
|
|||
signal leftButtonClicked
|
||||
signal rightButtonClicked
|
||||
|
||||
function clickLeft() { leftButton.clicked() }
|
||||
function clickRight() { rightButton.clicked() }
|
||||
|
||||
Item { Layout.fillWidth: true }
|
||||
Button {
|
||||
id: leftButton
|
||||
text: leftButtonText
|
||||
onClicked: leftButtonClicked()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
<file>main.qml</file>
|
||||
<file>FormBase.qml</file>
|
||||
<file>TransferForm.qml</file>
|
||||
<file>TransactionDelegate.qml</file>
|
||||
<file>TransferOperationDelegate.qml</file>
|
||||
<file>TransactionConfirmationForm.qml</file>
|
||||
<file>FormBox.qml</file>
|
||||
<file>FormFlipper.qml</file>
|
||||
|
|
|
|||
Loading…
Reference in a new issue