fix(receive) fix header alignment for ReceiveModal
Add a reusable header shared between Send and Receive modals Updates #8180
This commit is contained in:
parent
245f3a7266
commit
7bd9808476
|
@ -1,6 +1,7 @@
|
||||||
import QtQuick 2.13
|
import QtQuick 2.13
|
||||||
import QtGraphicalEffects 1.13
|
import QtGraphicalEffects 1.13
|
||||||
import QtQuick.Layouts 1.13
|
import QtQuick.Layouts 1.13
|
||||||
|
import QtQuick.Controls 2.14
|
||||||
|
|
||||||
import StatusQ.Core 0.1
|
import StatusQ.Core 0.1
|
||||||
import StatusQ.Core.Theme 0.1
|
import StatusQ.Core.Theme 0.1
|
||||||
|
@ -13,6 +14,7 @@ import StatusQ.Core.Utils 0.1
|
||||||
import utils 1.0
|
import utils 1.0
|
||||||
|
|
||||||
import shared.controls 1.0
|
import shared.controls 1.0
|
||||||
|
import shared.popups 1.0
|
||||||
|
|
||||||
import "../stores"
|
import "../stores"
|
||||||
|
|
||||||
|
@ -25,7 +27,7 @@ StatusModal {
|
||||||
|
|
||||||
onSelectedAccountChanged: {
|
onSelectedAccountChanged: {
|
||||||
if (selectedAccount.address) {
|
if (selectedAccount.address) {
|
||||||
txtWalletAddress.text = selectedAccount.mixedcaseAddress
|
txtWalletAddress.text = selectedAccount.address
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -50,53 +52,13 @@ StatusModal {
|
||||||
}
|
}
|
||||||
|
|
||||||
hasFloatingButtons: true
|
hasFloatingButtons: true
|
||||||
advancedHeaderComponent: StatusFloatingButtonsSelector {
|
advancedHeaderComponent: AccountsModalHeader {
|
||||||
id: floatingHeader
|
|
||||||
model: RootStore.accounts
|
model: RootStore.accounts
|
||||||
delegate: Rectangle {
|
selectedAccount: popup.selectedAccount
|
||||||
width: button.width
|
changeSelectedAccount: function(newAccount, newIndex) {
|
||||||
height: button.height
|
popup.selectedAccount = newAccount
|
||||||
radius: 8
|
|
||||||
visible: floatingHeader.visibleIndices.includes(index)
|
|
||||||
StatusButton {
|
|
||||||
id: button
|
|
||||||
topPadding: 8
|
|
||||||
bottomPadding: 0
|
|
||||||
implicitHeight: 32
|
|
||||||
leftPadding: 4
|
|
||||||
text: name
|
|
||||||
asset.emoji: !!emoji ? emoji: ""
|
|
||||||
asset.emojiSize: Emoji.size.middle
|
|
||||||
icon.name: !emoji ? "filled-account": ""
|
|
||||||
normalColor: "transparent"
|
|
||||||
highlighted: index === floatingHeader.currentIndex
|
|
||||||
onClicked: {
|
|
||||||
popup.selectedAccount = model
|
|
||||||
floatingHeader.currentIndex = index
|
|
||||||
}
|
|
||||||
Component.onCompleted: {
|
|
||||||
// On startup make the preseected wallet in the floating menu
|
|
||||||
if(name === popup.selectedAccount.name)
|
|
||||||
floatingHeader.currentIndex = index
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
popupMenuDelegate: StatusListItem {
|
|
||||||
implicitWidth: 272
|
|
||||||
title: name
|
|
||||||
subTitle: currencyBalance
|
|
||||||
asset.emoji: !!emoji ? emoji: ""
|
|
||||||
asset.color: model.color
|
|
||||||
asset.name: !emoji ? "filled-account": ""
|
|
||||||
asset.letterSize: 14
|
|
||||||
asset.isLetterIdenticon: !!model.emoji
|
|
||||||
asset.bgColor: Theme.palette.indirectColor1
|
|
||||||
onClicked: {
|
|
||||||
popup.selectedAccount = model
|
|
||||||
floatingHeader.itemSelected(index)
|
|
||||||
}
|
|
||||||
visible: !floatingHeader.visibleIndices.includes(index)
|
|
||||||
}
|
}
|
||||||
|
showAllWalletTypes: true
|
||||||
}
|
}
|
||||||
|
|
||||||
contentItem: Column {
|
contentItem: Column {
|
||||||
|
@ -286,9 +248,7 @@ StatusModal {
|
||||||
testNetworks: RootStore.testNetworks
|
testNetworks: RootStore.testNetworks
|
||||||
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
|
||||||
|
|
||||||
onToggleNetwork: {
|
onToggleNetwork: (chainId) => RootStore.toggleNetwork(chainId)
|
||||||
RootStore.toggleNetwork(chainId)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
states: [
|
states: [
|
||||||
|
|
|
@ -16,25 +16,31 @@ import "../controls"
|
||||||
import "../views"
|
import "../views"
|
||||||
|
|
||||||
StatusFloatingButtonsSelector {
|
StatusFloatingButtonsSelector {
|
||||||
id: floatingHeader
|
id: root
|
||||||
|
|
||||||
property var selectedAccount
|
property var selectedAccount
|
||||||
|
// Expected signature: function(newAccount, newIndex)
|
||||||
property var changeSelectedAccount: function(){}
|
property var changeSelectedAccount: function(){}
|
||||||
|
property bool showAllWalletTypes: false
|
||||||
|
|
||||||
repeater.objectName: "accountsListFloatingHeader"
|
repeater.objectName: "accountsListFloatingHeader"
|
||||||
|
|
||||||
signal updatedSelectedAccount(var account)
|
signal updatedSelectedAccount(var account)
|
||||||
|
|
||||||
QtObject {
|
QtObject {
|
||||||
id: d
|
id: d
|
||||||
property var firstModelData: null
|
property var firstModelData: null
|
||||||
|
|
||||||
|
function isWalletTypeAccepted(walletType, index) {
|
||||||
|
return (root.showAllWalletTypes || walletType !== Constants.watchWalletType)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
delegate: Rectangle {
|
delegate: Rectangle {
|
||||||
width: button.width
|
width: button.width
|
||||||
height: button.height
|
height: button.height
|
||||||
radius: 8
|
radius: 8
|
||||||
visible: floatingHeader.visibleIndices.includes(index) && walletType !== Constants.watchWalletType
|
visible: root.visibleIndices.includes(index) && d.isWalletTypeAccepted(walletType, index)
|
||||||
color: Theme.palette.baseColor3
|
color: Theme.palette.baseColor3
|
||||||
StatusButton {
|
StatusButton {
|
||||||
id: button
|
id: button
|
||||||
|
@ -47,10 +53,10 @@ StatusFloatingButtonsSelector {
|
||||||
icon.name: !emoji ? "filled-account": ""
|
icon.name: !emoji ? "filled-account": ""
|
||||||
normalColor: "transparent"
|
normalColor: "transparent"
|
||||||
hoverColor: Theme.palette.statusFloatingButtonHighlight
|
hoverColor: Theme.palette.statusFloatingButtonHighlight
|
||||||
highlighted: index === floatingHeader.currentIndex
|
highlighted: index === root.currentIndex
|
||||||
onClicked: {
|
onClicked: {
|
||||||
changeSelectedAccount(index)
|
changeSelectedAccount(model, index)
|
||||||
floatingHeader.currentIndex = index
|
root.currentIndex = index
|
||||||
}
|
}
|
||||||
Component.onCompleted: {
|
Component.onCompleted: {
|
||||||
// On startup make the preseected wallet in the floating menu,
|
// On startup make the preseected wallet in the floating menu,
|
||||||
|
@ -59,21 +65,21 @@ StatusFloatingButtonsSelector {
|
||||||
d.firstModelData = model
|
d.firstModelData = model
|
||||||
}
|
}
|
||||||
|
|
||||||
if(name !== floatingHeader.selectedAccount.name) {
|
if(name !== root.selectedAccount.name) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
if(name === floatingHeader.selectedAccount.name) {
|
if(name === root.selectedAccount.name) {
|
||||||
if(walletType !== Constants.watchWalletType) {
|
if(d.isWalletTypeAccepted(walletType, index)) {
|
||||||
// If the selected index wont be displayed, added it to the visible indices
|
// If the selected index wont be displayed, added it to the visible indices
|
||||||
if(index > 2) {
|
if(index > 2) {
|
||||||
visibleIndices = [0, 1, index]
|
visibleIndices = [0, 1, index]
|
||||||
}
|
}
|
||||||
floatingHeader.currentIndex = index
|
root.currentIndex = index
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
changeSelectedAccount(0)
|
changeSelectedAccount(root.selectedAccount, 0)
|
||||||
floatingHeader.currentIndex = 0
|
root.currentIndex = 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -90,10 +96,10 @@ StatusFloatingButtonsSelector {
|
||||||
asset.isLetterIdenticon: !!model.emoji
|
asset.isLetterIdenticon: !!model.emoji
|
||||||
asset.bgColor: Theme.palette.indirectColor1
|
asset.bgColor: Theme.palette.indirectColor1
|
||||||
onClicked: {
|
onClicked: {
|
||||||
changeSelectedAccount(index)
|
changeSelectedAccount(model, index)
|
||||||
floatingHeader.itemSelected(index)
|
root.itemSelected(index)
|
||||||
}
|
}
|
||||||
visible: !floatingHeader.visibleIndices.includes(index) && walletType !== Constants.watchWalletType
|
visible: !root.visibleIndices.includes(index) && d.isWalletTypeAccepted(walletType, index)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -160,12 +160,12 @@ StatusDialog {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
header: SendModalHeader {
|
header: AccountsModalHeader {
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.topMargin: -height - 18
|
anchors.topMargin: -height - 18
|
||||||
model: popup.store.accounts
|
model: popup.store.accounts
|
||||||
selectedAccount: popup.selectedAccount
|
selectedAccount: popup.selectedAccount
|
||||||
changeSelectedAccount: function(newIndex) {
|
changeSelectedAccount: function(newAccount, newIndex) {
|
||||||
if (newIndex > popup.store.accounts) {
|
if (newIndex > popup.store.accounts) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,3 +24,4 @@ ImportCommunityPopup 1.0 ImportCommunityPopup.qml
|
||||||
DisplayNamePopup 1.0 DisplayNamePopup.qml
|
DisplayNamePopup 1.0 DisplayNamePopup.qml
|
||||||
AddEditSavedAddressPopup 1.0 AddEditSavedAddressPopup.qml
|
AddEditSavedAddressPopup 1.0 AddEditSavedAddressPopup.qml
|
||||||
SendContactRequestModal 1.0 SendContactRequestModal.qml
|
SendContactRequestModal 1.0 SendContactRequestModal.qml
|
||||||
|
AccountsModalHeader 1.0 AccountsModalHeader.qml
|
Loading…
Reference in New Issue