From fe1a4db07853ac81930b820ce96531be9f584763 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Wed, 13 May 2020 15:41:16 -0400 Subject: [PATCH] feat: add Wallet tab bar --- ui/app/AppLayouts/WalletLayout.qml | 187 ++++++++++++++++++++++++++++- ui/app/img/diagonalArrow.svg | 3 + ui/app/img/diagonalArrowDown.svg | 3 + ui/app/img/list.svg | 3 + ui/imports/Theme.qml | 4 +- ui/nim-status-client.pro | 1 + ui/shared/RoundedIcon.qml | 28 +++++ ui/shared/qmldir | 3 +- 8 files changed, 227 insertions(+), 5 deletions(-) create mode 100644 ui/app/img/diagonalArrow.svg create mode 100644 ui/app/img/diagonalArrowDown.svg create mode 100644 ui/app/img/list.svg create mode 100644 ui/shared/RoundedIcon.qml diff --git a/ui/app/AppLayouts/WalletLayout.qml b/ui/app/AppLayouts/WalletLayout.qml index 4cca7ec019..2483a8bd93 100644 --- a/ui/app/AppLayouts/WalletLayout.qml +++ b/ui/app/AppLayouts/WalletLayout.qml @@ -4,6 +4,7 @@ import QtQuick.Controls 2.3 import QtQuick.Layouts 1.3 import Qt.labs.platform 1.1 import "../../imports" +import "../../shared" SplitView { id: walletView @@ -81,6 +82,127 @@ SplitView { font.pixelSize: 30 } } + + TabBar { + id: walletScreenButtons + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + currentIndex: 0 + background: Rectangle { + color: "#00000000" + } + + TabButton { + id: sendTabButton + height: 56 + text: "" + anchors.bottom: depositTabButton.top + Layout.fillWidth: true + anchors.bottomMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + background: Rectangle { + color: parent.checked ? Theme.darkBlue : Theme.transparent + } + + Text { + id: element + color: "#ffffff" + text: qsTr("Send") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Bold + font.pixelSize: 14 + } + + + RoundedIcon { + anchors.left: parent.left + anchors.leftMargin: 18 + imgPath: "../img/diagonalArrow.svg" + anchors.verticalCenter: parent.verticalCenter + size: 36 + bg: "#19ffffff" + } + } + TabButton { + id: depositTabButton + height: 56 + text: "" + anchors.bottom: txHistoryTabButton.top + anchors.bottomMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + background: Rectangle { + color: parent.checked ? Theme.darkBlue : Theme.transparent + } + + Text { + id: element2 + color: "#ffffff" + text: qsTr("Deposit") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Bold + font.pixelSize: 14 + } + + + RoundedIcon { + anchors.left: parent.left + anchors.leftMargin: 18 + imgPath: "../img/diagonalArrowDown.svg" + anchors.verticalCenter: parent.verticalCenter + size: 36 + bg: "#19ffffff" + } + } + TabButton { + id: txHistoryTabButton + height: 56 + text: "" + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + background: Rectangle { + color: parent.checked ? Theme.darkBlue : Theme.transparent + } + + Text { + id: element3 + color: "#ffffff" + text: qsTr("Transaction History") + anchors.left: parent.left + anchors.leftMargin: 72 + anchors.verticalCenter: parent.verticalCenter + font.weight: Font.Bold + font.pixelSize: 14 + } + + + RoundedIcon { + anchors.left: parent.left + anchors.leftMargin: 18 + imgPath: "../img/list.svg" + anchors.verticalCenter: parent.verticalCenter + size: 36 + bg: "#19ffffff" + } + } + } } } @@ -100,12 +222,71 @@ SplitView { } } - ColumnLayout { - id: walletSendContainer + StackLayout { + id: walletContainer + currentIndex: walletScreenButtons.currentIndex + + Item { + id: sendContainer + width: 200 + height: 200 + Layout.fillHeight: true + Layout.fillWidth: true + + Text { + id: element1 + text: qsTr("Send") + anchors.left: parent.left + anchors.leftMargin: 24 + anchors.top: parent.top + anchors.topMargin: 24 + font.weight: Font.Bold + font.pixelSize: 20 + } + } + + Item { + id: depositContainer + width: 200 + height: 200 + Layout.fillWidth: true + Layout.fillHeight: true + + Text { + id: element4 + text: qsTr("Deposit") + font.weight: Font.Bold + anchors.topMargin: 24 + anchors.leftMargin: 24 + font.pixelSize: 20 + anchors.left: parent.left + anchors.top: parent.top + } + } + + Item { + id: txHistoryContainer + width: 200 + height: 200 + Layout.fillWidth: true + Layout.fillHeight: true + Text { + id: element5 + text: qsTr("Transaction History") + font.weight: Font.Bold + anchors.topMargin: 24 + anchors.leftMargin: 24 + font.pixelSize: 20 + anchors.left: parent.left + anchors.top: parent.top + } + } + } } /*##^## Designer { - D{i:0;autoSize:true;height:770;width:1152}D{i:4;anchors_x:140;anchors_y:93} + D{i:0;autoSize:true;formeditorZoom:0.75;height:770;width:1152}D{i:4;anchors_x:140;anchors_y:93} +D{i:8;anchors_width:240} } ##^##*/ diff --git a/ui/app/img/diagonalArrow.svg b/ui/app/img/diagonalArrow.svg new file mode 100644 index 0000000000..468ed6435e --- /dev/null +++ b/ui/app/img/diagonalArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/img/diagonalArrowDown.svg b/ui/app/img/diagonalArrowDown.svg new file mode 100644 index 0000000000..7bf9d0b787 --- /dev/null +++ b/ui/app/img/diagonalArrowDown.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/app/img/list.svg b/ui/app/img/list.svg new file mode 100644 index 0000000000..4451d9842e --- /dev/null +++ b/ui/app/img/list.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/imports/Theme.qml b/ui/imports/Theme.qml index e53e259014..8f552ff8cf 100644 --- a/ui/imports/Theme.qml +++ b/ui/imports/Theme.qml @@ -6,9 +6,11 @@ QtObject { readonly property color grey: "#EEF2F5" readonly property color lightBlue: "#ECEFFC" readonly property color blue: "#4360DF" - readonly property color transparent: "#ffffff" + readonly property color transparent: "#00000000" readonly property color darkGrey: "#939BA1" readonly property color lightBlueText: "#8f9fec" + readonly property color darkBlue: "#3c55c9" + readonly property color darkBlueBtn: "#5a70dd" readonly property int padding: 16 readonly property int smallPadding: 10 diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 1fbed30500..c387159a3e 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -80,4 +80,5 @@ DISTFILES += \ onboarding/img/wallet@3x.jpg \ onboarding/qmldir \ shared/Image.qml \ + shared/RoundedIcon.qml \ shared/qmldir diff --git a/ui/shared/RoundedIcon.qml b/ui/shared/RoundedIcon.qml new file mode 100644 index 0000000000..5005572716 --- /dev/null +++ b/ui/shared/RoundedIcon.qml @@ -0,0 +1,28 @@ +import QtQuick 2.0 +import "../imports" + +Rectangle { + property int size: 36 + property color bg: Theme.blue + property url imgPath: "" + + width: size + height: size + color: bg + radius: 50 + + Image { + width: 12 + height: 12 + anchors.horizontalCenter: parent.horizontalCenter + anchors.verticalCenter: parent.verticalCenter + fillMode: Image.PreserveAspectFit + source: imgPath + } +} + +/*##^## +Designer { + D{i:0;formeditorZoom:1.75} +} +##^##*/ diff --git a/ui/shared/qmldir b/ui/shared/qmldir index 1048c10e9d..3806766ced 100644 --- a/ui/shared/qmldir +++ b/ui/shared/qmldir @@ -1 +1,2 @@ -Image 1.0 Image.qml \ No newline at end of file +Image 1.0 Image.qml +RoundedIcon 1.0 RoundedIcon.qml