From baf71287199ce6509da03d9671fa70ef64a3e437 Mon Sep 17 00:00:00 2001 From: yann300 Date: Tue, 23 Jun 2015 16:53:41 +0200 Subject: [PATCH] TransactionDialog redesign --- mix/qml/Block.qml | 18 +- mix/qml/QAddressView.qml | 25 +- mix/qml/StructView.qml | 53 ++- mix/qml/TransactionDialog.qml | 604 +++++++++++++++++++--------------- 4 files changed, 382 insertions(+), 318 deletions(-) diff --git a/mix/qml/Block.qml b/mix/qml/Block.qml index 31d3e924c..75d34a766 100644 --- a/mix/qml/Block.qml +++ b/mix/qml/Block.qml @@ -243,7 +243,6 @@ ColumnLayout } } - Rectangle { Layout.preferredWidth: toWidth @@ -266,8 +265,6 @@ ColumnLayout } } - - function userFrienldyToken(value) { if (value && value.indexOf("<") === 0) @@ -293,7 +290,7 @@ ColumnLayout color: labelColor font.bold: true font.pointSize: dbgStyle.absoluteSize(1) - width: parent.width -30 + width: parent.width - 30 text: { if (index >= 0 && transactions.get(index).returned) return transactions.get(index).returned @@ -402,18 +399,5 @@ ColumnLayout } } } - - Rectangle - { - id: right - Layout.preferredWidth: blockWidth - height: 10 - anchors.top: parent.bottom - anchors.topMargin: 5 - color: "#DEDCDC" - radius: 15 - anchors.left: parent.left - anchors.leftMargin: statusWidth - } } diff --git a/mix/qml/QAddressView.qml b/mix/qml/QAddressView.qml index 4781d092b..e879468e6 100644 --- a/mix/qml/QAddressView.qml +++ b/mix/qml/QAddressView.qml @@ -2,14 +2,14 @@ import QtQuick 2.0 import QtQuick.Controls 1.3 import QtQuick.Controls.Styles 1.3 -Item +Row { property alias value: textinput.text property alias accountRef: ctrModel property string subType property bool readOnly property alias currentIndex: trCombobox.currentIndex - property alias currentText: textinput.text + property alias displayInput: textInputRect.visible property variant accounts signal indexChanged() id: editRoot @@ -22,7 +22,7 @@ Item } function currentValue() { - return currentText; + return value; } function currentType() @@ -38,7 +38,6 @@ Item function load() { accountRef.clear(); - accountRef.append({"itemid": " - "}); if (subType === "contract" || subType === "address") { var trCr = 0; @@ -52,7 +51,7 @@ Item if (i > transactionIndex) break; var tr = blockChainPanel.model.blocks[k].transactions[i] - if (tr.functionId === tr.contractId /*&& (dec[1] === tr.contractId || item.subType === "address")*/) + if (tr.functionId === tr.contractId) { accountRef.append({ "itemid": tr.contractId + " - " + trCr, "value": "<" + tr.contractId + " - " + trCr + ">", "type": "contract" }); trCr++; @@ -87,6 +86,7 @@ Item } trCombobox.currentIndex = 0; } + trCombobox.update() } function select(address) @@ -102,10 +102,11 @@ Item } Rectangle { - anchors.fill: parent + //anchors.fill: parent radius: 4 anchors.verticalCenter: parent.verticalCenter height: 20 + id: textInputRect TextInput { id: textinput text: value @@ -141,12 +142,12 @@ Item property bool selected: false id: trCombobox model: ctrModel + width: 350 textRole: "itemid" - height: 20 anchors.verticalCenter: parent.verticalCenter - anchors.left: textinput.parent.right - anchors.leftMargin: 3 - onCurrentIndexChanged: { + + function update() + { trCombobox.selected = false; if (currentText === "") return; @@ -164,5 +165,9 @@ Item } indexChanged(); } + + onCurrentIndexChanged: { + update() + } } } diff --git a/mix/qml/StructView.qml b/mix/qml/StructView.qml index 6b9edc755..75888d812 100644 --- a/mix/qml/StructView.qml +++ b/mix/qml/StructView.qml @@ -13,51 +13,38 @@ Column property int transactionIndex property string context Layout.fillWidth: true - spacing: 0 - - DebuggerPaneStyle { - id: dbgStyle - } + spacing: 5 Repeater { id: repeater visible: model.length > 0 - Layout.fillWidth: true + //height: parent.height RowLayout { id: row height: 20 + (members[index].type.category === QSolidityType.Struct ? (20 * members[index].type.members.length) : 0) Layout.fillWidth: true - DefaultLabel { - height: 20 - id: typeLabel - text: modelData.type.name - anchors.verticalCenter: parent.verticalCenter - font.family: dbgStyle.general.basicFont - color: dbgStyle.general.basicColor - font.pointSize: dbgStyle.general.basicFontSize - } - - DefaultLabel { - height: 20 - id: nameLabel - text: modelData.name - anchors.verticalCenter: parent.verticalCenter - font.family: dbgStyle.general.basicFont - color: dbgStyle.general.basicColor - font.pointSize: dbgStyle.general.basicFontSize - } + Rectangle + { + Layout.preferredWidth: 150 + Row + { + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + Label { + height: 20 + id: nameLabel + text: modelData.name + } - DefaultLabel { - height: 20 - id: equalLabel - text: "=" - anchors.verticalCenter: parent.verticalCenter - font.family: dbgStyle.general.basicFont - color: dbgStyle.general.basicColor - font.pointSize: dbgStyle.general.basicFontSize + Label { + height: 20 + id: typeLabel + text: "(" + modelData.type.name + ")" + } + } } Loader diff --git a/mix/qml/TransactionDialog.qml b/mix/qml/TransactionDialog.qml index 287ba08c2..183b42352 100644 --- a/mix/qml/TransactionDialog.qml +++ b/mix/qml/TransactionDialog.qml @@ -12,8 +12,8 @@ import "." Dialog { id: modalTransactionDialog modality: Qt.ApplicationModal - width: 570 - height: 500 + width: 630 + height: 550 visible: false title: qsTr("Edit Transaction") property int transactionIndex @@ -22,7 +22,7 @@ Dialog { property alias gasAuto: gasAutoCheck.checked; property alias gasPrice: gasPriceField.value; property alias transactionValue: valueField.value; - property string contractId: contractComboBox.currentValue(); + property string contractId: contractCreationComboBox.currentValue(); property alias functionId: functionComboBox.currentText; property var paramValues; property var paramsModel: []; @@ -36,11 +36,6 @@ Dialog { } function open(index, blockIdx, item) { - rowFunction.visible = !useTransactionDefaultValue; - rowValue.visible = !useTransactionDefaultValue; - rowGas.visible = !useTransactionDefaultValue; - rowGasPrice.visible = !useTransactionDefaultValue; - transactionIndex = index blockIndex = blockIdx typeLoader.transactionIndex = index @@ -52,48 +47,19 @@ Dialog { valueField.value = item.value; var contractId = item.contractId; var functionId = item.functionId; - rowFunction.visible = true; paramValues = item.parameters !== undefined ? item.parameters : {}; if (item.sender) senderComboBox.select(item.sender); - contractsModel.clear(); - var contractIndex = -1; - var contracts = codeModel.contracts; - for (var c in contracts) { - contractsModel.append({ cid: c, text: contracts[c].contract.name }); - if (contracts[c].contract.name === contractId) - contractIndex = contractsModel.count - 1; - } - - if (contractIndex == -1 && contractsModel.count > 0) - contractIndex = 0; //@todo suggest unused contract - contractComboBox.currentIndex = contractIndex; - - recipients.accounts = senderComboBox.model; - recipients.subType = "address"; - recipients.load(); - recipients.init(); - recipients.select(contractId); - if (item.isContractCreation) - loadFunctions(contractComboBox.currentValue()); - else - loadFunctions(contractFromToken(recipients.currentValue())) - selectFunction(functionId); + trTypeCreate.checked = item.isContractCreation + trTypeSend.checked = !item.isFunctionCall + trTypeExecute.checked = item.isFunctionCall && !item.isContractCreation - trType.checked = item.isContractCreation - trType.init(); - - paramsModel = []; - if (item.isContractCreation) - loadCtorParameters(); - else - loadParameters(); + load(item.isContractCreation, item.isFunctionCall, functionId, contractId) visible = true; - valueField.focus = true; } function loadCtorParameters(contractId) @@ -111,12 +77,12 @@ Dialog { function loadFunctions(contractId) { functionsModel.clear(); - functionsModel.append({ text: " - " }); var contract = codeModel.contracts[contractId]; if (contract) { var functions = codeModel.contracts[contractId].contract.functions; for (var f = 0; f < functions.length; f++) { - functionsModel.append({ text: functions[f].name }); + if (functions[f].name !== contractId) + functionsModel.append({ text: functions[f].name }); } } } @@ -156,9 +122,9 @@ Dialog { function loadParameters() { paramsModel = [] if (functionComboBox.currentIndex >= 0 && functionComboBox.currentIndex < functionsModel.count) { - var contract = codeModel.contracts[contractFromToken(recipients.currentValue())]; + var contract = codeModel.contracts[contractFromToken(contractCreationComboBox.currentValue())]; if (contract) { - var func = contract.contract.functions[functionComboBox.currentIndex - 1]; + var func = contract.contract.functions[functionComboBox.currentIndex + 1]; if (func) { var parameters = func.parameters; for (var p = 0; p < parameters.length; p++) @@ -175,9 +141,7 @@ Dialog { typeLoader.members = [] typeLoader.value = paramValues; typeLoader.members = paramsModel; - paramLabel.visible = paramsModel.length > 0; - paramScroll.visible = paramsModel.length > 0; - modalTransactionDialog.height = (paramsModel.length > 0 ? 500 : 300); + paramScroll.updateView() } function acceptAndClose() @@ -213,16 +177,16 @@ Dialog { item.functionId = transactionDialog.functionId; } - item.isContractCreation = trType.checked; + item.isContractCreation = trTypeCreate.checked; if (item.isContractCreation) item.functionId = item.contractId; - item.isFunctionCall = item.functionId !== " - "; + item.isFunctionCall = trTypeExecute.checked if (!item.isContractCreation) { - item.contractId = recipients.currentText; - item.label = item.contractId + " " + item.functionId; - if (recipients.current().type === "address") + item.contractId = recipientsAccount.currentValue(); + item.label = contractFromToken(item.contractId) + "." + item.functionId + "()"; + if (recipientsAccount.current().type === "address") { item.functionId = ""; item.isFunctionCall = false; @@ -230,8 +194,9 @@ Dialog { } else { + item.isFunctionCall = true item.functionId = item.contractId; - item.label = qsTr("Deploy") + " " + item.contractId; + item.label = item.contractId + "." + item.contractId + "()"; } item.saveStatus = saveStatus item.sender = senderComboBox.model[senderComboBox.currentIndex].secret; @@ -246,269 +211,392 @@ Dialog { return token; } + function load(isContractCreation, isFunctionCall, functionId, contractId) + { + if (!isContractCreation) + { + contractCreationComboBox.visible = false + recipientsAccount.visible = true + recipientsAccount.accounts = senderComboBox.model; + amountLabel.text = qsTr("Amount") + if (!isFunctionCall) + recipientsAccount.subType = "address" + else + recipientsAccount.subType = "contract"; + recipientsAccount.load(); + recipientsAccount.init(); + if (contractId) + recipientsAccount.select(contractId); + if (functionId) + selectFunction(functionId); + if (isFunctionCall) + { + labelRecipient.text = qsTr("Recipient Contract") + functionRect.show() + loadFunctions(contractFromToken(recipientsAccount.currentValue())) + loadParameters(); + paramScroll.updateView() + } + else + { + paramsModel = [] + paramScroll.updateView() + labelRecipient.text = qsTr("Recipient Account") + functionRect.hide() + } + } + else + { + //contract creation + contractsModel.clear(); + var contractIndex = -1; + var contracts = codeModel.contracts; + for (var c in contracts) { + contractsModel.append({ cid: c, text: contracts[c].contract.name }); + if (contracts[c].contract.name === contractId) + contractIndex = contractsModel.count - 1; + } + + if (contractIndex == -1 && contractsModel.count > 0) + contractIndex = 0; //@todo suggest unused contract + contractCreationComboBox.currentIndex = contractIndex; + contractCreationComboBox.visible = true + labelRecipient.text = qsTr("Contract") + amountLabel.text = qsTr("Endownment") + functionRect.hide() + recipientsAccount.visible = false + loadCtorParameters(contractCreationComboBox.currentValue()); + paramScroll.updateView() + } + } + contentItem: Rectangle { color: transactionDialogStyle.generic.backgroundColor + anchors.fill: parent ColumnLayout { - anchors.fill: parent - ColumnLayout { - anchors.fill: parent - anchors.margins: 10 - - ColumnLayout { - id: dialogContent - anchors.top: parent.top - spacing: 10 - RowLayout - { - id: rowSender - Layout.fillWidth: true - height: 150 - DefaultLabel { - Layout.preferredWidth: 75 - text: qsTr("Sender") - } - ComboBox { + width: modalTransactionDialog.width - 30 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 20 - function select(secret) - { - for (var i in model) - if (model[i].secret === secret) - { - currentIndex = i; - break; - } - } - - id: senderComboBox - Layout.preferredWidth: 350 - currentIndex: 0 - textRole: "name" - editable: false - } + RowLayout + { + Layout.fillWidth: true + Rectangle + { + Layout.preferredWidth: 150 + Label { + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + text: qsTr("Sender Account") } + } - RowLayout + ComboBox { + function select(secret) { - id: rowIsContract - Layout.fillWidth: true - height: 150 - CheckBox { - id: trType - onCheckedChanged: - { - init(); - } - - function init() + for (var i in model) + if (model[i].secret === secret) { - rowFunction.visible = !checked; - rowContract.visible = checked; - rowRecipient.visible = !checked; - paramLabel.visible = checked; - paramScroll.visible = checked; - functionComboBox.enabled = !checked; - if (checked) - loadCtorParameters(contractComboBox.currentValue()); + currentIndex = i; + break; } - - text: qsTr("is contract creation") - checked: true - } } + Layout.preferredWidth: 350 + id: senderComboBox + currentIndex: 0 + textRole: "name" + editable: false + } + } - RowLayout + RowLayout + { + Layout.fillWidth: true + Rectangle + { + Layout.preferredWidth: 150 + Layout.preferredHeight: 80 + color: "transparent" + Label { - id: rowRecipient - Layout.fillWidth: true - height: 150 - DefaultLabel { - Layout.preferredWidth: 75 - text: qsTr("Recipient") - } + anchors.verticalCenter: parent.verticalCenter + anchors.top: parent.top + anchors.right: parent.right + text: qsTr("Type of Transaction") + } + } - QAddressView - { - id: recipients - onIndexChanged: + Column + { + Layout.preferredWidth: 150 + Layout.preferredHeight: 90 + ExclusiveGroup { + id: rbbuttonList + onCurrentChanged: { + if (current) { - rowFunction.visible = current().type === "contract"; - paramLabel.visible = current().type === "contract"; - paramScroll.visible = current().type === "contract"; - if (!rowIsContract.checked) - loadFunctions(contractFromToken(recipients.currentValue())) + if (current.objectName === "trTypeSend") + { + recipientsAccount.visible = true + contractCreationComboBox.visible = false + modalTransactionDialog.load(false, false) + } + else if (current.objectName === "trTypeCreate") + { + contractCreationComboBox.visible = true + recipientsAccount.visible = false + modalTransactionDialog.load(true, true) + } + else if (current.objectName === "trTypeExecute") + { + recipientsAccount.visible = true + contractCreationComboBox.visible = false + modalTransactionDialog.load(false, true) + } } } } - RowLayout - { - id: rowContract - Layout.fillWidth: true - height: 150 - DefaultLabel { - Layout.preferredWidth: 75 - text: qsTr("Contract") - } - ComboBox { - id: contractComboBox - function currentValue() { - return (currentIndex >=0 && currentIndex < contractsModel.count) ? contractsModel.get(currentIndex).cid : ""; - } - Layout.preferredWidth: 350 - currentIndex: -1 - textRole: "text" - editable: false - model: ListModel { - id: contractsModel - } - onCurrentIndexChanged: { - loadCtorParameters(currentValue()); - } - } + RadioButton { + id: trTypeSend + objectName: "trTypeSend" + exclusiveGroup: rbbuttonList + height: 30 + text: qsTr("Send ether to account") + } - RowLayout - { - id: rowFunction - Layout.fillWidth: true - height: 150 - DefaultLabel { - Layout.preferredWidth: 75 - text: qsTr("Function") - } - ComboBox { - id: functionComboBox - Layout.preferredWidth: 350 - currentIndex: -1 - textRole: "text" - editable: false - model: ListModel { - id: functionsModel - } - onCurrentIndexChanged: { - loadParameters(); - } - } + RadioButton { + id: trTypeCreate + objectName: "trTypeCreate" + exclusiveGroup: rbbuttonList + height: 30 + text: qsTr("Create Contract") } - CommonSeparator - { - Layout.fillWidth: true + RadioButton { + id: trTypeExecute + objectName: "trTypeExecute" + exclusiveGroup: rbbuttonList + height: 30 + text: qsTr("Execute Contract") + } + } + } + + RowLayout + { + Layout.fillWidth: true + Rectangle + { + Layout.preferredWidth: 150 + Label { + id: labelRecipient + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + text: qsTr("Recipient Account") } + } - RowLayout + QAddressView + { + id: recipientsAccount + displayInput: false + onIndexChanged: { - id: rowValue - Layout.fillWidth: true - height: 150 - DefaultLabel { - Layout.preferredWidth: 75 - text: qsTr("Value") - } - Ether { - id: valueField - edit: true - displayFormattedValue: true - } + if (rbbuttonList.current.objectName === "trTypeExecute") + loadFunctions(contractFromToken(currentValue())) + } + } + + ComboBox { + id: contractCreationComboBox + function currentValue() { + return (currentIndex >=0 && currentIndex < contractsModel.count) ? contractsModel.get(currentIndex).cid : ""; + } + Layout.preferredWidth: 350 + currentIndex: -1 + textRole: "text" + editable: false + model: ListModel { + id: contractsModel } + onCurrentIndexChanged: { + loadCtorParameters(currentValue()); + } + } + } + + RowLayout + { + Layout.fillWidth: true + Rectangle + { + Layout.preferredWidth: 150 + id: functionRect - CommonSeparator + function hide() { - Layout.fillWidth: true + functionRect.visible = false + functionComboBox.visible = false } - RowLayout + function show() { - id: rowGas - Layout.fillWidth: true - height: 150 - DefaultLabel { - Layout.preferredWidth: 75 - text: qsTr("Gas") - } + functionRect.visible = true + functionComboBox.visible = true + } - DefaultTextField - { - property variant gasValue - onGasValueChanged: text = gasValue.value(); - onTextChanged: gasValue.setValue(text); - implicitWidth: 200 - enabled: !gasAutoCheck.checked - id: gasValueEdit; - } + Label { + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + text: qsTr("Function") + } + } - CheckBox - { - id: gasAutoCheck - checked: true - text: qsTr("Auto"); - } + ComboBox { + id: functionComboBox + Layout.preferredWidth: 350 + currentIndex: -1 + textRole: "text" + editable: false + model: ListModel { + id: functionsModel } + onCurrentIndexChanged: { + loadParameters(); + } + } + } - CommonSeparator + RowLayout + { + Layout.fillWidth: true + ScrollView + { + id: paramScroll + anchors.topMargin: 10 + Layout.fillWidth: true + + function updateView() { - Layout.fillWidth: true + paramScroll.height = paramsModel.length < 4 ? paramsModel.length * 20 : 145 + paramScroll.parent.Layout.preferredHeight = paramsModel.length < 4 ? paramsModel.length * 20 : 145 + paramScroll.visible = paramsModel.length !== 0 } - RowLayout + StructView { - id: rowGasPrice - Layout.fillWidth: true - height: 150 - DefaultLabel { - Layout.preferredWidth: 75 - text: qsTr("Gas Price") - } - Ether { - id: gasPriceField - edit: true - displayFormattedValue: true - } + id: typeLoader + Layout.preferredWidth: 500 + members: paramsModel; + accounts: senderComboBox.model + context: "parameter" } + } + } - CommonSeparator - { - Layout.fillWidth: true + RowLayout + { + Layout.fillWidth: true + Rectangle + { + Layout.preferredWidth: 150 + Label { + id: amountLabel + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + text: qsTr("Amount") } + } + + Ether { + id: valueField + edit: true + displayFormattedValue: true + } + } + + Rectangle + { + color: "#cccccc" + height: 1 + Layout.fillWidth: true + } + + Rectangle + { + width: parent.width + height: 20 + color: "transparent" + Label { + text: qsTr("Transaction fees") + anchors.horizontalCenter: parent.horizontalCenter + } + } - DefaultLabel { - id: paramLabel - text: qsTr("Parameters:") - Layout.preferredWidth: 75 + RowLayout + { + Layout.fillWidth: true + Rectangle + { + Layout.preferredWidth: 150 + Label { + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + text: qsTr("Gas") } + } - ScrollView + Row + { + DefaultTextField { - id: paramScroll - anchors.top: paramLabel.bottom - anchors.topMargin: 10 - Layout.fillWidth: true - Layout.fillHeight: true - StructView - { - id: typeLoader - Layout.preferredWidth: 150 - members: paramsModel; - accounts: senderComboBox.model - context: "parameter" - } + property variant gasValue + onGasValueChanged: text = gasValue.value(); + onTextChanged: gasValue.setValue(text); + implicitWidth: 200 + enabled: !gasAutoCheck.checked + id: gasValueEdit; } - CommonSeparator + CheckBox { - Layout.fillWidth: true - visible: paramsModel.length > 0 + id: gasAutoCheck + checked: true + text: qsTr("Auto"); } } } + RowLayout + { + Layout.fillWidth: true + Rectangle + { + Layout.preferredWidth: 150 + Label { + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + text: qsTr("Gas Price") + } + } + + Ether { + id: gasPriceField + edit: true + displayFormattedValue: true + } + } + + RowLayout { anchors.bottom: parent.bottom anchors.right: parent.right; Button { - text: qsTr("OK"); onClicked: { var invalid = InputValidator.validate(paramsModel, paramValues);