From d1b786811fd21aecbc069b9826a8b51d4832e33a Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Thu, 28 May 2020 10:32:58 -0400 Subject: [PATCH] feat: add TabButton and TabBar for the Wallet --- ui/app/AppLayouts/Wallet/WalletLayout.qml | 145 ++++++++++++---------- ui/imports/Theme.qml | 1 + ui/nim-status-client.pro | 1 + ui/shared/StatusTabButton.qml | 43 +++++++ ui/shared/qmldir | 1 + 5 files changed, 128 insertions(+), 63 deletions(-) create mode 100644 ui/shared/StatusTabButton.qml diff --git a/ui/app/AppLayouts/Wallet/WalletLayout.qml b/ui/app/AppLayouts/Wallet/WalletLayout.qml index d05cc2f1a4..2b2d74be4d 100644 --- a/ui/app/AppLayouts/Wallet/WalletLayout.qml +++ b/ui/app/AppLayouts/Wallet/WalletLayout.qml @@ -43,85 +43,104 @@ SplitView { 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 - } + Item { + id: element + Layout.fillHeight: true + Layout.fillWidth: true - Component { - id: assetViewDelegate - - Item { - id: element6 - height: 56 + TabBar { + id: walletTabBar anchors.right: parent.right - anchors.rightMargin: 0 + anchors.rightMargin: Theme.bigPadding anchors.left: parent.left - anchors.leftMargin: 0 + anchors.leftMargin: Theme.bigPadding + anchors.top: parent.top + anchors.topMargin: Theme.padding - Image { - id: assetInfoContainer - width: 36 - height: 36 - source: image - anchors.left: parent.left - anchors.leftMargin: Theme.padding - anchors.verticalCenter: parent.verticalCenter + StatusTabButton { + id: assetBtn + btnText: "Assets" } - - Text { - id: assetValue - text: value - anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 14 - font.strikeout: false - anchors.left: parent.left - anchors.leftMargin: 72 + StatusTabButton { + id: collectiblesBtn + anchors.left: assetBtn.right + anchors.leftMargin: 32 + btnText: "Collectibles" } - 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 + StatusTabButton { + id: historyBtn + anchors.left: collectiblesBtn.right + anchors.leftMargin: 32 + btnText: "History" } } - } - ListView { - id: listView - anchors.topMargin: 36 - anchors.fill: parent - model: assetsModel.assets - delegate: assetViewDelegate + 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;formeditorColor:"#ffffff";formeditorZoom:0.8999999761581421;height:770;width:1152} -D{i:16;anchors_x:0;anchors_y:0} + D{i:0;autoSize:true;formeditorColor:"#ffffff";height:770;width:1152} } ##^##*/ diff --git a/ui/imports/Theme.qml b/ui/imports/Theme.qml index 1e83fee3ec..133f38cb6f 100644 --- a/ui/imports/Theme.qml +++ b/ui/imports/Theme.qml @@ -15,6 +15,7 @@ QtObject { readonly property color darkBlue: "#3c55c9" readonly property color darkBlueBtn: "#5a70dd" + readonly property int bigPadding: 24 readonly property int padding: 16 readonly property int smallPadding: 10 readonly property int radius: 8 diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index f4865ce82a..9f553c9e15 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -112,6 +112,7 @@ DISTFILES += \ onboarding/qmldir \ shared/PopupMenu.qml \ shared/Separator.qml \ + shared/StatusTabButton.qml \ shared/StyledButton.qml \ shared/RoundedIcon.qml \ shared/qmldir diff --git a/ui/shared/StatusTabButton.qml b/ui/shared/StatusTabButton.qml new file mode 100644 index 0000000000..7ef5b3f0e8 --- /dev/null +++ b/ui/shared/StatusTabButton.qml @@ -0,0 +1,43 @@ +import QtQuick 2.3 +import QtQuick.Controls 2.3 +import "../imports" + +TabButton { + property string btnText: "Default Button" + + id: tabButton + width: tabBtnText.width + height: tabBtnText.height + 11 + text: "" + padding: 0 + background: Rectangle { + color: Theme.transparent + border.color: Theme.transparent + } + + Text { + id: tabBtnText + text: btnText + font.weight: Font.Medium + font.pixelSize: 15 + color: parent.checked ? Theme.black : Theme.darkGrey + } + + Rectangle { + color: Theme.blue + anchors.bottom: parent.bottom + anchors.bottomMargin: 0 + anchors.right: parent.right + anchors.rightMargin: 4 + anchors.left: parent.left + anchors.leftMargin: 4 + height: 3 + radius: 4 + } +} + +/*##^## +Designer { + D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.75} +} +##^##*/ diff --git a/ui/shared/qmldir b/ui/shared/qmldir index 4790eca0b3..1358a1fd7f 100644 --- a/ui/shared/qmldir +++ b/ui/shared/qmldir @@ -2,3 +2,4 @@ StyledButton 1.0 StyledButton.qml RoundedIcon 1.0 RoundedIcon.qml PopupMenu 1.0 PopupMenu.qml Separator 1.0 Separator.qml +StatusTabButton 1.0 StatusTabButton.qml