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
This commit is contained in:
Pascal Precht
Iuri Matias
parent
085f5901ac
commit
7c8aca0fbc
|
|
@ -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()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue