Skip to content

Commit

Permalink
feat(@desktop/wallet): Send dialog: sizing and layout rules to limit …
Browse files Browse the repository at this point in the history 
…dialog height jumping between states

fixes #13377
  • Loading branch information
@Khushboo-dev-cpp
Khushboo-dev-cpp committed Feb 13, 2024
1 parent f778152 commit 97ae41a
Show file tree
Hide file tree
Showing 6 changed files with 352 additions and 395 deletions.
504 changes: 245 additions & 259 deletions ui/imports/shared/popups/send/SendModal.qml
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion ui/imports/shared/popups/send/views/FeesView.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ Rectangle {

radius: 13
color: Theme.palette.indirectColor1
height: columnLayout.height + feesIcon.height
implicitHeight: columnLayout.height + feesIcon.height

RowLayout {
id: feesLayout
Expand Down
4 changes: 2 additions & 2 deletions ui/imports/shared/popups/send/views/NetworkSelector.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,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
Expand Down Expand Up @@ -106,8 +106,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
Expand Down
5 changes: 2 additions & 3 deletions ui/imports/shared/popups/send/views/NetworksSimpleRoutingView.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,15 @@ 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
text: qsTr("Networks")
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") :
Expand Down Expand Up @@ -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
}
Expand Down
103 changes: 39 additions & 64 deletions ui/imports/shared/popups/send/views/TabAddressSelectorView.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ import "../views"

Item {
id: root
clip: true
implicitHeight: visible ? accountSelectionTabBar.height + stackLayout.height : 0

property var selectedAccount
property var store
Expand All @@ -46,44 +44,38 @@ 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
Layout.fillWidth: true
Layout.fillHeight: true

model: root.store.savedAddressesModel
header: savedAddresses.count > 0 ? search : nothingInList
Expand Down Expand Up @@ -115,21 +107,13 @@ 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

Layout.fillWidth: true
Layout.fillHeight: true

delegate: WalletAccountListItem {
implicitWidth: ListView.view.width
Expand All @@ -147,43 +131,12 @@ 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

Layout.fillWidth: true
Layout.fillHeight: true

header: StatusBaseText {
height: visible ? 56 : 0
Expand Down Expand Up @@ -230,6 +183,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()
}
}
}
}
Expand Down
129 changes: 63 additions & 66 deletions ui/imports/shared/popups/send/views/TokenListView.qml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,85 +80,69 @@ Item {
implicitWidth: contentLayout.implicitWidth
implicitHeight: contentLayout.implicitHeight

ColumnLayout {
id: contentLayout

anchors.fill: parent
spacing: 8

StatusBaseText {
id: label
elide: Text.ElideRight
text: qsTr("Token to send")
font.pixelSize: 13
color: Theme.palette.directColor1
}

Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: column.height
StatusBaseText {
id: label
anchors.top: parent.top
elide: Text.ElideRight
text: qsTr("Token to send")
font.pixelSize: 13
color: Theme.palette.directColor1
}

color: Theme.palette.indirectColor1
radius: 8
Rectangle {
anchors.top: label.bottom
anchors.topMargin: 8
width: parent.width
height: parent.height

Column {
id: column
width: parent.width
topPadding: root.onlyAssets ? 0 : 20
color: Theme.palette.indirectColor1
radius: 8

StatusTabBar {
visible: !root.onlyAssets
height: 40
width: parent.width
currentIndex: d.holdingTypes.indexOf(root.browsingHoldingType)
ColumnLayout {
id: column

onCurrentIndexChanged: {
if (currentIndex >= 0) {
root.browsingHoldingType = d.holdingTypes[currentIndex]
}
}
anchors.fill: parent
anchors.topMargin: root.onlyAssets ? 0 : 20

Repeater {
id: tabLabelsRepeater
model: d.tabsModel
StatusTabBar {
visible: !root.onlyAssets
Layout.preferredHeight: 40
Layout.fillWidth: true
currentIndex: d.holdingTypes.indexOf(root.browsingHoldingType)

StatusTabButton {
text: modelData
width: implicitWidth
}
onCurrentIndexChanged: {
if (currentIndex >= 0) {
root.browsingHoldingType = d.holdingTypes[currentIndex]
}
}

StatusListView {
id: tokenList

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
}
}
}
Repeater {
id: tabLabelsRepeater
model: d.tabsModel

Component {
id: sectionDelegate
AssetsSectionDelegate {
width: parent.width
onOpenInfoPopup: Global.openPopup(communityInfoPopupCmp)
StatusTabButton {
text: modelData
width: implicitWidth
}
}
}

StatusListView {
id: tokenList

Component {
id: communityInfoPopupCmp
CommunityAssetsInfoPopup {}
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
section {
property: "isCommunityAsset"
delegate: Loader {
width: ListView.view.width
required property string section
sourceComponent: root.browsingHoldingType === Constants.TokenType.ERC20 && section === "true" ? sectionDelegate : null
}
}
}
}
Expand Down Expand Up @@ -243,4 +227,17 @@ Item {
}
}
}

Component {
id: sectionDelegate
AssetsSectionDelegate {
width: parent.width
onOpenInfoPopup: Global.openPopup(communityInfoPopupCmp)
}
}

Component {
id: communityInfoPopupCmp
CommunityAssetsInfoPopup {}
}
}

0 comments on commit 97ae41a

Please sign in to comment.