From 39cf2f3fac90e8913a1b4dafcf5d6725b9d9da36 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Thu, 21 Jul 2022 10:40:49 +0200 Subject: [PATCH] fix(@desktop/wallet): Token selector in the send modal doesn't look like design and overflows window fixes #6499 --- src/app_service/common/network_constants.nim | 12 +- ui/StatusQ | 2 +- .../AppLayouts/Wallet/popups/ReceiveModal.qml | 5 +- ...etwork=Unknown.svg => Network=Testnet.svg} | 0 ...etwork=Unknown.svg => Network=Testnet.svg} | 0 .../shared/controls/AssetAndAmountInput.qml | 5 +- .../shared/panels/StatusAssetSelector.qml | 171 ++++++++++++++++++ ui/imports/shared/panels/qmldir | 3 +- ui/imports/shared/popups/SendModal.qml | 10 +- 9 files changed, 192 insertions(+), 16 deletions(-) rename ui/imports/assets/icons/network/{Network=Unknown.svg => Network=Testnet.svg} (100%) rename ui/imports/assets/icons/tiny/network/{Network=Unknown.svg => Network=Testnet.svg} (100%) create mode 100644 ui/imports/shared/panels/StatusAssetSelector.qml diff --git a/src/app_service/common/network_constants.nim b/src/app_service/common/network_constants.nim index 60ed906c45..9d59571f3f 100644 --- a/src/app_service/common/network_constants.nim +++ b/src/app_service/common/network_constants.nim @@ -48,7 +48,7 @@ let NETWORKS* = %* [ "chainName": "Ropsten", "rpcUrl": "https://ropsten.infura.io/v3/" & INFURA_TOKEN_RESOLVED, "blockExplorerUrl": "https://ropsten.etherscan.io/", - "iconUrl": "network/Network=Tetnet", + "iconUrl": "network/Network=Testnet", "chainColor": "#939BA1", "shortName": "ropEth", "nativeCurrencyName": "Ether", @@ -63,7 +63,7 @@ let NETWORKS* = %* [ "chainName": "Rinkeby", "rpcUrl": "https://rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED, "blockExplorerUrl": "https://rinkeby.etherscan.io/", - "iconUrl": "network/Network=Tetnet", + "iconUrl": "network/Network=Testnet", "chainColor": "#939BA1", "shortName": "rinEth", "nativeCurrencyName": "Ether", @@ -78,7 +78,7 @@ let NETWORKS* = %* [ "chainName": "Goerli", "rpcUrl": "https://goerli.infura.io/v3/" & INFURA_TOKEN_RESOLVED, "blockExplorerUrl": "https://goerli.etherscan.io/", - "iconUrl": "network/Network=Tetnet", + "iconUrl": "network/Network=Testnet", "chainColor": "#939BA1", "shortName": "goeEth", "nativeCurrencyName": "Ether", @@ -108,7 +108,7 @@ let NETWORKS* = %* [ "chainName": "Optimism Kovan", "rpcUrl": "https://optimism-kovan.infura.io/v3/" & INFURA_TOKEN_RESOLVED, "blockExplorerUrl": "https://kovan-optimistic.etherscan.io", - "iconUrl": "network/Network=Tetnet", + "iconUrl": "network/Network=Testnet", "chainColor": "#939BA1", "shortName": "kovOpt", "nativeCurrencyName": "Ether", @@ -138,7 +138,7 @@ let NETWORKS* = %* [ "chainName": "Arbitrum Rinkeby", "rpcUrl": "https://arbitrum-rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED, "blockExplorerUrl": " https://testnet.arbiscan.io", - "iconUrl": "network/Network=Tetnet", + "iconUrl": "network/Network=Testnet", "chainColor": "#939BA1", "shortName": "rinArb", "nativeCurrencyName": "Ether", @@ -240,4 +240,4 @@ var NODE_CONFIG* = %* { "DataDir": DEFAULT_TORRENT_CONFIG_DATADIR, "TorrentDir": DEFAULT_TORRENT_CONFIG_TORRENTDIR } -} \ No newline at end of file +} diff --git a/ui/StatusQ b/ui/StatusQ index 26eaeb3ad5..dbc0c1960a 160000 --- a/ui/StatusQ +++ b/ui/StatusQ @@ -1 +1 @@ -Subproject commit 26eaeb3ad5d538e3d2601ef5d5b6062094e9db3b +Subproject commit dbc0c1960a478bb740167275e76f56d2bef41d15 diff --git a/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml b/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml index 4f3ee3257e..2f367fcab2 100644 --- a/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml +++ b/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml @@ -127,8 +127,9 @@ StatusModal { id: multiChainList property bool need2Columns: RootStore.enabledNetworks.count >= 9 - anchors.centerIn: parent - anchors.horizontalCenterOffset: need2Columns ? 0 : qrCodeBox.width/2 + Style.current.xlPadding + Style.current.halfPadding + anchors.left: need2Columns ? undefined: qrCodeBox.right + anchors.leftMargin: need2Columns ?undefined : Style.current.halfPadding + anchors.centerIn: need2Columns ? parent : undefined height: qrCodeBox.height columnSpacing: need2Columns ? qrCodeBox.width + Style.current.bigPadding : 0 diff --git a/ui/imports/assets/icons/network/Network=Unknown.svg b/ui/imports/assets/icons/network/Network=Testnet.svg similarity index 100% rename from ui/imports/assets/icons/network/Network=Unknown.svg rename to ui/imports/assets/icons/network/Network=Testnet.svg diff --git a/ui/imports/assets/icons/tiny/network/Network=Unknown.svg b/ui/imports/assets/icons/tiny/network/Network=Testnet.svg similarity index 100% rename from ui/imports/assets/icons/tiny/network/Network=Unknown.svg rename to ui/imports/assets/icons/tiny/network/Network=Testnet.svg diff --git a/ui/imports/shared/controls/AssetAndAmountInput.qml b/ui/imports/shared/controls/AssetAndAmountInput.qml index a7ac776799..1fcdddce6c 100644 --- a/ui/imports/shared/controls/AssetAndAmountInput.qml +++ b/ui/imports/shared/controls/AssetAndAmountInput.qml @@ -5,8 +5,8 @@ import QtGraphicalEffects 1.13 import utils 1.0 import shared.stores 1.0 +import shared.panels 1.0 -import StatusQ.Controls 0.1 import "../" import "../panels" @@ -161,9 +161,8 @@ Item { StatusAssetSelector { id: selectAsset - height: 28 anchors.top: inputAmount.top - anchors.topMargin: Style.current.bigPadding + 14 + anchors.topMargin: 28 anchors.right: parent.right anchors.rightMargin: Style.current.smallPadding defaultToken: Style.png("tokens/DEFAULT-TOKEN@3x") diff --git a/ui/imports/shared/panels/StatusAssetSelector.qml b/ui/imports/shared/panels/StatusAssetSelector.qml new file mode 100644 index 0000000000..4e481495c8 --- /dev/null +++ b/ui/imports/shared/panels/StatusAssetSelector.qml @@ -0,0 +1,171 @@ +import QtQuick 2.13 +import QtQuick.Controls 2.13 +import QtQuick.Layouts 1.13 + +import utils 1.0 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Core.Utils 0.1 +import StatusQ.Controls 0.1 +import StatusQ.Components 0.1 + +Item { + id: root + property var assets + property var selectedAsset + property string defaultToken + property string userSelectedToken + property var tokenAssetSourceFn: function (symbol) { + return "" + } + // Define this in the usage to get balance in currency selected by user + property var getCurrencyBalanceString: function (currencyBalance) { return "" } + implicitWidth: select.width + implicitHeight: 48 + + function resetInternal() { + assets = null + selectedAsset = null + } + + onSelectedAssetChanged: { + if (selectedAsset && selectedAsset.symbol) { + iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase()) + selectedTextField.text = selectedAsset.symbol.toUpperCase() + } + } + + StatusSelect { + id: select + width: visualRect.width + model: root.assets + caretVisible: false + caretRightMargin: 0 + bgColor: Style.current.transparent + bgColorHover: Theme.palette.directColor8 + select.radius: 16 + select.height: root.height + selectMenu.width: 342 + selectMenu.height: 416 + selectedItemComponent: Rectangle { + id: visualRect + width: row.width + Style.current.padding + height: parent.height + color: Style.current.transparent + border.width: 1 + border.color: Theme.palette.directColor8 + radius: 16 + Row { + id: row + anchors.left: parent.left + anchors.verticalCenter: parent.verticalCenter + anchors.margins: Style.current.halfPadding + spacing: Style.current.halfPadding + StatusBaseText { + id: selectedTextField + anchors.verticalCenter: parent.verticalCenter + font.pixelSize: 15 + width: Math.min(50, implicitWidth) + elide: Text.ElideRight + verticalAlignment: Text.AlignVCenter + color: Theme.palette.directColor1 + font.weight: Font.Medium + } + StatusRoundedImage { + id: iconImg + width: 40 + height: 40 + image.onStatusChanged: { + if (iconImg.image.status === Image.Error) { + iconImg.image.source = defaultToken + } + } + } + } + } + selectMenu.delegate: menuItem + } + + Component { + id: menuItem + MenuItem { + id: itemContainer + property bool isFirstItem: index === 0 + property bool isLastItem: index === assets.rowCount() - 1 + + width: parent.width + height: 72 + contentItem: Item { + anchors.fill: parent + StatusRoundedImage { + id: iconImg + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.verticalCenter: parent.verticalCenter + image.source: root.tokenAssetSourceFn(symbol.toUpperCase()) + image.onStatusChanged: { + if (iconImg.image.status === Image.Error) { + iconImg.image.source = defaultToken + } + } + } + Column { + anchors.left: iconImg.right + anchors.leftMargin: 12 + anchors.verticalCenter: parent.verticalCenter + + StatusBaseText { + text: symbol.toUpperCase() + font.pixelSize: 15 + color: Theme.palette.directColor1 + } + + StatusBaseText { + text: name + color: Theme.palette.baseColor1 + font.pixelSize: 15 + } + } + Column { + anchors.right: parent.right + anchors.rightMargin: 16 + anchors.verticalCenter: parent.verticalCenter + StatusBaseText { + font.pixelSize: 15 + text: parseFloat(totalBalance).toFixed(4) + " " + symbol + } + StatusBaseText { + font.pixelSize: 15 + anchors.right: parent.right + text: getCurrencyBalanceString(totalCurrencyBalance) + color: Theme.palette.baseColor1 + } + } + } + background: Rectangle { + color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor + } + Component.onCompleted: { + if(userSelectedToken === "") { + if(index === 0) { + selectedAsset = model + } + } else { + if(symbol === userSelectedToken) { + selectedAsset = model + } + } + } + MouseArea { + cursorShape: Qt.PointingHandCursor + anchors.fill: itemContainer + onClicked: { + userSelectedToken = symbol + selectedAsset = model + select.selectMenu.close() + } + } + } + } +} diff --git a/ui/imports/shared/panels/qmldir b/ui/imports/shared/panels/qmldir index 06c7e89db6..ce47ce796f 100644 --- a/ui/imports/shared/panels/qmldir +++ b/ui/imports/shared/panels/qmldir @@ -17,4 +17,5 @@ StyledText 1.0 StyledText.qml SVGImage 1.0 SVGImage.qml TextWithLabel 1.0 TextWithLabel.qml EditCroppedImagePanel 1.0 EditCroppedImagePanel.qml -NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml \ No newline at end of file +NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml +StatusAssetSelector 1.0 StatusAssetSelector.qml diff --git a/ui/imports/shared/popups/SendModal.qml b/ui/imports/shared/popups/SendModal.qml index b1e7a85429..16fffa39e8 100644 --- a/ui/imports/shared/popups/SendModal.qml +++ b/ui/imports/shared/popups/SendModal.qml @@ -7,8 +7,8 @@ import StatusQ.Controls.Validators 0.1 import utils 1.0 import shared.stores 1.0 +import shared.panels 1.0 -import StatusQ.Controls 0.1 import StatusQ.Popups 0.1 import StatusQ.Components 0.1 import StatusQ.Core 0.1 @@ -130,6 +130,7 @@ StatusModal { anchors.left: parent.left anchors.leftMargin: Style.current.xlPadding anchors.rightMargin: Style.current.xlPadding + z: 1 RowLayout { spacing: 16 @@ -270,6 +271,7 @@ StatusModal { anchors.top: border.bottom anchors.topMargin: Style.current.halfPadding anchors.left: parent.left + z: 0 ColumnLayout { width: scrollView.availableWidth @@ -418,8 +420,10 @@ StatusModal { TransactionSigner { id: transactionSigner - Layout.topMargin: Style.current.smallPadding - width: stack.width + anchors.left: parent.left + anchors.right: parent.right + anchors.topMargin: Style.current.smallPadding + anchors.margins: 32 signingPhrase: popup.store.signingPhrase } }