From 66467ff070b177e52f0ce60b452b1346fe7467e5 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Wed, 15 Jul 2020 15:38:03 -0400 Subject: [PATCH] fix: wallet ui errors Fixes # 472 --- ui/app/AppLayouts/Chat/ContactsColumn.qml | 13 +- ui/app/AppLayouts/Wallet/AssetsTab.qml | 4 +- ui/app/AppLayouts/Wallet/LeftTab.qml | 106 ++++++------- ui/app/AppLayouts/Wallet/WalletHeader.qml | 146 ++++++------------ .../Wallet/components/HeaderButton.qml | 56 +++++++ .../components/TokenSettingsModalContent.qml | 7 +- ui/app/img/diagonalArrow.svg | 3 - ui/app/img/send.svg | 3 + ui/nim-status-client.pro | 1 + ui/shared/ModalPopup.qml | 24 +-- ui/shared/StatusTabButton.qml | 1 + 11 files changed, 179 insertions(+), 185 deletions(-) create mode 100644 ui/app/AppLayouts/Wallet/components/HeaderButton.qml delete mode 100644 ui/app/img/diagonalArrow.svg create mode 100644 ui/app/img/send.svg diff --git a/ui/app/AppLayouts/Chat/ContactsColumn.qml b/ui/app/AppLayouts/Chat/ContactsColumn.qml index 83476778a6..33201a4ca7 100644 --- a/ui/app/AppLayouts/Chat/ContactsColumn.qml +++ b/ui/app/AppLayouts/Chat/ContactsColumn.qml @@ -16,13 +16,12 @@ Item { StyledText { id: title - x: 772 //% "Chat" text: qsTrId("chat") anchors.top: parent.top - anchors.topMargin: 17 - font.bold: true + anchors.topMargin: Style.current.padding anchors.horizontalCenter: parent.horizontalCenter + font.weight: Font.Bold font.pixelSize: 17 } @@ -40,8 +39,8 @@ Item { SearchBox { id: searchBox - anchors.top: parent.top - anchors.topMargin: 59 + anchors.top: title.bottom + anchors.topMargin: Style.current.padding anchors.right: addChat.left anchors.rightMargin: Style.current.padding anchors.left: parent.left @@ -52,8 +51,8 @@ Item { id: addChat anchors.right: parent.right anchors.rightMargin: Style.current.padding - anchors.top: parent.top - anchors.topMargin: 59 + anchors.top: title.bottom + anchors.topMargin: Style.current.padding } StackLayout { diff --git a/ui/app/AppLayouts/Wallet/AssetsTab.qml b/ui/app/AppLayouts/Wallet/AssetsTab.qml index b31650c048..ab8eea858a 100644 --- a/ui/app/AppLayouts/Wallet/AssetsTab.qml +++ b/ui/app/AppLayouts/Wallet/AssetsTab.qml @@ -49,7 +49,7 @@ Item { } StyledText { id: assetValue - text: value + text: value.toUpperCase() anchors.right: parent.right anchors.rightMargin: 0 font.pixelSize: 15 @@ -58,7 +58,7 @@ Item { StyledText { id: assetFiatValue color: Style.current.darkGrey - text: fiatValue + text: fiatValue.toUpperCase() anchors.right: parent.right anchors.rightMargin: 0 anchors.bottom: parent.bottom diff --git a/ui/app/AppLayouts/Wallet/LeftTab.qml b/ui/app/AppLayouts/Wallet/LeftTab.qml index a9cd17ecec..20859da412 100644 --- a/ui/app/AppLayouts/Wallet/LeftTab.qml +++ b/ui/app/AppLayouts/Wallet/LeftTab.qml @@ -17,75 +17,58 @@ Item { } id: walletInfoContainer - Rectangle { - id: walletInfoHeader - anchors.left: parent.left - anchors.leftMargin: 0 - anchors.right: parent.right - anchors.rightMargin: 0 - height: walletValueTextContainer.y + walletValueTextContainer.height + Style.current.padding - color: Style.current.background - z: 1 - border.width: 0 - StyledText { - id: title - x: 143 - y: 16 - //% "Wallet" - text: qsTrId("wallet") - anchors.top: parent.top - anchors.topMargin: Style.current.padding - anchors.horizontalCenter: parent.horizontalCenter - font.weight: Font.Bold - font.pixelSize: 17 + + StyledText { + id: title + //% "Wallet" + text: qsTrId("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: walletModel.totalFiatBalance + selectByMouse: true + cursorVisible: true + readOnly: true + anchors.left: parent.left + font.weight: Font.Medium + font.pixelSize: 30 } - Item { - id: walletValueTextContainer - x: 16 - y: 52 - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - anchors.top: title.bottom - anchors.topMargin: Style.current.padding - height: walletAmountValue.height + totalValue.height - - StyledTextEdit { - id: walletAmountValue - color: Style.current.textColor - text: walletModel.totalFiatBalance - selectByMouse: true - cursorVisible: true - readOnly: true - anchors.left: parent.left - anchors.leftMargin: 1 - font.weight: Font.Medium - font.pixelSize: 30 - } - - StyledText { - id: totalValue - color: Style.current.darkGrey - text: "Total value" - anchors.left: walletAmountValue.left - anchors.leftMargin: 0 - anchors.top: walletAmountValue.bottom - anchors.topMargin: 0 - font.weight: Font.Medium - font.pixelSize: 13 - } + StyledText { + id: totalValue + color: Style.current.darkGrey + text: "Total value" + anchors.left: walletAmountValue.left + anchors.top: walletAmountValue.bottom + font.weight: Font.Medium + font.pixelSize: 13 } AddAccount { - anchors.topMargin: 3 - anchors.top: walletValueTextContainer.top + anchors.top: parent.top anchors.right: parent.right - anchors.rightMargin: Style.current.padding - } } + Component { id: walletDelegate @@ -145,7 +128,7 @@ Item { } StyledText { id: walletBalance - text: balance + text: balance.toUpperCase() anchors.top: parent.top anchors.topMargin: Style.current.smallPadding anchors.right: parent.right @@ -166,7 +149,8 @@ Item { ListView { id: listView anchors.bottom: parent.bottom - anchors.top: walletInfoHeader.bottom + anchors.top: walletValueTextContainer.bottom + anchors.topMargin: Style.current.padding spacing: 5 anchors.right: parent.right anchors.left: parent.left diff --git a/ui/app/AppLayouts/Wallet/WalletHeader.qml b/ui/app/AppLayouts/Wallet/WalletHeader.qml index 68e8d9d185..1211cf4463 100644 --- a/ui/app/AppLayouts/Wallet/WalletHeader.qml +++ b/ui/app/AppLayouts/Wallet/WalletHeader.qml @@ -3,6 +3,7 @@ import QtQuick.Controls 2.13 import QtQuick.Layouts 1.13 import "../../../imports" import "../../../shared" +import "./components" Item { property var currentAccount: walletModel.currentAccount @@ -44,7 +45,7 @@ Item { StyledText { id: walletBalance - text: currentAccount.balance + text: currentAccount.balance.toUpperCase() anchors.left: separatorDot.right anchors.leftMargin: 8 anchors.verticalCenter: title.verticalCenter @@ -89,7 +90,7 @@ Item { Item { property int btnMargin: 8 - property int btnOuterMargin: 32 + property int btnOuterMargin: Style.current.bigPadding id: walletMenu width: sendBtn.width + receiveBtn.width + settingsBtn.width + walletMenu.btnOuterMargin * 2 @@ -98,114 +99,65 @@ Item { anchors.right: parent.right anchors.rightMargin: 16 - Item { + HeaderButton { id: sendBtn - width: sendImg.width + sendText.width + walletMenu.btnMargin - height: sendText.height - - SVGImage { - id: sendImg - width: 12 - height: 12 - fillMode: Image.PreserveAspectFit - source: "../../img/diagonalArrow.svg" - } - - StyledText { - id: sendText - text: "Send" - anchors.left: sendImg.right - anchors.leftMargin: walletMenu.btnMargin - font.pixelSize: 13 - color: Style.current.blue - } - MouseArea { - anchors.rightMargin: -Style.current.smallPadding - anchors.leftMargin: -Style.current.smallPadding - anchors.bottomMargin: -Style.current.smallPadding - anchors.topMargin: -Style.current.smallPadding - anchors.fill: parent - onClicked: sendModal.open() - cursorShape: Qt.PointingHandCursor + imageSource: "../../img/send.svg" + text: qsTr("Send") + onClicked: function () { + sendModal.open() } } - Item { + + HeaderButton { id: receiveBtn - width: receiveImg.width + receiveText.width + walletMenu.btnMargin + imageSource: "../../img/send.svg" + flipImage: true + text: qsTr("Receive") + onClicked: function () { + // Nothing for now + } anchors.left: sendBtn.right anchors.leftMargin: walletMenu.btnOuterMargin - - SVGImage { - id: receiveImg - width: 12 - height: 12 - fillMode: Image.PreserveAspectFit - source: "../../img/diagonalArrow.svg" - rotation: 180 - } - - StyledText { - id: receiveText - text: "Receive" - anchors.left: receiveImg.right - anchors.leftMargin: walletMenu.btnMargin - font.pixelSize: 13 - color: Style.current.blue - } } - Item { + + HeaderButton { id: settingsBtn + imageSource: "../../img/settings.svg" + flipImage: true + text: "" + onClicked: function () { + // FIXME the button is too much on the right, so the arrow can never align + let x = settingsBtn.x + settingsBtn.width / 2 - newSettingsMenu.width / 2 + newSettingsMenu.popup(x, settingsBtn.height) + } anchors.left: receiveBtn.right anchors.leftMargin: walletMenu.btnOuterMargin - width: settingsImg.width - height: settingsImg.height - SVGImage { - id: settingsImg - width: 18 - height: 18 - fillMode: Image.PreserveAspectFit - source: "../../img/settings.svg" - } - MouseArea { - anchors.rightMargin: -Style.current.smallPadding - anchors.leftMargin: -Style.current.smallPadding - anchors.bottomMargin: -Style.current.smallPadding - anchors.topMargin: -Style.current.smallPadding - anchors.fill: parent - acceptedButtons: Qt.LeftButton | Qt.RightButton - cursorShape: Qt.PointingHandCursor - onClicked: { - let x = settingsImg.x + settingsImg.width / 2 - newSettingsMenu.width / 2 - newSettingsMenu.popup(x, settingsImg.height + 10) + PopupMenu { + id: newSettingsMenu + width: 280 + Action { + //% "Account Settings" + text: qsTrId("account-settings") + icon.source: "../../img/walletIcon.svg" + onTriggered: { + accountSettingsModal.open() + } } - - PopupMenu { - id: newSettingsMenu - width: 280 - Action { - //% "Account Settings" - text: qsTrId("account-settings") - icon.source: "../../img/walletIcon.svg" - onTriggered: { - accountSettingsModal.open() - } + Action { + //% "Add/Remove Tokens" + text: qsTrId("add/remove-tokens") + icon.source: "../../img/add_remove_token.svg" + onTriggered: { + tokenSettingsModal.open() } - Action { - //% "Add/Remove Tokens" - text: qsTrId("add/remove-tokens") - icon.source: "../../img/add_remove_token.svg" - onTriggered: { - tokenSettingsModal.open() - } - } - Action { - //% "Set Currency" - text: qsTrId("set-currency") - icon.source: "../../img/set_currency.svg" - onTriggered: { - setCurrencyModal.open() - } + } + Action { + //% "Set Currency" + text: qsTrId("set-currency") + icon.source: "../../img/set_currency.svg" + onTriggered: { + setCurrencyModal.open() } } } diff --git a/ui/app/AppLayouts/Wallet/components/HeaderButton.qml b/ui/app/AppLayouts/Wallet/components/HeaderButton.qml new file mode 100644 index 0000000000..47efac1bdb --- /dev/null +++ b/ui/app/AppLayouts/Wallet/components/HeaderButton.qml @@ -0,0 +1,56 @@ +import QtQuick 2.13 +import "../../../../imports" +import "../../../../shared" + + +Rectangle { + property string text: "" + property url imageSource + property bool flipImage: false + property var onClicked: function () {} + + id: headerButton + width: buttonImage.width + buttonText.width + Style.current.smallPadding * 2 + + (text === "" ? 0 : walletMenu.btnMargin) + height: buttonText.height + Style.current.smallPadding * 2 + border.width: 0 + color: Style.current.transparent + radius: Style.current.radius + + SVGImage { + id: buttonImage + height: 18 + anchors.left: parent.left + anchors.leftMargin: Style.current.smallPadding + anchors.verticalCenter: parent.verticalCenter + fillMode: Image.PreserveAspectFit + source: imageSource + rotation: flipImage ? 180 : 0 + } + + StyledText { + id: buttonText + visible: !!headerButton.text + text: headerButton.text + anchors.left: buttonImage.right + anchors.leftMargin: walletMenu.btnMargin + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 13 + color: Style.current.blue + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + onEntered: { + parent.color = Style.current.border + } + onExited: { + parent.color = Style.current.transparent + } + onClicked: { + headerButton.onClicked() + } + cursorShape: Qt.PointingHandCursor + } +} diff --git a/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml b/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml index 4579e4235c..c0245837f1 100644 --- a/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml +++ b/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml @@ -17,13 +17,14 @@ Item { } ListView { + id: tokenListView + spacing: 0 + clip: true anchors.top: searchBox.bottom + anchors.topMargin: Style.current.smallPadding anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom - spacing: 0 - id: tokenListView - anchors.topMargin: Style.current.smallPadding model: Tokens {} ScrollBar.vertical: ScrollBar { active: true } diff --git a/ui/app/img/diagonalArrow.svg b/ui/app/img/diagonalArrow.svg deleted file mode 100644 index d0a8a71689..0000000000 --- a/ui/app/img/diagonalArrow.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/ui/app/img/send.svg b/ui/app/img/send.svg new file mode 100644 index 0000000000..422b4e7f02 --- /dev/null +++ b/ui/app/img/send.svg @@ -0,0 +1,3 @@ + + + diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 8a3fa0b9b7..fbcdd555df 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -74,6 +74,7 @@ DISTFILES += \ app/AppLayouts/Chat/ContactsColumn/ClosedEmptyView.qml \ app/AppLayouts/Chat/components/EmojiPopup.qml \ app/AppLayouts/Chat/components/InviteFriendsPopup.qml \ + app/AppLayouts/Wallet/components/HeaderButton.qml \ fonts/InterStatus/InterStatus-Black.otf \ fonts/InterStatus/InterStatus-BlackItalic.otf \ fonts/InterStatus/InterStatus-Bold.otf \ diff --git a/ui/shared/ModalPopup.qml b/ui/shared/ModalPopup.qml index af0dc08281..ebaeafe9d8 100644 --- a/ui/shared/ModalPopup.qml +++ b/ui/shared/ModalPopup.qml @@ -124,18 +124,18 @@ Popup { } Item { - id: footerContent - visible: !!children[0] - height: children[0] && children[0].height - width: parent.width - anchors.top: separator2.bottom - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.topMargin: Style.current.padding - anchors.bottomMargin: Style.current.padding - anchors.rightMargin: Style.current.padding - anchors.leftMargin: Style.current.padding + id: footerContent + visible: !!children[0] + height: children[0] && children[0].height + width: parent.width + anchors.top: separator2.bottom + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.topMargin: Style.current.padding + anchors.bottomMargin: Style.current.padding + anchors.rightMargin: Style.current.padding + anchors.leftMargin: Style.current.padding } } } diff --git a/ui/shared/StatusTabButton.qml b/ui/shared/StatusTabButton.qml index e4c66c60c8..7bbfa6576d 100644 --- a/ui/shared/StatusTabButton.qml +++ b/ui/shared/StatusTabButton.qml @@ -24,6 +24,7 @@ TabButton { } Rectangle { + visible: parent.checked color: Style.current.blue anchors.bottom: parent.bottom anchors.bottomMargin: 0