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

fix(wallet): some of SendModal's broken windows 

- fix high level mixed and broken sizing due to missing a consistent
layouting strategy
- fix first selection. The floating header was covering and tried to
force StatusListView to account for it but nothing I tried worked
    - moved header outside the StatisListView (a good example of control
    want to to be doing too many things)
- fixed background color of the TokenListView
- fix tags occluding selection of token

Closes: #9282
This commit is contained in:
Stefan 2023-02-02 16:28:39 +01:00 committed by Anthony Laibe
parent b777e20bff
commit 3a08ebec4e
5 changed files with 73 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/StatusQ/src/StatusQ/Components/StatusListItem.qml
View File

@ -326,15 +326,14 @@ Rectangle {
implicitHeight: visible ? 22 : 0
}
ScrollView {
Flickable {
visible: tagsRepeater.count > 0
anchors.top: statusListItemTertiaryTitle.bottom
anchors.topMargin: visible ? 8 : 0
width: parent.width
height: visible ? contentHeight : 0
width: Math.min(statusListItemTagsSlotInline.width, parent.width)
height: visible ? statusListItemTagsSlotInline.height : 0
clip: true
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
interactive: contentWidth > width
Row {
id: statusListItemTagsSlotInline

10
ui/imports/shared/controls/TokenBalancePerChainDelegate.qml
View File

@ -25,7 +25,15 @@ StatusListItem {
tagsModel: balances.count > 0 ? balances : []
tagsDelegate: sensor.containsMouse ? expandedItem : compactItem
onClicked: tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals})
onClicked: d.selectToken()
QtObject {
id: d
function selectToken() {
root.tokenSelected({name, symbol, totalBalance, totalCurrencyBalance, balances, decimals})
}
}
Component {
id: compactItem

28
ui/imports/shared/popups/SendModal.qml
View File

@ -179,11 +179,13 @@ StatusDialog {
clip: true
ColumnLayout {
id: group1
Layout.preferredWidth: parent.width
Layout.fillWidth: true
Layout.fillHeight: true
Rectangle {
Layout.preferredWidth: parent.width
Layout.preferredHeight: assetAndAmmountSelector.height + Style.current.halfPadding
Layout.fillWidth: true
Layout.preferredHeight: assetAndAmountSelector.implicitHeight + Style.current.halfPadding
color: Theme.palette.baseColor3
z: 100
@ -195,17 +197,17 @@ StatusDialog {
color: Theme.palette.dropShadow
}
Column {
id: assetAndAmmountSelector
anchors.left: parent.left
anchors.right: parent.right
ColumnLayout {
id: assetAndAmountSelector
anchors.fill: parent
anchors.leftMargin: Style.current.xlPadding
anchors.rightMargin: Style.current.xlPadding
z: 1
spacing: 16
RowLayout {
width: parent.width
spacing: 8
StatusBaseText {
id: modalHeader
@ -262,7 +264,6 @@ StatusDialog {
}
}
RowLayout {
width: parent.width
AmountToSend {
id: amountToSendInput
Layout.fillWidth:true
@ -285,6 +286,10 @@ StatusDialog {
}
onReCalculateSuggestedRoute: popup.recalculateRoutesAndFees()
}
// Horizontal spacer
RowLayout {}
AmountToReceive {
id: amountToReceive
Layout.alignment: Qt.AlignRight
@ -304,8 +309,9 @@ StatusDialog {
}
TokenListView {
id: tokenListRect
anchors.left: parent.left
anchors.right: parent.right
Layout.fillWidth: true
visible: !assetSelector.selectedAsset
assets: popup.selectedAccount && popup.selectedAccount.assets ? popup.selectedAccount.assets : []
searchTokenSymbolByAddressFn: function (address) {

77
ui/imports/shared/views/TokenListView.qml
View File

@ -1,4 +1,5 @@
import QtQuick 2.13
import QtQuick.Layouts 1.14
import SortFilterProxyModel 0.2
@ -11,7 +12,7 @@ import utils 1.0
import "../controls"
Rectangle {
Item {
id: root
property var assets: []
@ -29,43 +30,24 @@ Rectangle {
})
}
height: visible ? tokenList.height: 0
implicitWidth: contentLayout.implicitWidth
implicitHeight: contentLayout.implicitHeight
ColumnLayout {
id: contentLayout
anchors.fill: parent
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: headerColumn.height
color: Theme.palette.indirectColor1
radius: 8
StatusListView {
id: tokenList
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
width: parent.width
height: Math.min(433, tokenList.contentHeight)
model: SortFilterProxyModel {
sourceModel: root.assets
filters: [
ExpressionFilter {
expression: {
var tokenSymbolByAddress = searchTokenSymbolByAddressFn(d.searchString)
return visibleForNetwork && (
symbol.startsWith(d.searchString.toUpperCase()) || name.toUpperCase().startsWith(d.searchString.toUpperCase()) || (tokenSymbolByAddress!=="" && symbol.startsWith(tokenSymbolByAddress))
)
}
}
]
}
delegate: TokenBalancePerChainDelegate {
width: ListView.view.width
getNetworkIcon: root.getNetworkIcon
onTokenSelected: root.tokenSelected(selectedToken)
}
headerPositioning: ListView.OverlayHeader
header: Rectangle {
width: parent.width
height: childrenRect.height
color: Theme.palette.indirectColor1
radius: 8
z: 2
Column {
id: headerColumn
width: parent.width
Item {
height: 5
@ -90,5 +72,32 @@ Rectangle {
}
}
}
StatusListView {
id: tokenList
Layout.fillWidth: true
Layout.preferredHeight: 396
model: SortFilterProxyModel {
sourceModel: root.assets
filters: [
ExpressionFilter {
expression: {
var tokenSymbolByAddress = searchTokenSymbolByAddressFn(d.searchString)
tokenList.positionViewAtBeginning()
return visibleForNetwork && (
symbol.startsWith(d.searchString.toUpperCase()) || name.toUpperCase().startsWith(d.searchString.toUpperCase()) || (tokenSymbolByAddress!=="" && symbol.startsWith(tokenSymbolByAddress))
)
}
}
]
}
delegate: TokenBalancePerChainDelegate {
width: ListView.view.width
getNetworkIcon: root.getNetworkIcon
onTokenSelected: root.tokenSelected(selectedToken)
}
}
}
}