From 7c8aca0fbc67458a7b3e97c085994edc907420b3 Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Tue, 12 Jan 2021 15:30:01 +0100 Subject: [PATCH] uiux(Wallet): improve asset manager usability and UI This commit does a couple of things: - It changes a label in the wallet menu from "Add/remove Token" to "Manage Assets" as it has been designed - It changes the asset list so a hover state could be introduced. Previously there was no visual effect or response to mouse hover on asset items - It improves usability of the asset list by making an entire asset item clickable to toggle the asset in the wallet. This was not possible before. Users had to click the checkbox achieve this effect Closes #1631 --- .../AppLayouts/Wallet/TokenSettingsModal.qml | 15 ++++-- ui/app/AppLayouts/Wallet/WalletHeader.qml | 3 +- .../components/TokenSettingsModalContent.qml | 48 +++++++++++++------ 3 files changed, 44 insertions(+), 22 deletions(-) diff --git a/ui/app/AppLayouts/Wallet/TokenSettingsModal.qml b/ui/app/AppLayouts/Wallet/TokenSettingsModal.qml index 7562027ecc..adfc3bb3c0 100644 --- a/ui/app/AppLayouts/Wallet/TokenSettingsModal.qml +++ b/ui/app/AppLayouts/Wallet/TokenSettingsModal.qml @@ -2,23 +2,28 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import "../../../imports" import "../../../shared" +import "../../../shared/status" import "./components" ModalPopup { id: popup - //% "Add/Remove Tokens" - title: qsTrId("add/remove-tokens") + title: qsTr("Manage Assets") TokenSettingsModalContent { id: settingsModalContent + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.top: parent.top + anchors.leftMargin: Style.current.padding + anchors.rightMargin: Style.current.padding } - footer: StyledButton { + footer: StatusButton { anchors.right: parent.right - anchors.rightMargin: Style.current.padding //% "Add custom token" - label: qsTrId("add-custom-token") + text: qsTrId("add-custom-token") anchors.top: parent.top onClicked: addCustomTokenModal.openEditable() } diff --git a/ui/app/AppLayouts/Wallet/WalletHeader.qml b/ui/app/AppLayouts/Wallet/WalletHeader.qml index 7f5e703182..c687060860 100644 --- a/ui/app/AppLayouts/Wallet/WalletHeader.qml +++ b/ui/app/AppLayouts/Wallet/WalletHeader.qml @@ -148,8 +148,7 @@ Item { } } Action { - //% "Add/Remove Tokens" - text: qsTrId("add/remove-tokens") + text: qsTr("Manage Assets") icon.source: "../../img/add_remove_token.svg" icon.width: 16 icon.height: 16 diff --git a/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml b/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml index f2f39f3d65..8fe4b5523e 100644 --- a/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml +++ b/ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml @@ -10,7 +10,6 @@ import "../data/" Item { id: modalBody - anchors.fill: parent SearchBox { id: searchBox @@ -21,25 +20,26 @@ Item { Component { id: tokenComponent - Item { + Rectangle { id: tokenContainer - anchors.left: parent.left - anchors.leftMargin: Style.current.smallPadding - width: 300 + property bool hovered: false + width: modalBody.width + anchors.topMargin: Style.current.smallPadding + color: hovered ? Style.current.backgroundHover : "transparent" property bool isVisible: symbol && (searchBox.text == "" || name.toLowerCase().includes(searchBox.text.toLowerCase()) || symbol.toLowerCase().includes(searchBox.text.toLowerCase())) visible: isVisible height: isVisible ? 40 + Style.current.smallPadding : 0 + radius: Style.current.radius Image { id: assetInfoImage width: 36 height: tokenContainer.isVisible !== "" ? 36 : 0 - anchors.top: parent.top - anchors.topMargin: 0 source: hasIcon ? "../../../img/tokens/" + symbol + ".png" : "../../../img/tokens/0-native.png" anchors.left: parent.left - anchors.leftMargin: 0 + anchors.leftMargin: Style.current.smallPadding + anchors.verticalCenter: parent.verticalCenter } StyledText { id: assetSymbol @@ -53,26 +53,40 @@ Item { StyledText { id: assetFullTokenName text: name || "" - anchors.bottom: assetInfoImage.bottom - anchors.bottomMargin: 0 + anchors.top: assetSymbol.bottom + anchors.topMargin: 0 anchors.left: assetInfoImage.right anchors.leftMargin: Style.current.smallPadding color: Style.current.darkGrey font.pixelSize: 15 - width: 330 } StatusCheckBox { id: assetCheck checked: walletModel.hasAsset("0x123", symbol) - anchors.left: assetFullTokenName.right - anchors.leftMargin: Style.current.smallPadding + anchors.right: parent.right + anchors.rightMargin: Style.current.smallPadding onClicked: walletModel.toggleAsset(symbol) + anchors.verticalCenter: parent.verticalCenter } MouseArea { - acceptedButtons: Qt.RightButton + acceptedButtons: Qt.LeftButton | Qt.RightButton + cursorShape: Qt.PointingHandCursor anchors.fill: parent - onClicked: contextMenu.popup(assetSymbol.x - 100, assetSymbol.y + 25) + hoverEnabled: true + onClicked: function (event) { + if (event.button === Qt.RightButton) { + return contextMenu.popup(assetSymbol.x - 100, assetSymbol.y + 25) + } + assetCheck.checked = !assetCheck.checked + walletModel.toggleAsset(symbol) + } + onEntered: { + tokenContainer.hovered = true + } + onExited: { + tokenContainer.hovered = false + } PopupMenu { id: contextMenu Action { @@ -115,6 +129,7 @@ Item { Column { id: customTokens + spacing: Style.current.halfPadding StyledText { id: customLbl @@ -145,6 +160,7 @@ Item { anchors.top: customTokens.bottom anchors.topMargin: Style.current.smallPadding id: defaultTokens + spacing: Style.current.halfPadding StyledText { id: defaultLbl @@ -160,6 +176,8 @@ Item { delegate: tokenComponent anchors.top: defaultLbl.bottom anchors.topMargin: Style.current.smallPadding + anchors.left: parent.left + anchors.right: parent.right } } }