fix(@desktop/wallet): In the Send Modal the saved addresses and my accounts sections need to be adjusted to match design

fixes #6498
This commit is contained in:
Khushboo Mehta 2022-07-20 16:13:23 +02:00 committed by Khushboo-dev-cpp
parent 46f82f2c5e
commit ec8320f3bb
1 changed files with 42 additions and 21 deletions

View File

@ -19,7 +19,7 @@ import "../views"
Item { Item {
id: root id: root
clip: true clip: true
implicitHeight: accountSelectionTabBar.height + stackLayout.height + Style.current.xlPadding implicitHeight: accountSelectionTabBar.height + stackLayout.height + Style.current.bigPadding
property var store property var store
@ -59,40 +59,45 @@ Item {
Rectangle { Rectangle {
Layout.maximumWidth: parent.width Layout.maximumWidth: parent.width
Layout.maximumHeight : savedAddresses.height Layout.maximumHeight : savedAddresses.height
color: "transparent" color: Theme.palette.indirectColor1
radius: 8 radius: 8
StatusListView { StatusListView {
id: savedAddresses id: savedAddresses
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top anchors.top: parent.top
width: parent.width implicitWidth: parent.width
height: Math.min(288, savedAddresses.contentHeight) height: Math.min(288, savedAddresses.contentHeight)
model: root.store.savedAddressesModel model: root.store.savedAddressesModel
header: savedAddresses.count > 0 ? search : nothingInList header: savedAddresses.count > 0 ? search : nothingInList
headerPositioning: ListView.OverlayHeader headerPositioning: ListView.OverlayHeader
delegate: StatusListItem { delegate: StatusListItem {
width: visible ? savedAddresses.availableWidth : 0 implicitWidth: parent.width
height: visible ? 64 : 0 height: visible ? 64 : 0
title: name title: name
subTitle: address subTitle: address
radius: 0 radius: 0
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
visible: !savedAddresses.headerItem.text || name.toLowerCase().includes(savedAddresses.headerItem.text) visible: !savedAddresses.headerItem.text || name.toLowerCase().includes(savedAddresses.headerItem.text)
components: [ // TODO uncomment when #6456 is fixed
StatusIcon { // components: [
icon: "star-icon" // StatusIcon {
width: 12 // icon: "star-icon"
height: 12 // width: 12
} // height: 12
] // }
// ]
onClicked: contactSelected(address, RecipientSelector.Type.Address ) onClicked: contactSelected(address, RecipientSelector.Type.Address )
} }
Component { Component {
id: search id: search
StatusBaseInput { ColumnLayout {
width: parent.width width: parent.width
height: 56 StatusBaseInput {
Layout.preferredHeight: 55
Layout.preferredWidth: parent.width
showBackground: false
placeholderText: qsTr("Search for saved address") placeholderText: qsTr("Search for saved address")
rightComponent: StatusIcon { rightComponent: StatusIcon {
icon: "search" icon: "search"
@ -100,13 +105,23 @@ Item {
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
} }
} }
Rectangle {
Layout.preferredHeight: 1
Layout.preferredWidth: parent.width
color: Theme.palette.baseColor3
}
}
} }
Component { Component {
id: nothingInList id: nothingInList
StatusBaseText { StatusBaseText {
width: savedAddresses.width
height: visible ? 56 : 0
font.pixelSize: 15 font.pixelSize: 15
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: qsTr("No Saved Address") text: qsTr("No Saved Address")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
} }
} }
} }
@ -115,7 +130,7 @@ Item {
id: myAccountsRect id: myAccountsRect
Layout.maximumWidth: parent.width Layout.maximumWidth: parent.width
Layout.maximumHeight : myAccounts.height Layout.maximumHeight : myAccounts.height
color: "transparent" color: Theme.palette.indirectColor1
radius: 8 radius: 8
StatusListView { StatusListView {
@ -126,7 +141,7 @@ Item {
height: Math.min(288, myAccounts.contentHeight) height: Math.min(288, myAccounts.contentHeight)
delegate: StatusListItem { delegate: StatusListItem {
width: myAccounts.availableWidth implicitWidth: parent.width
height: visible ? 64 : 0 height: visible ? 64 : 0
title: !!model.name ? model.name : "" title: !!model.name ? model.name : ""
subTitle: Utils.toLocaleString(model.currencyBalance.toFixed(2), store.locale, {"model.currency": true}) + " " + store.currentCurrency.toUpperCase() subTitle: Utils.toLocaleString(model.currencyBalance.toFixed(2), store.locale, {"model.currency": true}) + " " + store.currentCurrency.toUpperCase()
@ -137,6 +152,7 @@ Item {
icon.isLetterIdenticon: !!model.emoji ? true : false icon.isLetterIdenticon: !!model.emoji ? true : false
icon.background.color: Theme.palette.indirectColor1 icon.background.color: Theme.palette.indirectColor1
radius: 0 radius: 0
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
onClicked: contactSelected(model.address, RecipientSelector.Type.Account ) onClicked: contactSelected(model.address, RecipientSelector.Type.Account )
} }
@ -147,7 +163,7 @@ Item {
Rectangle { Rectangle {
Layout.maximumWidth: parent.width Layout.maximumWidth: parent.width
Layout.maximumHeight : recents.height Layout.maximumHeight : recents.height
color: "transparent" color: Theme.palette.indirectColor1
radius: 8 radius: 8
StatusListView { StatusListView {
@ -158,9 +174,13 @@ Item {
height: Math.min(288, recents.contentHeight) height: Math.min(288, recents.contentHeight)
header: StatusBaseText { header: StatusBaseText {
height: visible ? 56 : 0
width: recents.width
font.pixelSize: 15 font.pixelSize: 15
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: qsTr("No Recents") text: qsTr("No Recents")
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
visible: recents.count <= 0 visible: recents.count <= 0
} }
@ -173,6 +193,7 @@ Item {
statusListItemTitle.elide: Text.ElideMiddle statusListItemTitle.elide: Text.ElideMiddle
statusListItemTitle.wrapMode: Text.NoWrap statusListItemTitle.wrapMode: Text.NoWrap
radius: 0 radius: 0
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
components: [ components: [
StatusIcon { StatusIcon {
id: transferIcon id: transferIcon