diff --git a/storybook/pages/TokenListViewPage.qml b/storybook/pages/TokenListViewPage.qml index 39a8b6c7f4..f1e1eaffeb 100644 --- a/storybook/pages/TokenListViewPage.qml +++ b/storybook/pages/TokenListViewPage.qml @@ -42,6 +42,7 @@ SplitView { anchors.centerIn: parent width: 400 + height: 600 assets: txStore.processedAssetsModel collectibles: WalletNestedCollectiblesModel {} diff --git a/ui/imports/shared/popups/send/SendModal.qml b/ui/imports/shared/popups/send/SendModal.qml index c05bc9110d..75b252ead0 100644 --- a/ui/imports/shared/popups/send/SendModal.qml +++ b/ui/imports/shared/popups/send/SendModal.qml @@ -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 } } } diff --git a/ui/imports/shared/popups/send/views/FeesView.qml b/ui/imports/shared/popups/send/views/FeesView.qml index 8f99e0550b..419094e42f 100644 --- a/ui/imports/shared/popups/send/views/FeesView.qml +++ b/ui/imports/shared/popups/send/views/FeesView.qml @@ -24,7 +24,7 @@ Rectangle { radius: 13 color: Theme.palette.indirectColor1 - height: columnLayout.height + feesIcon.height + implicitHeight: columnLayout.height + feesIcon.height RowLayout { id: feesLayout diff --git a/ui/imports/shared/popups/send/views/NetworkSelector.qml b/ui/imports/shared/popups/send/views/NetworkSelector.qml index 354c0104ee..33f47c4b2d 100644 --- a/ui/imports/shared/popups/send/views/NetworkSelector.qml +++ b/ui/imports/shared/popups/send/views/NetworkSelector.qml @@ -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 + } } diff --git a/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml b/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml index f066ed111b..05758f8dcf 100644 --- a/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml +++ b/ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml @@ -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 } diff --git a/ui/imports/shared/popups/send/views/SendModalFooter.qml b/ui/imports/shared/popups/send/views/SendModalFooter.qml index 53db2b9658..2ab00557ad 100644 --- a/ui/imports/shared/popups/send/views/SendModalFooter.qml +++ b/ui/imports/shared/popups/send/views/SendModalFooter.qml @@ -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 { diff --git a/ui/imports/shared/popups/send/views/TabAddressSelectorView.qml b/ui/imports/shared/popups/send/views/TabAddressSelectorView.qml index d40ad7645b..b254c6b912 100644 --- a/ui/imports/shared/popups/send/views/TabAddressSelectorView.qml +++ b/ui/imports/shared/popups/send/views/TabAddressSelectorView.qml @@ -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() + } } } } diff --git a/ui/imports/shared/popups/send/views/TokenListView.qml b/ui/imports/shared/popups/send/views/TokenListView.qml index 81b7b43783..cf5f2bc455 100644 --- a/ui/imports/shared/popups/send/views/TokenListView.qml +++ b/ui/imports/shared/popups/send/views/TokenListView.qml @@ -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 {} + } }