status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(@desktop/wallet): Send dialog: sizing and layout rules to limit dialog height jumping between states 

fixes #13377
This commit is contained in:
Khushboo Mehta 2024-02-12 17:44:35 +01:00 committed by Khushboo-dev-cpp
parent dd166eb60c
commit eaef030bc8
8 changed files with 362 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
storybook/pages/TokenListViewPage.qml
View File

@ -42,6 +42,7 @@ SplitView {
anchors.centerIn: parent
width: 400
height: 600
assets: txStore.processedAssetsModel
collectibles: WalletNestedCollectiblesModel {}

489
ui/imports/shared/popups/send/SendModal.qml
View File

@ -148,10 +148,11 @@ StatusDialog {
}
}
width: 556
bottomPadding: 16
padding: 0
background: StatusDialogBackground {
implicitHeight: 846
implicitWidth: 556
color: Theme.palette.baseColor3
}
@ -214,294 +215,266 @@ StatusDialog {
anchors.fill: parent
ClippingWrapper {
Rectangle {
Layout.alignment: Qt.AlignTop
Layout.fillWidth: true
Layout.preferredHeight: assetAndAmountSelector.implicitHeight
+ Style.current.halfPadding
z: 100
clipBottomMargin: 20
color: Theme.palette.baseColor3
layer.enabled: scrollView.contentY > 0
layer.effect: DropShadow {
verticalOffset: 0
radius: 8
samples: 17
color: Theme.palette.dropShadow
}
ColumnLayout {
id: assetAndAmountSelector
Rectangle {
anchors.fill: parent
anchors.leftMargin: Style.current.xlPadding
anchors.rightMargin: Style.current.xlPadding
color: Theme.palette.baseColor3
z: 1
spacing: 16
layer.enabled: scrollView.contentY > 0
layer.effect: DropShadow {
verticalOffset: 0
radius: 8
samples: 17
color: Theme.palette.dropShadow
}
RowLayout {
spacing: 8
Layout.preferredHeight: 44
StatusBaseText {
id: modalHeader
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
verticalAlignment: Text.AlignVCenter
text: d.isBridgeTx ? qsTr("Bridge") : qsTr("Send")
font.pixelSize: 28
lineHeight: 38
lineHeightMode: Text.FixedHeight
font.letterSpacing: -0.4
color: Theme.palette.directColor1
Layout.maximumWidth: contentWidth
}
ColumnLayout {
id: assetAndAmountSelector
anchors.fill: parent
anchors.leftMargin: Style.current.xlPadding
anchors.rightMargin: Style.current.xlPadding
z: 1
spacing: 16
RowLayout {
spacing: 8
Layout.preferredHeight: 44
StatusBaseText {
id: modalHeader
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
verticalAlignment: Text.AlignVCenter
text: d.isBridgeTx ? qsTr("Bridge") : qsTr("Send")
font.pixelSize: 28
lineHeight: 38
lineHeightMode: Text.FixedHeight
font.letterSpacing: -0.4
color: Theme.palette.directColor1
Layout.maximumWidth: contentWidth
HoldingSelector {
id: holdingSelector
Layout.fillWidth: true
Layout.fillHeight: true
selectedSenderAccount: store.selectedSenderAccount.address
assetsModel: popup.store.processedAssetsModel
collectiblesModel: popup.preSelectedAccount ? popup.nestedCollectiblesModel : null
networksModel: popup.store.allNetworksModel
currentCurrencySymbol: d.currencyStore.currentCurrencySymbol
visible: (!!d.selectedHolding && d.selectedHoldingType !== Constants.TokenType.Unknown) ||
(!!d.hoveredHolding && d.hoveredHoldingType !== Constants.TokenType.Unknown)
onItemSelected: {
d.setSelectedHoldingId(holdingId, holdingType)
}
HoldingSelector {
id: holdingSelector
Layout.fillWidth: true
Layout.fillHeight: true
selectedSenderAccount: store.selectedSenderAccount.address
assetsModel: popup.store.processedAssetsModel
collectiblesModel: popup.preSelectedAccount ? popup.nestedCollectiblesModel : null
networksModel: popup.store.allNetworksModel
currentCurrencySymbol: d.currencyStore.currentCurrencySymbol
visible: (!!d.selectedHolding && d.selectedHoldingType !== Constants.TokenType.Unknown) ||
(!!d.hoveredHolding && d.hoveredHoldingType !== Constants.TokenType.Unknown)
onItemSelected: {
d.setSelectedHoldingId(holdingId, holdingType)
}
onSearchTextChanged: popup.store.assetSearchString = searchText
formatCurrentCurrencyAmount: function(balance){
return popup.store.currencyStore.formatCurrencyAmount(balance, popup.store.currencyStore.currentCurrency)
}
formatCurrencyAmountFromBigInt: function(balance, symbol, decimals){
return popup.store.formatCurrencyAmountFromBigInt(balance, symbol, decimals)
}
onSearchTextChanged: popup.store.assetSearchString = searchText
formatCurrentCurrencyAmount: function(balance){
return popup.store.currencyStore.formatCurrencyAmount(balance, popup.store.currencyStore.currentCurrency)
}
StatusListItemTag {
Layout.maximumWidth: 300
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.preferredHeight: 22
visible: d.isSelectedHoldingValidAsset || d.isHoveredHoldingValidAsset && !d.isERC721Transfer
title: {
if(d.isHoveredHoldingValidAsset && !!d.hoveredHolding.symbol) {
const input = amountToSendInput.inputIsFiat ? d.hoveredHolding.currentCurrencyBalance : d.hoveredHolding.currentBalance
const max = d.prepareForMaxSend(input, d.hoveredHolding.symbol)
if (max <= 0)
return qsTr("No balances active")
const balance = d.currencyStore.formatCurrencyAmount(max , d.hoveredHolding.symbol)
return qsTr("Max: %1").arg(balance.toString())
}
const max = d.prepareForMaxSend(d.maxInputBalance, d.inputSymbol)
if (max <= 0)
return qsTr("No balances active")
const balance = d.currencyStore.formatCurrencyAmount(max, d.inputSymbol)
return qsTr("Max: %1").arg(balance.toString())
}
tagClickable: true
closeButtonVisible: false
titleText.font.pixelSize: 12
bgColor: amountToSendInput.input.valid || !amountToSendInput.input.text ? Theme.palette.primaryColor3 : Theme.palette.dangerColor2
titleText.color: amountToSendInput.input.valid || !amountToSendInput.input.text ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
onTagClicked: {
const max = d.prepareForMaxSend(d.maxInputBalance, d.inputSymbol)
amountToSendInput.input.text = d.currencyStore.formatCurrencyAmount(max, d.inputSymbol, {noSymbol: true, rawAmount: true}, LocaleUtils.userInputLocale)
}
formatCurrencyAmountFromBigInt: function(balance, symbol, decimals){
return popup.store.formatCurrencyAmountFromBigInt(balance, symbol, decimals)
}
}
RowLayout {
visible: d.isSelectedHoldingValidAsset && !d.isERC721Transfer
AmountToSend {
id: amountToSendInput
Layout.fillWidth: true
isBridgeTx: d.isBridgeTx
interactive: popup.interactive
selectedHolding: d.selectedHolding
maxInputBalance: d.maxInputBalance
currentCurrency: d.currencyStore.currentCurrency
StatusListItemTag {
Layout.maximumWidth: 300
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.preferredHeight: 22
visible: d.isSelectedHoldingValidAsset || d.isHoveredHoldingValidAsset && !d.isERC721Transfer
title: {
if(d.isHoveredHoldingValidAsset && !!d.hoveredHolding.symbol) {
const input = amountToSendInput.inputIsFiat ? d.hoveredHolding.currentCurrencyBalance : d.hoveredHolding.currentBalance
const max = d.prepareForMaxSend(input, d.hoveredHolding.symbol)
if (max <= 0)
return qsTr("No balances active")
const balance = d.currencyStore.formatCurrencyAmount(max , d.hoveredHolding.symbol)
return qsTr("Max: %1").arg(balance.toString())
}
const max = d.prepareForMaxSend(d.maxInputBalance, d.inputSymbol)
if (max <= 0)
return qsTr("No balances active")
multiplierIndex: !!holdingSelector.selectedItem
? holdingSelector.selectedItem.decimals
: 0
formatCurrencyAmount: d.currencyStore.formatCurrencyAmount
onReCalculateSuggestedRoute: popup.recalculateRoutesAndFees()
input.input.tabNavItem: recipientLoader.item
Keys.onTabPressed: event.accepted = true
const balance = d.currencyStore.formatCurrencyAmount(max, d.inputSymbol)
return qsTr("Max: %1").arg(balance.toString())
}
// Horizontal spacer
RowLayout {}
AmountToReceive {
id: amountToReceive
Layout.alignment: Qt.AlignRight
Layout.fillWidth:true
visible: !!popup.bestRoutes && popup.bestRoutes !== undefined &&
popup.bestRoutes.count > 0 && amountToSendInput.inputNumberValid
isLoading: popup.isLoading
selectedHolding: d.selectedHolding
isBridgeTx: d.isBridgeTx
cryptoValueToReceive: d.totalAmountToReceive
inputIsFiat: amountToSendInput.inputIsFiat
minCryptoDecimals: amountToSendInput.minReceiveCryptoDecimals
minFiatDecimals: amountToSendInput.minReceiveFiatDecimals
currentCurrency: d.currencyStore.currentCurrency
formatCurrencyAmount: d.currencyStore.formatCurrencyAmount
tagClickable: true
closeButtonVisible: false
titleText.font.pixelSize: 12
bgColor: amountToSendInput.input.valid || !amountToSendInput.input.text ? Theme.palette.primaryColor3 : Theme.palette.dangerColor2
titleText.color: amountToSendInput.input.valid || !amountToSendInput.input.text ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
onTagClicked: {
const max = d.prepareForMaxSend(d.maxInputBalance, d.inputSymbol)
amountToSendInput.input.text = d.currencyStore.formatCurrencyAmount(max, d.inputSymbol, {noSymbol: true, rawAmount: true}, LocaleUtils.userInputLocale)
}
}
}
RowLayout {
visible: d.isSelectedHoldingValidAsset && !d.isERC721Transfer
AmountToSend {
id: amountToSendInput
Layout.fillWidth: true
isBridgeTx: d.isBridgeTx
interactive: popup.interactive
selectedHolding: d.selectedHolding
maxInputBalance: d.maxInputBalance
currentCurrency: d.currencyStore.currentCurrency
multiplierIndex: !!holdingSelector.selectedItem
? holdingSelector.selectedItem.decimals
: 0
formatCurrencyAmount: d.currencyStore.formatCurrencyAmount
onReCalculateSuggestedRoute: popup.recalculateRoutesAndFees()
input.input.tabNavItem: recipientLoader.item
Keys.onTabPressed: event.accepted = true
}
// Horizontal spacer
RowLayout {}
AmountToReceive {
id: amountToReceive
Layout.alignment: Qt.AlignRight
Layout.fillWidth:true
visible: !!popup.bestRoutes && popup.bestRoutes !== undefined &&
popup.bestRoutes.count > 0 && amountToSendInput.inputNumberValid
isLoading: popup.isLoading
selectedHolding: d.selectedHolding
isBridgeTx: d.isBridgeTx
cryptoValueToReceive: d.totalAmountToReceive
inputIsFiat: amountToSendInput.inputIsFiat
minCryptoDecimals: amountToSendInput.minReceiveCryptoDecimals
minFiatDecimals: amountToSendInput.minReceiveFiatDecimals
currentCurrency: d.currencyStore.currentCurrency
formatCurrencyAmount: d.currencyStore.formatCurrencyAmount
}
}
// Selected Recipient
ColumnLayout {
spacing: 8
Layout.fillWidth: true
visible: !d.isBridgeTx && !!d.selectedHolding
StatusBaseText {
id: label
elide: Text.ElideRight
text: qsTr("To")
font.pixelSize: 15
color: Theme.palette.directColor1
}
RecipientView {
id: recipientLoader
Layout.fillWidth: true
store: popup.store
isERC721Transfer: d.isERC721Transfer
isBridgeTx: d.isBridgeTx
interactive: popup.interactive
selectedAsset: d.selectedHolding
onIsLoading: popup.isLoading = true
onRecalculateRoutesAndFees: popup.recalculateRoutesAndFees()
onAddressTextChanged: store.setSelectedRecipient(addressText)
}
}
}
}
ClippingWrapper {
TokenListView {
id: tokenListRect
Layout.fillHeight: true
Layout.fillWidth: true
Layout.topMargin: Style.current.padding
Layout.leftMargin: Style.current.xlPadding
Layout.rightMargin: Style.current.xlPadding
Layout.bottomMargin: Style.current.xlPadding
visible: !d.selectedHolding
selectedSenderAccount: store.selectedSenderAccount.address
assets: popup.store.processedAssetsModel
collectibles: popup.preSelectedAccount ? popup.nestedCollectiblesModel : null
networksModel: popup.store.allNetworksModel
onlyAssets: holdingSelector.onlyAssets
onTokenSelected: {
d.setSelectedHoldingId(symbol, holdingType)
}
onTokenHovered: {
if(hovered) {
d.setHoveredHoldingId(symbol, holdingType)
} else {
d.setHoveredHoldingId("", Constants.TokenType.Unknown)
}
}
onAssetSearchStringChanged: store.assetSearchString = assetSearchString
formatCurrentCurrencyAmount: function(balance){
return popup.store.currencyStore.formatCurrencyAmount(balance, popup.store.currencyStore.currentCurrency)
}
formatCurrencyAmountFromBigInt: function(balance, symbol, decimals) {
return popup.store.formatCurrencyAmountFromBigInt(balance, symbol, decimals)
}
}
TabAddressSelectorView {
id: addressSelector
Layout.fillHeight: true
Layout.fillWidth: true
Layout.topMargin: Style.current.padding
Layout.leftMargin: Style.current.xlPadding
Layout.rightMargin: Style.current.xlPadding
visible: !recipientLoader.ready && !d.isBridgeTx && !!d.selectedHolding
store: popup.store
selectedAccount: popup.preSelectedAccount
onRecipientSelected: {
recipientLoader.selectedRecipientType = type
recipientLoader.selectedRecipient = recipient
}
}
StatusScrollView {
id: scrollView
padding: 0
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: Style.current.bigPadding
Layout.leftMargin: Style.current.xlPadding
Layout.rightMargin: Style.current.xlPadding
implicitWidth: scrollView.implicitWidth
implicitHeight: scrollView.implicitHeight
contentWidth: availableWidth
clipTopMargin: 40
visible: recipientLoader.ready && !!d.selectedHolding && amountToSendInput.inputNumberValid
StatusScrollView {
id: scrollView
objectName: "sendModalScroll"
topPadding: 12
anchors.fill: parent
contentWidth: availableWidth
Behavior on implicitHeight {
NumberAnimation { duration: 700; easing.type: Easing.OutExpo; alwaysRunToEnd: true}
}
clip: false
objectName: "sendModalScroll"
NetworkSelector {
id: networkSelector
Column {
id: layout
width: scrollView.availableWidth
spacing: Style.current.bigPadding
anchors.left: parent.left
width: scrollView.availableWidth
TokenListView {
id: tokenListRect
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
visible: !d.selectedHolding
selectedSenderAccount: store.selectedSenderAccount.address
assets: popup.store.processedAssetsModel
collectibles: popup.preSelectedAccount ? popup.nestedCollectiblesModel : null
networksModel: popup.store.allNetworksModel
onlyAssets: holdingSelector.onlyAssets
onTokenSelected: {
d.setSelectedHoldingId(symbol, holdingType)
}
onTokenHovered: {
if(hovered) {
d.setHoveredHoldingId(symbol, holdingType)
} else {
d.setHoveredHoldingId("", Constants.TokenType.Unknown)
}
}
onAssetSearchStringChanged: store.assetSearchString = assetSearchString
formatCurrentCurrencyAmount: function(balance){
return popup.store.currencyStore.formatCurrencyAmount(balance, popup.store.currencyStore.currentCurrency)
}
formatCurrencyAmountFromBigInt: function(balance, symbol, decimals) {
return popup.store.formatCurrencyAmountFromBigInt(balance, symbol, decimals)
}
}
ColumnLayout {
spacing: 8
width: parent.width
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
visible: !d.isBridgeTx && !!d.selectedHolding
StatusBaseText {
id: label
elide: Text.ElideRight
text: qsTr("To")
font.pixelSize: 15
color: Theme.palette.directColor1
}
RecipientView {
id: recipientLoader
Layout.fillWidth: true
store: popup.store
isERC721Transfer: d.isERC721Transfer
isBridgeTx: d.isBridgeTx
interactive: popup.interactive
selectedAsset: d.selectedHolding
onIsLoading: popup.isLoading = true
onRecalculateRoutesAndFees: popup.recalculateRoutesAndFees()
onAddressTextChanged: store.setSelectedRecipient(addressText)
}
}
TabAddressSelectorView {
id: addressSelector
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
store: popup.store
selectedAccount: popup.preSelectedAccount
onRecipientSelected: {
recipientLoader.selectedRecipientType = type
recipientLoader.selectedRecipient = recipient
}
visible: !recipientLoader.ready && !d.isBridgeTx && !!d.selectedHolding
}
NetworkSelector {
id: networkSelector
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
store: popup.store
interactive: popup.interactive
selectedAccount: popup.preSelectedAccount
ensAddressOrEmpty: recipientLoader.resolvedENSAddress
amountToSend: amountToSendInput.cryptoValueToSendFloat
minSendCryptoDecimals: amountToSendInput.minSendCryptoDecimals
minReceiveCryptoDecimals: amountToSendInput.minReceiveCryptoDecimals
selectedAsset: d.selectedHolding
onReCalculateSuggestedRoute: popup.recalculateRoutesAndFees()
visible: recipientLoader.ready && !!d.selectedHolding && amountToSendInput.inputNumberValid
errorType: d.errorType
isLoading: popup.isLoading
isBridgeTx: d.isBridgeTx
isERC721Transfer: d.isERC721Transfer
}
FeesView {
id: fees
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
visible: recipientLoader.ready && !!d.selectedHolding && networkSelector.advancedOrCustomMode && amountToSendInput.inputNumberValid
selectedTokenSymbol: d.selectedHolding.symbol
isLoading: popup.isLoading
bestRoutes: popup.bestRoutes
store: popup.store
gasFiatAmount: d.totalFeesInFiat
errorType: d.errorType
}
}
store: popup.store
interactive: popup.interactive
selectedAccount: popup.preSelectedAccount
ensAddressOrEmpty: recipientLoader.resolvedENSAddress
amountToSend: amountToSendInput.cryptoValueToSendFloat
minSendCryptoDecimals: amountToSendInput.minSendCryptoDecimals
minReceiveCryptoDecimals: amountToSendInput.minReceiveCryptoDecimals
selectedAsset: d.selectedHolding
onReCalculateSuggestedRoute: popup.recalculateRoutesAndFees()
errorType: d.errorType
isLoading: popup.isLoading
isBridgeTx: d.isBridgeTx
isERC721Transfer: d.isERC721Transfer
bestRoutes: popup.bestRoutes
totalFeesInFiat: d.totalFeesInFiat
}
}
}

2
ui/imports/shared/popups/send/views/FeesView.qml
View File

@ -24,7 +24,7 @@ Rectangle {
radius: 13
color: Theme.palette.indirectColor1
height: columnLayout.height + feesIcon.height
implicitHeight: columnLayout.height + feesIcon.height
RowLayout {
id: feesLayout

25
ui/imports/shared/popups/send/views/NetworkSelector.qml
View File

@ -15,8 +15,6 @@ import "../controls"
Item {
id: root
implicitHeight: visible ? tabBar.height + stackLayout.height + Style.current.xlPadding : 0
property var store
property var currencyStore : store.currencyStore
property var selectedAccount
@ -33,9 +31,13 @@ Item {
property bool isERC721Transfer: false
property var toNetworksList
property int errorType: Constants.NoError
property var bestRoutes
property double totalFeesInFiat
signal reCalculateSuggestedRoute()
implicitHeight: childrenRect.height
QtObject {
id: d
readonly property int backgroundRectRadius: 13
@ -75,8 +77,8 @@ Item {
id: networksSimpleRoutingPage
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Style.current.padding
width: stackLayout.width - Style.current.bigPadding
isBridgeTx: root.isBridgeTx
isERC721Transfer: root.isERC721Transfer
minReceiveCryptoDecimals: root.minReceiveCryptoDecimals
@ -106,8 +108,8 @@ Item {
id: advancedNetworkRoutingPage
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: Style.current.padding
width: stackLayout.width - Style.current.xlPadding
store: root.store
customMode: tabBar.currentIndex === 2
selectedAccount: root.selectedAccount
@ -128,4 +130,19 @@ Item {
}
}
}
FeesView {
id: fees
width: parent.width
anchors.top: stackLayout.bottom
anchors.topMargin: Style.current.bigPadding
visible: root.advancedOrCustomMode
selectedTokenSymbol: root.selectedAsset.symbol
isLoading: root.isLoading
bestRoutes: root.bestRoutes
store: root.store
gasFiatAmount: root.totalFeesInFiat
errorType: root.errorType
}
}

5
ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml
View File

@ -41,7 +41,7 @@ RowLayout {
Layout.preferredWidth: root.width
spacing: 4
StatusBaseText {
Layout.maximumWidth: 410
Layout.maximumWidth: parent.width
font.pixelSize: 15
font.weight: Font.Medium
color: Theme.palette.directColor1
@ -49,7 +49,7 @@ RowLayout {
wrapMode: Text.WordWrap
}
StatusBaseText {
Layout.maximumWidth: 410
Layout.maximumWidth: parent.width
font.pixelSize: 15
color: Theme.palette.baseColor1
text: isBridgeTx ? qsTr("Choose the network to bridge token to") :
@ -81,7 +81,6 @@ RowLayout {
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
Layout.topMargin: Style.current.smallPadding
Layout.rightMargin: Style.current.padding
errorType: root.errorType
isLoading: root.isLoading && !root.isBridgeTx
}

11
ui/imports/shared/popups/send/views/SendModalFooter.qml
View File

@ -29,7 +29,16 @@ Rectangle {
verticalOffset: 2
radius: 16
samples: 17
color: Theme.palette.dropShadow
color: Theme.palette.directColor7
}
// This to have the square edges on top
Rectangle {
anchors.top: footer.top
anchors.left: footer.left
anchors.right: footer.right
color: footer.color
height: footer.radius
}
RowLayout {

95
ui/imports/shared/popups/send/views/TabAddressSelectorView.qml
View File

@ -23,8 +23,6 @@ import "../views"
Item {
id: root
clip: true
implicitHeight: visible ? accountSelectionTabBar.height + stackLayout.height : 0
property var selectedAccount
property var store
@ -46,44 +44,36 @@ Item {
width: parent.width
StatusTabButton {
id: assetBtn
width: implicitWidth
text: qsTr("Saved")
}
StatusTabButton {
id: collectiblesBtn
width: implicitWidth
objectName: "myAccountsTab"
text: qsTr("My Accounts")
}
StatusTabButton {
id: historyBtn
width: implicitWidth
text: qsTr("Recent")
}
}
StackLayout {
id: stackLayout
// To-do adapt to new design and make block white/black once the list items etc support new color scheme
Rectangle {
anchors.top: accountSelectionTabBar.bottom
anchors.topMargin: -5
height: currentIndex === 0 ? savedAddresses.height: currentIndex === 1 ? myAccounts.height : recents.height
height: parent.height - accountSelectionTabBar.height
width: parent.width
currentIndex: accountSelectionTabBar.currentIndex
color: Theme.palette.indirectColor1
radius: 8
// To-do adapt to new design and make block white/balck once the list items etc support new color scheme
Rectangle {
Layout.maximumWidth: parent.width
Layout.maximumHeight : savedAddresses.height
color: Theme.palette.indirectColor1
radius: 8
StackLayout {
currentIndex: accountSelectionTabBar.currentIndex
anchors.fill: parent
StatusListView {
id: savedAddresses
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
implicitWidth: parent.width
height: savedAddresses.contentHeight
model: root.store.savedAddressesModel
header: savedAddresses.count > 0 ? search : nothingInList
@ -115,21 +105,10 @@ Item {
}
}
}
}
Rectangle {
id: myAccountsRect
Layout.maximumWidth: parent.width
Layout.maximumHeight: myAccounts.height
color: Theme.palette.indirectColor1
radius: 8
StatusListView {
id: myAccounts
objectName: "myAccountsList"
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
width: parent.width
height: myAccounts.contentHeight
delegate: WalletAccountListItem {
implicitWidth: ListView.view.width
@ -147,43 +126,9 @@ Item {
model: root.store.accounts
}
}
Rectangle {
id: recentsRect
Layout.maximumWidth: parent.width
Layout.maximumHeight : recents.height
color: Theme.palette.indirectColor1
radius: 8
onVisibleChanged: {
if (visible) {
updateRecentsActivity()
}
}
Connections {
target: root
function onSelectedAccountChanged() {
if (visible) {
recentsRect.updateRecentsActivity()
}
}
}
function updateRecentsActivity() {
if(root.selectedAccount) {
root.store.tmpActivityController.setFilterAddressesJson(JSON.stringify([root.selectedAccount.address], false))
}
root.store.tmpActivityController.updateFilter()
}
StatusListView {
id: recents
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
width: parent.width
height: recents.contentHeight
header: StatusBaseText {
height: visible ? 56 : 0
@ -230,6 +175,28 @@ Item {
}
model: root.store.tmpActivityController.model
onVisibleChanged: {
if (visible) {
updateRecentsActivity()
}
}
Connections {
target: root
function onSelectedAccountChanged() {
if (visible) {
recents.updateRecentsActivity()
}
}
}
function updateRecentsActivity() {
if(root.selectedAccount) {
root.store.tmpActivityController.setFilterAddressesJson(JSON.stringify([root.selectedAccount.address], false))
}
root.store.tmpActivityController.updateFilter()
}
}
}
}

134
ui/imports/shared/popups/send/views/TokenListView.qml
View File

@ -75,91 +75,74 @@ Item {
rightModel: d.renamedAllNetworksModel
joinRole: "chainId"
}
readonly property bool isBrowsingTypeERC20: root.browsingHoldingType === Constants.TokenType.ERC20
}
implicitWidth: contentLayout.implicitWidth
implicitHeight: contentLayout.implicitHeight
StatusBaseText {
id: label
anchors.top: parent.top
elide: Text.ElideRight
text: qsTr("Token to send")
font.pixelSize: 13
color: Theme.palette.directColor1
}
ColumnLayout {
id: contentLayout
Rectangle {
anchors.top: label.bottom
anchors.topMargin: 8
width: parent.width
height: parent.height
anchors.fill: parent
spacing: 8
color: Theme.palette.indirectColor1
radius: 8
StatusBaseText {
id: label
elide: Text.ElideRight
text: qsTr("Token to send")
font.pixelSize: 13
color: Theme.palette.directColor1
}
ColumnLayout {
id: column
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: column.height
anchors.fill: parent
anchors.topMargin: root.onlyAssets ? 0 : 20
color: Theme.palette.indirectColor1
radius: 8
StatusTabBar {
visible: !root.onlyAssets
Layout.preferredHeight: 40
Layout.fillWidth: true
currentIndex: d.holdingTypes.indexOf(root.browsingHoldingType)
Column {
id: column
width: parent.width
topPadding: root.onlyAssets ? 0 : 20
StatusTabBar {
visible: !root.onlyAssets
height: 40
width: parent.width
currentIndex: d.holdingTypes.indexOf(root.browsingHoldingType)
onCurrentIndexChanged: {
if (currentIndex >= 0) {
root.browsingHoldingType = d.holdingTypes[currentIndex]
}
}
Repeater {
id: tabLabelsRepeater
model: d.tabsModel
StatusTabButton {
text: modelData
width: implicitWidth
}
onCurrentIndexChanged: {
if (currentIndex >= 0) {
root.browsingHoldingType = d.holdingTypes[currentIndex]
}
}
StatusListView {
id: tokenList
Repeater {
id: tabLabelsRepeater
model: d.tabsModel
width: parent.width
height: tokenList.contentHeight
header: root.browsingHoldingType === Constants.TokenType.ERC20 ? tokenHeader : collectibleHeader
model: root.browsingHoldingType === Constants.TokenType.ERC20 ? root.assets : collectiblesModel
delegate: root.browsingHoldingType === Constants.TokenType.ERC20 ? tokenDelegate : collectiblesDelegate
section {
property: "isCommunityAsset"
delegate: Loader {
width: ListView.view.width
required property string section
sourceComponent: root.browsingHoldingType === Constants.TokenType.ERC20 && section === "true" ? sectionDelegate : null
}
StatusTabButton {
text: modelData
width: implicitWidth
}
}
}
Component {
id: sectionDelegate
AssetsSectionDelegate {
width: parent.width
onOpenInfoPopup: Global.openPopup(communityInfoPopupCmp)
StatusListView {
id: tokenList
Layout.fillWidth: true
Layout.fillHeight: true
header: d.isBrowsingTypeERC20 ? tokenHeader : collectibleHeader
model: d.isBrowsingTypeERC20 ? root.assets : collectiblesModel
delegate: d.isBrowsingTypeERC20 ? tokenDelegate : collectiblesDelegate
section {
property: "isCommunityAsset"
delegate: Loader {
width: ListView.view.width
required property string section
sourceComponent: d.isBrowsingTypeERC20 && section === "true" ? sectionDelegate : null
}
}
Component {
id: communityInfoPopupCmp
CommunityAssetsInfoPopup {}
}
}
}
}
@ -185,7 +168,7 @@ Item {
width: ListView.view.width
selectedSenderAccount: root.selectedSenderAccount
balancesModel: LeftJoinModel {
leftModel: model.balances
leftModel: !!model & !!model.balances ? model.balances : nil
rightModel: root.networksModel
joinRole: "chainId"
}
@ -243,4 +226,17 @@ Item {
}
}
}
Component {
id: sectionDelegate
AssetsSectionDelegate {
width: parent.width
onOpenInfoPopup: Global.openPopup(communityInfoPopupCmp)
}
}
Component {
id: communityInfoPopupCmp
CommunityAssetsInfoPopup {}
}
}