diff --git a/ui/app/AppLayouts/Wallet/SendModal.qml b/ui/app/AppLayouts/Wallet/SendModal.qml new file mode 100644 index 0000000000..33512202db --- /dev/null +++ b/ui/app/AppLayouts/Wallet/SendModal.qml @@ -0,0 +1,76 @@ +import QtQuick 2.3 +import QtQuick.Controls 2.3 +import QtQuick.Layouts 1.3 +import Qt.labs.platform 1.1 +import "../../../imports" +import "../../../shared" + +Item { + TextField { + id: txtValue + x: 19 + y: 41 + placeholderText: qsTr("Enter ETH") + anchors.leftMargin: 24 + anchors.topMargin: 32 + width: 239 + height: 40 + } + + TextField { + id: txtFrom + x: 340 + y: 41 + width: 239 + height: 40 + text: assetsModel.getDefaultAccount() + placeholderText: qsTr("Send from (account)") + anchors.topMargin: 32 + anchors.leftMargin: 24 + } + + TextField { + id: txtTo + x: 340 + y: 99 + width: 239 + height: 40 + text: assetsModel.getDefaultAccount() + placeholderText: qsTr("Send to") + anchors.topMargin: 32 + anchors.leftMargin: 24 + } + + TextField { + id: txtPassword + x: 19 + y: 99 + width: 239 + height: 40 + text: "qwerty" + placeholderText: "Enter Password" + anchors.topMargin: 32 + anchors.leftMargin: 24 + } + + Button { + x: 19 + y: 159 + text: "Send" + onClicked: { + let result = assetsModel.onSendTransaction( + txtFrom.text, + txtTo.text, + txtValue.text, + txtPassword.text + ); + console.log(result); + } + } +} + +/*##^## +Designer { + D{i:0;autoSize:true;height:480;width:640} +} +##^##*/ diff --git a/ui/app/AppLayouts/Wallet/WalletLayout.qml b/ui/app/AppLayouts/Wallet/WalletLayout.qml index 5f1fc64c9b..417a84da8b 100644 --- a/ui/app/AppLayouts/Wallet/WalletLayout.qml +++ b/ui/app/AppLayouts/Wallet/WalletLayout.qml @@ -30,160 +30,220 @@ SplitView { anchors.leftMargin: 0 Item { - id: walletInfoContainer + id: walletHeader + height: walletAddress.y + walletAddress.height + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: parent.top + anchors.topMargin: 0 Layout.fillHeight: true Layout.fillWidth: true - TextField { - id: txtValue - x: 19 - y: 41 - placeholderText: qsTr("Enter ETH") + Text { + id: title + // TODO this should be the name of the wallet + text: qsTr("Status account") + anchors.top: parent.top + anchors.topMargin: 56 + anchors.left: parent.left anchors.leftMargin: 24 - anchors.topMargin: 32 - width: 239 - height: 40 + font.weight: Font.Medium + font.pixelSize: 28 } - TextField { - id: txtFrom - x: 340 - y: 41 - width: 239 - height: 40 - text: assetsModel.getDefaultAccount() - placeholderText: qsTr("Send from (account)") - anchors.topMargin: 32 - anchors.leftMargin: 24 + Rectangle { + id: separatorDot + width: 8 + height: 8 + color: Theme.blue + anchors.top: title.verticalCenter + anchors.topMargin: -3 + anchors.left: title.right + anchors.leftMargin: 8 + radius: 50 } - TextField { - id: txtTo - x: 340 - y: 99 - width: 239 - height: 40 - text: assetsModel.getDefaultAccount() - placeholderText: qsTr("Send to") - anchors.topMargin: 32 - anchors.leftMargin: 24 + Text { + id: walletBalance + // TODO this should be the balance + text: qsTr("12.00 USD") + anchors.left: separatorDot.right + anchors.leftMargin: 8 + anchors.verticalCenter: title.verticalCenter + font.pixelSize: 22 } - TextField { - id: txtPassword - x: 19 - y: 99 - width: 239 - height: 40 - text: "qwerty" - placeholderText: "Enter Password" - anchors.topMargin: 32 - anchors.leftMargin: 24 + Text { + id: walletAddress + // TODO this should be the address and an actual Address component that can shrink and expend + text: qsTr("0X2Ef1...E0Ba") + anchors.top: title.bottom + anchors.topMargin: 0 + anchors.left: title.left + anchors.leftMargin: 0 + font.pixelSize: 13 + color: Theme.darkGrey } - Button { - x: 19 - y: 159 - text: "Send" - onClicked: { - let result = assetsModel.onSendTransaction( - txtFrom.text, - txtTo.text, - txtValue.text, - txtPassword.text - ); - console.log(result); - } - } + Item { + property int btnMargin: 8 + property int btnOuterMargin: 32 + id: walletMenu + // TODO unhardcode this + width: sendBtn.width + receiveBtn.width + settingsBtn.width + + walletMenu.btnOuterMargin * 2 + anchors.top: parent.top + anchors.topMargin: 16 + anchors.right: parent.right + anchors.rightMargin: 16 - RowLayout { - id: assetInfoContainer - Layout.fillHeight: true - Layout.fillWidth: true + Item { + id: sendBtn + width: sendImg.width + sendText.width + walletMenu.btnMargin - Rectangle { - id: walletSendBg - color: "#ffffff" - Layout.fillHeight: true - Layout.fillWidth: true + Image { + id: sendImg + width: 12 + height: 12 + fillMode: Image.PreserveAspectFit + source: "../../img/diagonalArrow.svg" + } Text { - id: assetsTitle - color: Theme.darkGrey - text: qsTr("Assets") - anchors.left: parent.left - anchors.leftMargin: Theme.padding - anchors.top: parent.top - anchors.topMargin: Theme.smallPadding - font.pixelSize: 14 + id: sendText + text: "Send" + anchors.left: sendImg.right + anchors.leftMargin: walletMenu.btnMargin + font.pixelSize: 13 + color: Theme.blue + } + } + Item { + id: receiveBtn + width: receiveImg.width + receiveText.width + walletMenu.btnMargin + anchors.left: sendBtn.right + anchors.leftMargin: walletMenu.btnOuterMargin + + Image { + id: receiveImg + width: 12 + height: 12 + fillMode: Image.PreserveAspectFit + source: "../../img/diagonalArrow.svg" } - Component { - id: assetViewDelegate - - Item { - id: element6 - height: 56 - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - - Image { - id: assetInfoContainer - width: 36 - height: 36 - source: image - anchors.left: parent.left - anchors.leftMargin: Theme.padding - anchors.verticalCenter: parent.verticalCenter - } - - Text { - id: assetValue - text: value - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 14 - font.strikeout: false - anchors.left: parent.left - anchors.leftMargin: 72 - } - Text { - id: assetSymbol - text: symbol - anchors.verticalCenter: parent.verticalCenter - color: Theme.darkGrey - font.pixelSize: 14 - anchors.right: assetFiatValue.left - anchors.rightMargin: 10 - } - Text { - id: assetFiatValue - color: Theme.darkGrey - text: fiatValue - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 14 - anchors.right: parent.right - anchors.rightMargin: Theme.padding - } - } - } - - ListView { - id: listView - anchors.topMargin: 36 - anchors.fill: parent - model: assetsModel.assets - delegate: assetViewDelegate + Text { + id: receiveText + text: "Receive" + anchors.left: receiveImg.right + anchors.leftMargin: walletMenu.btnMargin + font.pixelSize: 13 + color: Theme.blue } } + Image { + id: settingsBtn + anchors.left: receiveBtn.right + anchors.leftMargin: walletMenu.btnOuterMargin + width: 18 + height: 18 + fillMode: Image.PreserveAspectFit + source: "../../img/settings.svg" + } } } + RowLayout { + id: assetInfoContainer + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.top: walletHeader.bottom + anchors.topMargin: 23 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: assetsTitle + color: Theme.darkGrey + text: qsTr("Assets") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: Theme.smallPadding + font.pixelSize: 14 + } + + Component { + id: assetViewDelegate + + Item { + id: element6 + height: 56 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + + Image { + id: assetInfoContainer + width: 36 + height: 36 + source: image + anchors.left: parent.left + anchors.leftMargin: Theme.padding + anchors.verticalCenter: parent.verticalCenter + } + + Text { + id: assetValue + text: value + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 14 + font.strikeout: false + anchors.left: parent.left + anchors.leftMargin: 72 + } + Text { + id: assetSymbol + text: symbol + anchors.verticalCenter: parent.verticalCenter + color: Theme.darkGrey + font.pixelSize: 14 + anchors.right: assetFiatValue.left + anchors.rightMargin: 10 + } + Text { + id: assetFiatValue + color: Theme.darkGrey + text: fiatValue + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 14 + anchors.right: parent.right + anchors.rightMargin: Theme.padding + } + } + } + + ListView { + id: listView + anchors.topMargin: 36 + anchors.fill: parent + model: assetsModel.assets + delegate: assetViewDelegate + } + } } } /*##^## Designer { - D{i:0;autoSize:true;formeditorZoom:0.75;height:770;width:1152} + D{i:0;autoSize:true;formeditorColor:"#ffffff";formeditorZoom:0.8999999761581421;height:770;width:1152} +D{i:16;anchors_x:0;anchors_y:0} } ##^##*/ + diff --git a/ui/app/img/diagonalArrow.svg b/ui/app/img/diagonalArrow.svg index 468ed6435e..d0a8a71689 100644 --- a/ui/app/img/diagonalArrow.svg +++ b/ui/app/img/diagonalArrow.svg @@ -1,3 +1,3 @@ - + diff --git a/ui/app/img/diagonalArrowDown.svg b/ui/app/img/diagonalArrowDown.svg deleted file mode 100644 index 7bf9d0b787..0000000000 --- a/ui/app/img/diagonalArrowDown.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/app/img/settings.svg b/ui/app/img/settings.svg new file mode 100644 index 0000000000..9e74224db4 --- /dev/null +++ b/ui/app/img/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 07c40a79d6..25945726e9 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -61,6 +61,7 @@ DISTFILES += \ app/AppLayouts/Profile/LeftTab/qmldir \ app/AppLayouts/Profile/ProfileLayout.qml \ app/AppLayouts/Wallet/LeftTab.qml \ + app/AppLayouts/Wallet/SendModal.qml \ app/AppLayouts/Wallet/WalletLayout.qml \ app/AppLayouts/Wallet/qmldir \ app/AppLayouts/WalletLayout.qml \