fix(Wallet/LeftTabView): style fixes
Align the Wallet left section navigation bar to the design Fixes #6479 Fixes #6480 - simplify using layouts - fix margins/spacing - fix font sizes and weights
This commit is contained in:
Lukáš Tinkl
Lukáš Tinkl
parent
eb05eb8044
commit
024843b8b8
|
|
@ -17,140 +17,132 @@ import "../popups"
|
|||
import "../stores"
|
||||
|
||||
Rectangle {
|
||||
id: walletInfoContainer
|
||||
id: root
|
||||
|
||||
property var changeSelectedAccount: function(){}
|
||||
property var showSavedAddresses: function(showSavedAddresses){}
|
||||
property var emojiPopup: null
|
||||
|
||||
function onAfterAddAccount () {
|
||||
walletInfoContainer.changeSelectedAccount(RootStore.accounts.rowCount() - 1)
|
||||
root.changeSelectedAccount(RootStore.accounts.rowCount() - 1)
|
||||
}
|
||||
|
||||
color: Style.current.secondaryMenuBackground
|
||||
|
||||
StyledText {
|
||||
id: title
|
||||
text: qsTr("Wallet")
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
font.weight: Font.Bold
|
||||
font.pixelSize: 17
|
||||
}
|
||||
|
||||
Item {
|
||||
id: walletValueTextContainer
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.padding
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.current.padding
|
||||
anchors.top: title.bottom
|
||||
anchors.topMargin: Style.current.padding
|
||||
height: childrenRect.height
|
||||
|
||||
StyledTextEdit {
|
||||
id: walletAmountValue
|
||||
color: Style.current.textColor
|
||||
text: {
|
||||
Utils.toLocaleString(parseFloat(RootStore.totalCurrencyBalance).toFixed(2), localAppSettings.locale, {"currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
|
||||
}
|
||||
selectByMouse: true
|
||||
cursorVisible: true
|
||||
readOnly: true
|
||||
anchors.left: parent.left
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 30
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: totalValue
|
||||
color: Style.current.secondaryText
|
||||
text: qsTr("Total value")
|
||||
anchors.left: walletAmountValue.left
|
||||
anchors.top: walletAmountValue.bottom
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 13
|
||||
}
|
||||
}
|
||||
|
||||
AddAccountModal {
|
||||
id: addAccountModal
|
||||
anchors.centerIn: parent
|
||||
onAfterAddAccount: walletInfoContainer.onAfterAddAccount()
|
||||
emojiPopup: walletInfoContainer.emojiPopup
|
||||
onAfterAddAccount: root.onAfterAddAccount()
|
||||
emojiPopup: root.emojiPopup
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: btnSavedAddresses.height + Style.current.padding
|
||||
anchors.top: walletValueTextContainer.bottom
|
||||
anchors.topMargin: Style.current.padding
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
width: 272
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
ScrollBar.vertical.policy: listView.contentHeight > listView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
|
||||
clip: true
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: Style.current.padding
|
||||
anchors.bottomMargin: Style.current.smallPadding
|
||||
spacing: Style.current.padding
|
||||
|
||||
ListView {
|
||||
id: listView
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
text: qsTr("Wallet")
|
||||
font.weight: Font.Bold
|
||||
font.pixelSize: 17
|
||||
}
|
||||
|
||||
spacing: 5
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
Item {
|
||||
height: childrenRect.height
|
||||
Layout.fillWidth: true
|
||||
|
||||
StyledTextEdit {
|
||||
id: walletAmountValue
|
||||
color: Style.current.textColor
|
||||
text: {
|
||||
Utils.toLocaleString(parseFloat(RootStore.totalCurrencyBalance).toFixed(2), localAppSettings.locale, {"currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
|
||||
}
|
||||
selectByMouse: true
|
||||
cursorVisible: true
|
||||
readOnly: true
|
||||
width: parent.width
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 22
|
||||
}
|
||||
|
||||
StyledText {
|
||||
id: totalValue
|
||||
color: Style.current.secondaryText
|
||||
text: qsTr("Total value")
|
||||
width: parent.width
|
||||
anchors.top: walletAmountValue.bottom
|
||||
anchors.topMargin: 4
|
||||
font.pixelSize: 12
|
||||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: Style.current.halfPadding
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
ScrollBar.vertical.policy: listView.contentHeight > listView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
|
||||
clip: true
|
||||
|
||||
delegate: StatusListItem {
|
||||
width: parent.width
|
||||
highlighted: RootStore.currentAccount.name === model.name
|
||||
title: model.name
|
||||
subTitle: Utils.toLocaleString(model.currencyBalance.toFixed(2), RootStore.locale, {"model.currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
|
||||
icon.emoji: !!model.emoji ? model.emoji: ""
|
||||
icon.color: model.color
|
||||
icon.name: !model.emoji ? "filled-account": ""
|
||||
icon.letterSize: 14
|
||||
icon.isLetterIdenticon: !!model.emoji ? true : false
|
||||
icon.background.color: Theme.palette.primaryColor3
|
||||
onClicked: {
|
||||
changeSelectedAccount(index)
|
||||
showSavedAddresses(false)
|
||||
}
|
||||
}
|
||||
ListView {
|
||||
id: listView
|
||||
|
||||
footer: Item {
|
||||
spacing: Style.current.smallPadding
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
height: addAccountBtn.height + Style.current.xlPadding
|
||||
StatusButton {
|
||||
id: addAccountBtn
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.margins: Style.current.bigPadding
|
||||
text: qsTr("Add account")
|
||||
onClicked: addAccountModal.open()
|
||||
}
|
||||
}
|
||||
height: parent.height
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
clip: true
|
||||
|
||||
model: RootStore.accounts
|
||||
// model: RootStore.exampleWalletModel
|
||||
delegate: StatusListItem {
|
||||
width: ListView.view.width
|
||||
highlighted: RootStore.currentAccount.name === model.name
|
||||
title: model.name
|
||||
subTitle: Utils.toLocaleString(model.currencyBalance.toFixed(2), RootStore.locale, {"model.currency": true}) + " " + RootStore.currentCurrency.toUpperCase()
|
||||
icon.emoji: !!model.emoji ? model.emoji: ""
|
||||
icon.color: model.color
|
||||
icon.name: !model.emoji ? "filled-account": ""
|
||||
icon.letterSize: 14
|
||||
icon.isLetterIdenticon: !!model.emoji ? true : false
|
||||
icon.background.color: Theme.palette.primaryColor3
|
||||
statusListItemTitle.font.weight: Font.Medium
|
||||
onClicked: {
|
||||
changeSelectedAccount(index)
|
||||
showSavedAddresses(false)
|
||||
}
|
||||
}
|
||||
|
||||
footer: Item {
|
||||
width: ListView.view.width
|
||||
height: addAccountBtn.height + Style.current.xlPadding
|
||||
StatusButton {
|
||||
id: addAccountBtn
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.margins: Style.current.bigPadding
|
||||
text: qsTr("Add account")
|
||||
onClicked: addAccountModal.open()
|
||||
}
|
||||
}
|
||||
|
||||
model: RootStore.accounts
|
||||
// model: RootStore.exampleWalletModel
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusNavigationListItem {
|
||||
id: btnSavedAddresses
|
||||
Item { Layout.fillHeight: true }
|
||||
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: Style.current.halfPadding
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Style.current.smallPadding
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Style.current.smallPadding
|
||||
|
||||
title: qsTr("Saved addresses")
|
||||
icon.name: "address"
|
||||
onClicked: {
|
||||
showSavedAddresses(true)
|
||||
StatusButton {
|
||||
size: StatusBaseButton.Size.Small
|
||||
topPadding: Style.current.halfPadding
|
||||
bottomPadding: Style.current.halfPadding
|
||||
normalColor: "transparent"
|
||||
hoverColor: Theme.palette.primaryColor3
|
||||
font.weight: Font.Medium
|
||||
text: qsTr("Saved addresses")
|
||||
icon.name: "address"
|
||||
onClicked: showSavedAddresses(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue