From cd522ba803ac331c5f302df21d6c8b3988a63d37 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Thu, 14 May 2020 12:16:01 -0400 Subject: [PATCH] feat: split left tab to its own file and move them to Wallet dir --- ui/app/AppLayouts/Wallet/LeftTab.qml | 291 +++++++++++++++++ ui/app/AppLayouts/Wallet/WalletLayout.qml | 100 ++++++ ui/app/AppLayouts/Wallet/qmldir | 1 + ui/app/AppLayouts/WalletLayout.qml | 377 ---------------------- ui/app/AppLayouts/qmldir | 2 +- ui/nim-status-client.pro | 3 + 6 files changed, 396 insertions(+), 378 deletions(-) create mode 100644 ui/app/AppLayouts/Wallet/LeftTab.qml create mode 100644 ui/app/AppLayouts/Wallet/WalletLayout.qml create mode 100644 ui/app/AppLayouts/Wallet/qmldir delete mode 100644 ui/app/AppLayouts/WalletLayout.qml diff --git a/ui/app/AppLayouts/Wallet/LeftTab.qml b/ui/app/AppLayouts/Wallet/LeftTab.qml new file mode 100644 index 0000000000..1ef1179ba3 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/LeftTab.qml @@ -0,0 +1,291 @@ +import QtQuick 2.3 +import QtQuick.Controls 1.3 +import QtQuick.Controls 2.3 +import QtQuick.Layouts 1.3 +import Qt.labs.platform 1.1 +import "../../../imports" +import "../../../shared" + +ColumnLayout { + readonly property int w: 340 + property alias currentTab: walletScreenButtons.currentIndex + + id: walletInfoContainer + width: w + spacing: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.top: parent.top + anchors.topMargin: 0 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + + RowLayout { + id: walletHeader + height: 375 + Layout.fillWidth: true + width: walletInfoContainer.w + + Rectangle { + id: walletHeaderContent + color: Theme.blue + height: 375 + Layout.fillWidth: true + + Item { + id: walletValueTextContainer + x: 140 + width: 175 + height: 40 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: parent.top + anchors.topMargin: 110 + + Text { + id: tild + color: Theme.lightBlueText + text: qsTr("~") + font.weight: Font.Medium + font.pixelSize: 30 + } + + TextEdit { + id: walletAmountValue + color: "#ffffff" + text: qsTr("408.30") + selectByMouse: true + cursorVisible: true + readOnly: true + anchors.left: tild.right + anchors.leftMargin: 1 + font.weight: Font.Medium + font.pixelSize: 30 + } + + Text { + id: currencyText + color: Theme.lightBlueText + text: qsTr("USD") + anchors.left: walletAmountValue.right + anchors.leftMargin: 5 + font.weight: Font.Medium + font.pixelSize: 30 + } + } + + TabBar { + readonly property int btnHeight: 56 + + id: walletScreenButtons + width: walletInfoContainer.w + height: btnHeight*3 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + currentIndex: 0 + spacing: 0 + background: Rectangle { + color: "#00000000" + } + + TabButton { + id: sendTabButton + width: walletInfoContainer.w + height: walletScreenButtons.btnHeight + text: "" + anchors.top: parent.top + anchors.topMargin: 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 + width: walletInfoContainer.w + height: walletScreenButtons.btnHeight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.topMargin: 0 + anchors.top: sendTabButton.bottom + 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 + width: walletInfoContainer.w + height: walletScreenButtons.btnHeight + text: "" + anchors.left: parent.left + anchors.leftMargin: 0 + anchors.topMargin: 0 + anchors.top: depositTabButton.bottom + 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" + } + } + } + } + } + + RowLayout { + id: assetInfoContainer + width: 100 + height: 100 + + Rectangle { + id: walletSendBg + width: 200 + height: 200 + color: "#ffffff" + Layout.fillHeight: true + Layout.fillWidth: true + + 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 + } + + Component { + id: assetViewDelegate + + Item { + id: element6 + height: 56 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + + Rectangle { + width: 36 + height: 36 + color: Theme.blue + radius: 50 + 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 + } + } + } + + // Delete this when we have a real model + ListModel { + id: exampleAssets + ListElement { + name: "Ethereum" + symbol: "ETH" + value: "0.4564234124124..." + fiatValue: "$268.30" + image: "" + } + } + + ListView { + id: listView + anchors.topMargin: 36 + anchors.fill: parent + // Change this to the real model + model: exampleAssets + delegate: assetViewDelegate + } + } + } +} diff --git a/ui/app/AppLayouts/Wallet/WalletLayout.qml b/ui/app/AppLayouts/Wallet/WalletLayout.qml new file mode 100644 index 0000000000..5bff9cbbfb --- /dev/null +++ b/ui/app/AppLayouts/Wallet/WalletLayout.qml @@ -0,0 +1,100 @@ +import QtQuick 2.3 +import QtQuick.Controls 1.3 +import QtQuick.Controls 2.3 +import QtQuick.Layouts 1.3 +import Qt.labs.platform 1.1 +import "../../../imports" +import "../../../shared" +import "." + +Item { + id: walletView + x: 0 + y: 0 + property alias walletContainerCurrentIndex: walletContainer.currentIndex + Layout.fillHeight: true + Layout.fillWidth: true + // Those anchors show a warning too, but whithout them, there is a gap on the right + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: parent.left + anchors.leftMargin: 0 + + LeftTab { + id: leftTab + } + + StackLayout { + id: walletContainer + anchors.top: parent.top + anchors.topMargin: 0 + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 0 + anchors.left: leftTab.right + anchors.leftMargin: 0 + currentIndex: leftTab.currentTab + + 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;formeditorZoom:0.75;height:770;width:1152} +} +##^##*/ diff --git a/ui/app/AppLayouts/Wallet/qmldir b/ui/app/AppLayouts/Wallet/qmldir new file mode 100644 index 0000000000..ce3b215312 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/qmldir @@ -0,0 +1 @@ +LeftTab 1.0 LeftTab.qml diff --git a/ui/app/AppLayouts/WalletLayout.qml b/ui/app/AppLayouts/WalletLayout.qml deleted file mode 100644 index d9dc779f8d..0000000000 --- a/ui/app/AppLayouts/WalletLayout.qml +++ /dev/null @@ -1,377 +0,0 @@ -import QtQuick 2.3 -import QtQuick.Controls 1.3 -import QtQuick.Controls 2.3 -import QtQuick.Layouts 1.3 -import Qt.labs.platform 1.1 -import "../../imports" -import "../../shared" - -Item { - id: walletView - x: 0 - y: 0 - Layout.fillHeight: true - Layout.fillWidth: true - // Those anchors show a warning too, but whithout them, there is a gap on the right - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - - ColumnLayout { - readonly property int w: 340 - - id: walletInfoContainer - width: w - spacing: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.top: parent.top - anchors.topMargin: 0 - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - - RowLayout { - id: walletHeader - height: 375 - Layout.fillWidth: true - width: walletInfoContainer.w - - Rectangle { - id: walletHeaderContent - color: Theme.blue - height: 375 - Layout.fillWidth: true - - Item { - id: walletValueTextContainer - x: 140 - width: 175 - height: 40 - anchors.horizontalCenter: parent.horizontalCenter - anchors.top: parent.top - anchors.topMargin: 110 - - Text { - id: tild - color: Theme.lightBlueText - text: qsTr("~") - font.weight: Font.Medium - font.pixelSize: 30 - } - - TextEdit { - id: walletAmountValue - color: "#ffffff" - text: qsTr("408.30") - selectByMouse: true - cursorVisible: true - readOnly: true - anchors.left: tild.right - anchors.leftMargin: 1 - font.weight: Font.Medium - font.pixelSize: 30 - } - - Text { - id: currencyText - color: Theme.lightBlueText - text: qsTr("USD") - anchors.left: walletAmountValue.right - anchors.leftMargin: 5 - font.weight: Font.Medium - font.pixelSize: 30 - } - } - - TabBar { - readonly property int btnHeight: 56 - - id: walletScreenButtons - width: walletInfoContainer.w - height: btnHeight*3 - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - currentIndex: 0 - spacing: 0 - background: Rectangle { - color: "#00000000" - } - - TabButton { - id: sendTabButton - width: walletInfoContainer.w - height: walletScreenButtons.btnHeight - text: "" - anchors.top: parent.top - anchors.topMargin: 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 - width: walletInfoContainer.w - height: walletScreenButtons.btnHeight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.topMargin: 0 - anchors.top: sendTabButton.bottom - 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 - width: walletInfoContainer.w - height: walletScreenButtons.btnHeight - text: "" - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.topMargin: 0 - anchors.top: depositTabButton.bottom - 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" - } - } - } - } - } - - RowLayout { - id: assetInfoContainer - width: 100 - height: 100 - - Rectangle { - id: walletSendBg - width: 200 - height: 200 - color: "#ffffff" - Layout.fillHeight: true - Layout.fillWidth: true - - 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 - } - - Component { - id: assetViewDelegate - - Item { - id: element6 - height: 56 - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: parent.left - anchors.leftMargin: 0 - - Rectangle { - width: 36 - height: 36 - color: Theme.blue - radius: 50 - 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 - } - } - } - - // Delete this when we have a real model - ListModel { - id: exampleAssets - ListElement { - name: "Ethereum" - symbol: "ETH" - value: "0.4564234124124..." - fiatValue: "$268.30" - image: "" - } - } - - ListView { - id: listView - anchors.topMargin: 36 - anchors.fill: parent - // Change this to the real model - model: exampleAssets - delegate: assetViewDelegate - } - } - } - } - - StackLayout { - id: walletContainer - anchors.top: parent.top - anchors.topMargin: 0 - anchors.bottom: parent.bottom - anchors.bottomMargin: 0 - anchors.right: parent.right - anchors.rightMargin: 0 - anchors.left: walletInfoContainer.right - anchors.leftMargin: 0 - 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;formeditorZoom:0.75;height:770;width:1152}D{i:10;anchors_width:340} -} -##^##*/ diff --git a/ui/app/AppLayouts/qmldir b/ui/app/AppLayouts/qmldir index 4413a4e619..d7c2f3fc83 100644 --- a/ui/app/AppLayouts/qmldir +++ b/ui/app/AppLayouts/qmldir @@ -1,2 +1,2 @@ ChatLayout 1.0 ChatLayout.qml -WalletLayout 1.0 WalletLayout.qml +WalletLayout 1.0 Wallet/WalletLayout.qml diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index aebab0ae24..2017a07b84 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -50,6 +50,9 @@ DISTFILES += \ Inter-V.otf \ Theme.qml \ app/AppLayouts/ChatLayout.qml \ + app/AppLayouts/Wallet/LeftTab.qml \ + app/AppLayouts/Wallet/WalletLayout.qml \ + app/AppLayouts/Wallet/qmldir \ app/AppLayouts/WalletLayout.qml \ app/AppLayouts/qmldir \ app/AppMain.qml \