fix(@desktop/wallet): Token selector in the send modal doesn't look like design and overflows window
fixes #6499
This commit is contained in:
parent
43de90e80e
commit
39cf2f3fac
|
@ -48,7 +48,7 @@ let NETWORKS* = %* [
|
||||||
"chainName": "Ropsten",
|
"chainName": "Ropsten",
|
||||||
"rpcUrl": "https://ropsten.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
"rpcUrl": "https://ropsten.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
||||||
"blockExplorerUrl": "https://ropsten.etherscan.io/",
|
"blockExplorerUrl": "https://ropsten.etherscan.io/",
|
||||||
"iconUrl": "network/Network=Tetnet",
|
"iconUrl": "network/Network=Testnet",
|
||||||
"chainColor": "#939BA1",
|
"chainColor": "#939BA1",
|
||||||
"shortName": "ropEth",
|
"shortName": "ropEth",
|
||||||
"nativeCurrencyName": "Ether",
|
"nativeCurrencyName": "Ether",
|
||||||
|
@ -63,7 +63,7 @@ let NETWORKS* = %* [
|
||||||
"chainName": "Rinkeby",
|
"chainName": "Rinkeby",
|
||||||
"rpcUrl": "https://rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
"rpcUrl": "https://rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
||||||
"blockExplorerUrl": "https://rinkeby.etherscan.io/",
|
"blockExplorerUrl": "https://rinkeby.etherscan.io/",
|
||||||
"iconUrl": "network/Network=Tetnet",
|
"iconUrl": "network/Network=Testnet",
|
||||||
"chainColor": "#939BA1",
|
"chainColor": "#939BA1",
|
||||||
"shortName": "rinEth",
|
"shortName": "rinEth",
|
||||||
"nativeCurrencyName": "Ether",
|
"nativeCurrencyName": "Ether",
|
||||||
|
@ -78,7 +78,7 @@ let NETWORKS* = %* [
|
||||||
"chainName": "Goerli",
|
"chainName": "Goerli",
|
||||||
"rpcUrl": "https://goerli.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
"rpcUrl": "https://goerli.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
||||||
"blockExplorerUrl": "https://goerli.etherscan.io/",
|
"blockExplorerUrl": "https://goerli.etherscan.io/",
|
||||||
"iconUrl": "network/Network=Tetnet",
|
"iconUrl": "network/Network=Testnet",
|
||||||
"chainColor": "#939BA1",
|
"chainColor": "#939BA1",
|
||||||
"shortName": "goeEth",
|
"shortName": "goeEth",
|
||||||
"nativeCurrencyName": "Ether",
|
"nativeCurrencyName": "Ether",
|
||||||
|
@ -108,7 +108,7 @@ let NETWORKS* = %* [
|
||||||
"chainName": "Optimism Kovan",
|
"chainName": "Optimism Kovan",
|
||||||
"rpcUrl": "https://optimism-kovan.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
"rpcUrl": "https://optimism-kovan.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
||||||
"blockExplorerUrl": "https://kovan-optimistic.etherscan.io",
|
"blockExplorerUrl": "https://kovan-optimistic.etherscan.io",
|
||||||
"iconUrl": "network/Network=Tetnet",
|
"iconUrl": "network/Network=Testnet",
|
||||||
"chainColor": "#939BA1",
|
"chainColor": "#939BA1",
|
||||||
"shortName": "kovOpt",
|
"shortName": "kovOpt",
|
||||||
"nativeCurrencyName": "Ether",
|
"nativeCurrencyName": "Ether",
|
||||||
|
@ -138,7 +138,7 @@ let NETWORKS* = %* [
|
||||||
"chainName": "Arbitrum Rinkeby",
|
"chainName": "Arbitrum Rinkeby",
|
||||||
"rpcUrl": "https://arbitrum-rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
"rpcUrl": "https://arbitrum-rinkeby.infura.io/v3/" & INFURA_TOKEN_RESOLVED,
|
||||||
"blockExplorerUrl": " https://testnet.arbiscan.io",
|
"blockExplorerUrl": " https://testnet.arbiscan.io",
|
||||||
"iconUrl": "network/Network=Tetnet",
|
"iconUrl": "network/Network=Testnet",
|
||||||
"chainColor": "#939BA1",
|
"chainColor": "#939BA1",
|
||||||
"shortName": "rinArb",
|
"shortName": "rinArb",
|
||||||
"nativeCurrencyName": "Ether",
|
"nativeCurrencyName": "Ether",
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit 26eaeb3ad5d538e3d2601ef5d5b6062094e9db3b
|
Subproject commit dbc0c1960a478bb740167275e76f56d2bef41d15
|
|
@ -127,8 +127,9 @@ StatusModal {
|
||||||
id: multiChainList
|
id: multiChainList
|
||||||
property bool need2Columns: RootStore.enabledNetworks.count >= 9
|
property bool need2Columns: RootStore.enabledNetworks.count >= 9
|
||||||
|
|
||||||
anchors.centerIn: parent
|
anchors.left: need2Columns ? undefined: qrCodeBox.right
|
||||||
anchors.horizontalCenterOffset: need2Columns ? 0 : qrCodeBox.width/2 + Style.current.xlPadding + Style.current.halfPadding
|
anchors.leftMargin: need2Columns ?undefined : Style.current.halfPadding
|
||||||
|
anchors.centerIn: need2Columns ? parent : undefined
|
||||||
height: qrCodeBox.height
|
height: qrCodeBox.height
|
||||||
|
|
||||||
columnSpacing: need2Columns ? qrCodeBox.width + Style.current.bigPadding : 0
|
columnSpacing: need2Columns ? qrCodeBox.width + Style.current.bigPadding : 0
|
||||||
|
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
@ -5,8 +5,8 @@ import QtGraphicalEffects 1.13
|
||||||
|
|
||||||
import utils 1.0
|
import utils 1.0
|
||||||
import shared.stores 1.0
|
import shared.stores 1.0
|
||||||
|
import shared.panels 1.0
|
||||||
|
|
||||||
import StatusQ.Controls 0.1
|
|
||||||
|
|
||||||
import "../"
|
import "../"
|
||||||
import "../panels"
|
import "../panels"
|
||||||
|
@ -161,9 +161,8 @@ Item {
|
||||||
|
|
||||||
StatusAssetSelector {
|
StatusAssetSelector {
|
||||||
id: selectAsset
|
id: selectAsset
|
||||||
height: 28
|
|
||||||
anchors.top: inputAmount.top
|
anchors.top: inputAmount.top
|
||||||
anchors.topMargin: Style.current.bigPadding + 14
|
anchors.topMargin: 28
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
anchors.rightMargin: Style.current.smallPadding
|
anchors.rightMargin: Style.current.smallPadding
|
||||||
defaultToken: Style.png("tokens/DEFAULT-TOKEN@3x")
|
defaultToken: Style.png("tokens/DEFAULT-TOKEN@3x")
|
||||||
|
|
|
@ -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()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -18,3 +18,4 @@ SVGImage 1.0 SVGImage.qml
|
||||||
TextWithLabel 1.0 TextWithLabel.qml
|
TextWithLabel 1.0 TextWithLabel.qml
|
||||||
EditCroppedImagePanel 1.0 EditCroppedImagePanel.qml
|
EditCroppedImagePanel 1.0 EditCroppedImagePanel.qml
|
||||||
NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml
|
NoImageUploadedPanel 1.0 NoImageUploadedPanel.qml
|
||||||
|
StatusAssetSelector 1.0 StatusAssetSelector.qml
|
||||||
|
|
|
@ -7,8 +7,8 @@ import StatusQ.Controls.Validators 0.1
|
||||||
|
|
||||||
import utils 1.0
|
import utils 1.0
|
||||||
import shared.stores 1.0
|
import shared.stores 1.0
|
||||||
|
import shared.panels 1.0
|
||||||
|
|
||||||
import StatusQ.Controls 0.1
|
|
||||||
import StatusQ.Popups 0.1
|
import StatusQ.Popups 0.1
|
||||||
import StatusQ.Components 0.1
|
import StatusQ.Components 0.1
|
||||||
import StatusQ.Core 0.1
|
import StatusQ.Core 0.1
|
||||||
|
@ -130,6 +130,7 @@ StatusModal {
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.leftMargin: Style.current.xlPadding
|
anchors.leftMargin: Style.current.xlPadding
|
||||||
anchors.rightMargin: Style.current.xlPadding
|
anchors.rightMargin: Style.current.xlPadding
|
||||||
|
z: 1
|
||||||
|
|
||||||
RowLayout {
|
RowLayout {
|
||||||
spacing: 16
|
spacing: 16
|
||||||
|
@ -270,6 +271,7 @@ StatusModal {
|
||||||
anchors.top: border.bottom
|
anchors.top: border.bottom
|
||||||
anchors.topMargin: Style.current.halfPadding
|
anchors.topMargin: Style.current.halfPadding
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
|
z: 0
|
||||||
|
|
||||||
ColumnLayout {
|
ColumnLayout {
|
||||||
width: scrollView.availableWidth
|
width: scrollView.availableWidth
|
||||||
|
@ -418,8 +420,10 @@ StatusModal {
|
||||||
|
|
||||||
TransactionSigner {
|
TransactionSigner {
|
||||||
id: transactionSigner
|
id: transactionSigner
|
||||||
Layout.topMargin: Style.current.smallPadding
|
anchors.left: parent.left
|
||||||
width: stack.width
|
anchors.right: parent.right
|
||||||
|
anchors.topMargin: Style.current.smallPadding
|
||||||
|
anchors.margins: 32
|
||||||
signingPhrase: popup.store.signingPhrase
|
signingPhrase: popup.store.signingPhrase
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue