From 024843b8b8527fe4919bd10230bbc6d8040e858c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Mon, 18 Jul 2022 12:39:31 +0200 Subject: [PATCH] fix(Wallet/LeftTabView): style fixes Align the Wallet left section navigation bar to the design Fixes #6479 Fixes #6480 - simplify using layouts - fix margins/spacing - fix font sizes and weights --- .../AppLayouts/Wallet/views/LeftTabView.qml | 210 +++++++++--------- 1 file changed, 101 insertions(+), 109 deletions(-) diff --git a/ui/app/AppLayouts/Wallet/views/LeftTabView.qml b/ui/app/AppLayouts/Wallet/views/LeftTabView.qml index 46f7639798..864007a984 100644 --- a/ui/app/AppLayouts/Wallet/views/LeftTabView.qml +++ b/ui/app/AppLayouts/Wallet/views/LeftTabView.qml @@ -17,140 +17,132 @@ import "../popups" import "../stores" Rectangle { - id: walletInfoContainer + id: root property var changeSelectedAccount: function(){} property var showSavedAddresses: function(showSavedAddresses){} property var emojiPopup: null function onAfterAddAccount () { - walletInfoContainer.changeSelectedAccount(RootStore.accounts.rowCount() - 1) + root.changeSelectedAccount(RootStore.accounts.rowCount() - 1) } color: Style.current.secondaryMenuBackground - StyledText { - id: title - text: qsTr("Wallet") - anchors.top: parent.top - anchors.topMargin: Style.current.padding - anchors.horizontalCenter: parent.horizontalCenter - font.weight: Font.Bold - font.pixelSize: 17 - } - - Item { - id: walletValueTextContainer - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - anchors.right: parent.right - anchors.rightMargin: Style.current.padding - anchors.top: title.bottom - anchors.topMargin: Style.current.padding - height: childrenRect.height - - StyledTextEdit { - id: walletAmountValue - color: Style.current.textColor - text: { - Utils.toLocaleString(parseFloat(RootStore.totalCurrencyBalance).toFixed(2), localAppSettings.locale, {"currency": true}) + " " + RootStore.currentCurrency.toUpperCase() - } - selectByMouse: true - cursorVisible: true - readOnly: true - anchors.left: parent.left - font.weight: Font.Medium - font.pixelSize: 30 - } - - StyledText { - id: totalValue - color: Style.current.secondaryText - text: qsTr("Total value") - anchors.left: walletAmountValue.left - anchors.top: walletAmountValue.bottom - font.weight: Font.Medium - font.pixelSize: 13 - } - } - AddAccountModal { id: addAccountModal anchors.centerIn: parent - onAfterAddAccount: walletInfoContainer.onAfterAddAccount() - emojiPopup: walletInfoContainer.emojiPopup + onAfterAddAccount: root.onAfterAddAccount() + emojiPopup: root.emojiPopup } - ScrollView { - anchors.bottom: parent.bottom - anchors.bottomMargin: btnSavedAddresses.height + Style.current.padding - anchors.top: walletValueTextContainer.bottom - anchors.topMargin: Style.current.padding - anchors.horizontalCenter: parent.horizontalCenter - width: 272 - ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - ScrollBar.vertical.policy: listView.contentHeight > listView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff - clip: true + ColumnLayout { + anchors.fill: parent + anchors.margins: Style.current.padding + anchors.bottomMargin: Style.current.smallPadding + spacing: Style.current.padding - ListView { - id: listView + StyledText { + Layout.fillWidth: true + text: qsTr("Wallet") + font.weight: Font.Bold + font.pixelSize: 17 + } - spacing: 5 - anchors.top: parent.top - width: parent.width - height: parent.height - boundsBehavior: Flickable.StopAtBounds + Item { + height: childrenRect.height + Layout.fillWidth: true + + StyledTextEdit { + id: walletAmountValue + color: Style.current.textColor + text: { + Utils.toLocaleString(parseFloat(RootStore.totalCurrencyBalance).toFixed(2), localAppSettings.locale, {"currency": true}) + " " + RootStore.currentCurrency.toUpperCase() + } + selectByMouse: true + cursorVisible: true + readOnly: true + width: parent.width + font.weight: Font.Medium + font.pixelSize: 22 + } + + StyledText { + id: totalValue + color: Style.current.secondaryText + text: qsTr("Total value") + width: parent.width + anchors.top: walletAmountValue.bottom + anchors.topMargin: 4 + font.pixelSize: 12 + } + } + + ScrollView { + Layout.fillWidth: true + Layout.topMargin: Style.current.halfPadding + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: listView.contentHeight > listView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff clip: true - delegate: StatusListItem { - width: parent.width - highlighted: RootStore.currentAccount.name === model.name - title: model.name - subTitle: Utils.toLocaleString(model.currencyBalance.toFixed(2), RootStore.locale, {"model.currency": true}) + " " + RootStore.currentCurrency.toUpperCase() - icon.emoji: !!model.emoji ? model.emoji: "" - icon.color: model.color - icon.name: !model.emoji ? "filled-account": "" - icon.letterSize: 14 - icon.isLetterIdenticon: !!model.emoji ? true : false - icon.background.color: Theme.palette.primaryColor3 - onClicked: { - changeSelectedAccount(index) - showSavedAddresses(false) - } - } + ListView { + id: listView - footer: Item { + spacing: Style.current.smallPadding + anchors.top: parent.top width: parent.width - height: addAccountBtn.height + Style.current.xlPadding - StatusButton { - id: addAccountBtn - anchors.top: parent.top - anchors.horizontalCenter: parent.horizontalCenter - anchors.margins: Style.current.bigPadding - text: qsTr("Add account") - onClicked: addAccountModal.open() - } - } + height: parent.height + boundsBehavior: Flickable.StopAtBounds + clip: true - model: RootStore.accounts -// model: RootStore.exampleWalletModel + delegate: StatusListItem { + width: ListView.view.width + highlighted: RootStore.currentAccount.name === model.name + title: model.name + subTitle: Utils.toLocaleString(model.currencyBalance.toFixed(2), RootStore.locale, {"model.currency": true}) + " " + RootStore.currentCurrency.toUpperCase() + icon.emoji: !!model.emoji ? model.emoji: "" + icon.color: model.color + icon.name: !model.emoji ? "filled-account": "" + icon.letterSize: 14 + icon.isLetterIdenticon: !!model.emoji ? true : false + icon.background.color: Theme.palette.primaryColor3 + statusListItemTitle.font.weight: Font.Medium + onClicked: { + changeSelectedAccount(index) + showSavedAddresses(false) + } + } + + footer: Item { + width: ListView.view.width + height: addAccountBtn.height + Style.current.xlPadding + StatusButton { + id: addAccountBtn + anchors.top: parent.top + anchors.horizontalCenter: parent.horizontalCenter + anchors.margins: Style.current.bigPadding + text: qsTr("Add account") + onClicked: addAccountModal.open() + } + } + + model: RootStore.accounts + // model: RootStore.exampleWalletModel + } } - } - StatusNavigationListItem { - id: btnSavedAddresses + Item { Layout.fillHeight: true } - anchors.bottom: parent.bottom - anchors.bottomMargin: Style.current.halfPadding - anchors.left: parent.left - anchors.leftMargin: Style.current.smallPadding - anchors.right: parent.right - anchors.rightMargin: Style.current.smallPadding - - title: qsTr("Saved addresses") - icon.name: "address" - onClicked: { - showSavedAddresses(true) + StatusButton { + size: StatusBaseButton.Size.Small + topPadding: Style.current.halfPadding + bottomPadding: Style.current.halfPadding + normalColor: "transparent" + hoverColor: Theme.palette.primaryColor3 + font.weight: Font.Medium + text: qsTr("Saved addresses") + icon.name: "address" + onClicked: showSavedAddresses(true) } } }