From 762c8712a8249014627b97f35bf68ee147245426 Mon Sep 17 00:00:00 2001 From: Nathan Hourt Date: Wed, 5 Aug 2015 16:03:09 -0400 Subject: [PATCH] [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. --- programs/light_client/main.cpp | 3 +- .../qml/TransactionConfirmationForm.qml | 34 ++++------- .../light_client/qml/TransactionDelegate.qml | 37 ++++++++++++ programs/light_client/qml/TransferForm.qml | 4 +- .../qml/TransferOperationDelegate.qml | 59 +++++++++++++++++++ .../qml/UnlockingFinishButtons.qml | 4 ++ programs/light_client/qml/qml.qrc | 2 + 7 files changed, 117 insertions(+), 26 deletions(-) create mode 100644 programs/light_client/qml/TransactionDelegate.qml create mode 100644 programs/light_client/qml/TransferOperationDelegate.qml diff --git a/programs/light_client/main.cpp b/programs/light_client/main.cpp index 52767912..19144e2c 100644 --- a/programs/light_client/main.cpp +++ b/programs/light_client/main.cpp @@ -42,7 +42,8 @@ int main(int argc, char *argv[]) qmlRegisterType("Graphene.Client", 0, 1, "GrapheneApplication"); qmlRegisterType("Graphene.Client", 0, 1, "Transaction"); - qmlRegisterInterface("OperationBase"); + qmlRegisterUncreatableType("Graphene.Client", 0, 1, "OperationBase", + "OperationBase is an abstract base class; cannot be created"); qmlRegisterType("Graphene.Client", 0, 1, "TransferOperation"); qmlRegisterUncreatableType("Graphene.Client", 0, 1, "OperationBuilder", diff --git a/programs/light_client/qml/TransactionConfirmationForm.qml b/programs/light_client/qml/TransactionConfirmationForm.qml index 2a34f212..350b8204 100644 --- a/programs/light_client/qml/TransactionConfirmationForm.qml +++ b/programs/light_client/qml/TransactionConfirmationForm.qml @@ -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 { diff --git a/programs/light_client/qml/TransactionDelegate.qml b/programs/light_client/qml/TransactionDelegate.qml new file mode 100644 index 00000000..440b8a6a --- /dev/null +++ b/programs/light_client/qml/TransactionDelegate.qml @@ -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() + } + } + } + } +} diff --git a/programs/light_client/qml/TransferForm.qml b/programs/light_client/qml/TransferForm.qml index f4c99dd9..f2850000 100644 --- a/programs/light_client/qml/TransferForm.qml +++ b/programs/light_client/qml/TransferForm.qml @@ -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({}) diff --git a/programs/light_client/qml/TransferOperationDelegate.qml b/programs/light_client/qml/TransferOperationDelegate.qml new file mode 100644 index 00000000..e0f62c29 --- /dev/null +++ b/programs/light_client/qml/TransferOperationDelegate.qml @@ -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: "->
%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 + } +} diff --git a/programs/light_client/qml/UnlockingFinishButtons.qml b/programs/light_client/qml/UnlockingFinishButtons.qml index b566ac4a..0b6d0497 100644 --- a/programs/light_client/qml/UnlockingFinishButtons.qml +++ b/programs/light_client/qml/UnlockingFinishButtons.qml @@ -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() } diff --git a/programs/light_client/qml/qml.qrc b/programs/light_client/qml/qml.qrc index 9d8847b5..55cdc35a 100644 --- a/programs/light_client/qml/qml.qrc +++ b/programs/light_client/qml/qml.qrc @@ -3,6 +3,8 @@ main.qml FormBase.qml TransferForm.qml + TransactionDelegate.qml + TransferOperationDelegate.qml TransactionConfirmationForm.qml FormBox.qml FormFlipper.qml