status-desktop/ui/app/AppLayouts/Wallet/views/LeftTabView.qml

251 lines
8.5 KiB
QML

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Popups 0.1
import utils 1.0
import shared 1.0
import shared.panels 1.0
import shared.controls 1.0
import shared.popups.keycard 1.0
import "../controls"
import "../popups"
import "../stores"
Rectangle {
id: root
property var changeSelectedAccount: function(){}
property bool showSavedAddresses: false
onShowSavedAddressesChanged: {
walletAccountsListView.footerItem.button.highlighted = showSavedAddresses
}
property var emojiPopup: null
function onAfterAddAccount () {
root.changeSelectedAccount(RootStore.accounts.rowCount() - 1)
}
color: Style.current.secondaryMenuBackground
Loader {
id: addAccountModal
active: false
asynchronous: true
function open() {
if (!active) {
RootStore.createSharedKeycardModule()
active = true
}
item.open()
}
function close() {
if (item) {
RootStore.destroySharedKeycarModule()
item.close()
}
active = false
}
sourceComponent: AddAccountModal {
anchors.centerIn: parent
onAfterAddAccount: root.onAfterAddAccount()
emojiPopup: root.emojiPopup
onClosed: addAccountModal.close()
}
}
ColumnLayout {
anchors.fill: parent
spacing: Style.current.padding
Item {
Layout.fillWidth: true
Layout.preferredHeight: walletTitleText.height
Layout.leftMargin: Style.current.padding
Layout.rightMargin: Style.current.padding
Layout.topMargin: Style.current.padding
StatusBaseText {
id: walletTitleText
text: qsTr("Wallet")
font.weight: Font.Bold
font.pixelSize: 17
color: Theme.palette.directColor1
}
StatusRoundButton {
objectName: "addAccountButton"
icon.name: "add-circle"
anchors.right: parent.right
anchors.rightMargin: -Style.current.smallPadding
anchors.verticalCenter: parent.verticalCenter
width: height
height: parent.height * 2
color: hovered || highlighted ? Theme.palette.primaryColor3
: "transparent"
onClicked: addAccountModal.open()
}
}
Item {
height: childrenRect.height
Layout.fillWidth: true
Layout.leftMargin: Style.current.padding
StyledTextEditWithLoadingState {
id: walletAmountValue
objectName: "walletLeftListAmountValue"
customColor: Style.current.textColor
text: {
LocaleUtils.currencyAmountToLocaleString(RootStore.totalCurrencyBalance)
}
selectByMouse: true
cursorVisible: true
readOnly: true
width: parent.width
font.weight: Font.Medium
font.pixelSize: 22
loading: RootStore.tokensLoading
}
StatusBaseText {
id: totalValue
color: Theme.palette.baseColor1
text: qsTr("Total value")
width: parent.width
anchors.top: walletAmountValue.bottom
anchors.topMargin: 4
font.pixelSize: 12
}
}
StatusListView {
id: walletAccountsListView
objectName: "walletAccountsListView"
spacing: Style.current.smallPadding
Layout.fillWidth: true
Layout.fillHeight: true
Layout.topMargin: Style.current.halfPadding
// ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
readonly property Item firstItem: count > 0 ? itemAtIndex(0) : null
delegate: StatusListItem {
objectName: "walletAccountItem"
width: ListView.view.width - Style.current.padding * 2
highlighted: !ListView.view.footerItem.button.highlighted &&
RootStore.currentAccount.name === model.name
anchors.horizontalCenter: !!parent ? parent.horizontalCenter : undefined
title: model.name
subTitle: LocaleUtils.currencyAmountToLocaleString(model.currencyBalance)
asset.emoji: !!model.emoji ? model.emoji: ""
asset.color: model.color
asset.name: !model.emoji ? "filled-account": ""
asset.width: 40
asset.height: 40
asset.letterSize: 14
asset.isLetterIdenticon: !!model.emoji ? true : false
asset.bgColor: Theme.palette.primaryColor3
statusListItemTitle.font.weight: Font.Medium
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
statusListItemSubTitle.loading: RootStore.tokensLoading
onClicked: {
changeSelectedAccount(index)
showSavedAddresses = false
}
components: [
StatusIcon {
icon: {
if (model.walletType == "watch")
return "show"
else if (model.walletType == "key")
return "keycard"
return ""
}
color: Theme.palette.directColor1
width: 15
height: 15
}
]
}
readonly property bool footerOverlayed: contentHeight > availableHeight
footerPositioning: footerOverlayed ? ListView.OverlayFooter : ListView.InlineFooter
footer: Control {
id: footer
z: 2 // to be on top of delegates when in ListView.OverlayFooter
horizontalPadding: Style.current.padding
verticalPadding: Style.current.padding
property alias button: savedAddressesBtn
background: Rectangle {
color: root.color
implicitWidth: root.width
implicitHeight: parent.ListView.view.firstItem.height + Style.current.xlPadding
layer.enabled: parent.ListView.view.footerOverlayed
layer.effect: DropShadow {
verticalOffset: -10
radius: 20
samples: 41
fast: true
cached: true
color: Theme.palette.dropShadow2
}
StatusMenuSeparator {
id: footerSeparator
width: parent.width
visible: !footer.ListView.view.footerOverlayed
}
}
contentItem: StatusButton {
id: savedAddressesBtn
objectName: "savedAddressesBtn"
size: StatusBaseButton.Size.Large
normalColor: "transparent"
hoverColor: Theme.palette.primaryColor3
asset.color: Theme.palette.primaryColor1
asset.bgColor: Theme.palette.primaryColor3
font.weight: Font.Medium
text: qsTr("Saved addresses")
icon.name: "address"
icon.width: 40
icon.height: 40
isRoundIcon: true
textColor: Theme.palette.directColor1
textAlignment: Qt.AlignVCenter | Qt.AlignLeft
textFillWidth: true
spacing: parent.ListView.view.firstItem.statusListItemTitleArea.anchors.leftMargin
onClicked: {
showSavedAddresses = true
}
}
}
model: RootStore.accounts
// model: RootStore.exampleWalletModel
}
}
}