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 {}

163
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,17 +215,13 @@ StatusDialog {
anchors.fill: parent
ClippingWrapper {
Rectangle {
Layout.alignment: Qt.AlignTop
Layout.fillWidth: true
Layout.preferredHeight: assetAndAmountSelector.implicitHeight
+ Style.current.halfPadding
z: 100
clipBottomMargin: 20
Rectangle {
anchors.fill: parent
color: Theme.palette.baseColor3
layer.enabled: scrollView.contentY > 0
@ -358,44 +355,45 @@ StatusDialog {
formatCurrencyAmount: d.currencyStore.formatCurrencyAmount
}
}
}
}
}
ClippingWrapper {
// Selected Recipient
ColumnLayout {
spacing: 8
Layout.fillWidth: true
Layout.fillHeight: true
implicitWidth: scrollView.implicitWidth
implicitHeight: scrollView.implicitHeight
clipTopMargin: 40
StatusScrollView {
id: scrollView
topPadding: 12
anchors.fill: parent
contentWidth: availableWidth
clip: false
objectName: "sendModalScroll"
Column {
id: layout
width: scrollView.availableWidth
spacing: Style.current.bigPadding
anchors.left: parent.left
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)
}
}
}
}
TokenListView {
id: tokenListRect
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
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
@ -420,57 +418,48 @@ StatusDialog {
}
}
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
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
}
visible: !recipientLoader.ready && !d.isBridgeTx && !!d.selectedHolding
}
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
contentWidth: availableWidth
visible: recipientLoader.ready && !!d.selectedHolding && amountToSendInput.inputNumberValid
objectName: "sendModalScroll"
Behavior on implicitHeight {
NumberAnimation { duration: 700; easing.type: Easing.OutExpo; alwaysRunToEnd: true}
}
NetworkSelector {
id: networkSelector
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: Style.current.bigPadding
anchors.rightMargin: Style.current.bigPadding
width: scrollView.availableWidth
store: popup.store
interactive: popup.interactive
selectedAccount: popup.preSelectedAccount
@ -480,28 +469,12 @@ StatusDialog {
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
}
}
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 {

93
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
// 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()
}
}
}
}

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

@ -75,19 +75,13 @@ Item {
rightModel: d.renamedAllNetworksModel
joinRole: "chainId"
}
readonly property bool isBrowsingTypeERC20: root.browsingHoldingType === Constants.TokenType.ERC20
}
implicitWidth: contentLayout.implicitWidth
implicitHeight: contentLayout.implicitHeight
ColumnLayout {
id: contentLayout
anchors.fill: parent
spacing: 8
StatusBaseText {
id: label
anchors.top: parent.top
elide: Text.ElideRight
text: qsTr("Token to send")
font.pixelSize: 13
@ -95,21 +89,24 @@ Item {
}
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: column.height
anchors.top: label.bottom
anchors.topMargin: 8
width: parent.width
height: parent.height
color: Theme.palette.indirectColor1
radius: 8
Column {
ColumnLayout {
id: column
width: parent.width
topPadding: root.onlyAssets ? 0 : 20
anchors.fill: parent
anchors.topMargin: root.onlyAssets ? 0 : 20
StatusTabBar {
visible: !root.onlyAssets
height: 40
width: parent.width
Layout.preferredHeight: 40
Layout.fillWidth: true
currentIndex: d.holdingTypes.indexOf(root.browsingHoldingType)
onCurrentIndexChanged: {
@ -132,35 +129,21 @@ Item {
StatusListView {
id: tokenList
width: parent.width
height: tokenList.contentHeight
Layout.fillWidth: true
Layout.fillHeight: true
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
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: root.browsingHoldingType === Constants.TokenType.ERC20 && section === "true" ? sectionDelegate : null
sourceComponent: d.isBrowsingTypeERC20 && section === "true" ? sectionDelegate : null
}
}
}
Component {
id: sectionDelegate
AssetsSectionDelegate {
width: parent.width
onOpenInfoPopup: Global.openPopup(communityInfoPopupCmp)
}
}
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 {}
}
}