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(WalletHeader): align wallet section header with design 

Closes #6484: Account header is different from design

Closes #6485: Account layout needs margins adjusted to match design
This commit is contained in:
Lukáš Tinkl 2022-07-19 15:17:35 +02:00 committed by Lukáš Tinkl
parent 8bddc64671
commit 7e243da180
3 changed files with 108 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/app/AppLayouts/Wallet/WalletLayout.qml
View File

@ -101,6 +101,9 @@ Item {
rightPanel: StackView {
id: rightPanelStackView
anchors.fill: parent
anchors.topMargin: 49
anchors.leftMargin: 49
anchors.rightMargin: 49
initialItem: walletContainer
replaceEnter: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 400; easing.type: Easing.OutCubic }

123
ui/app/AppLayouts/Wallet/panels/WalletHeader.qml
View File

@ -2,80 +2,93 @@ import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import utils 1.0
import shared 1.0
import shared.panels 1.0
import shared.popups 1.0
import shared.status 1.0
import "../popups"
import "../controls"
import "../stores"
Item {
id: walletHeader
id: root
property string locale: ""
property string currency: ""
property var currentAccount
property var changeSelectedAccount
property var store
property var walletStore
property var emojiPopup
height: walletAddress.y + walletAddress.height
implicitHeight: childrenRect.height
StyledText {
id: title
text: currentAccount.name
anchors.top: parent.top
anchors.topMargin: 56
anchors.left: parent.left
anchors.leftMargin: 24
font.weight: Font.Medium
font.pixelSize: 28
}
GridLayout {
width: parent.width
rowSpacing: Style.current.halfPadding
columns: 2
Rectangle {
id: separatorDot
width: 8
height: 8
color: Style.current.primary
anchors.top: title.verticalCenter
anchors.topMargin: -3
anchors.left: title.right
anchors.leftMargin: 8
radius: 50
}
StyledText {
id: walletBalance
text: {
Utils.toLocaleString(currentAccount.currencyBalance.toFixed(2), locale, {"currency": true}) + " " + walletHeader.currency.toUpperCase()
// account + balance
Row {
spacing: Style.current.halfPadding
StatusBaseText {
font.pixelSize: 28
font.bold: true
text: currentAccount.name
}
StatusBaseText {
font.pixelSize: 28
font.bold: true
color: Theme.palette.baseColor1
text: "%1 %2".arg(Utils.toLocaleString(root.currentAccount.currencyBalance.toFixed(2), root.locale, {"currency": true})).arg(root.currency.toUpperCase())
}
}
anchors.left: separatorDot.right
anchors.leftMargin: 8
anchors.verticalCenter: title.verticalCenter
font.pixelSize: 22
}
StatusExpandableAddress {
id: walletAddress
address: currentAccount.mixedcaseAddress
anchors.top: title.bottom
anchors.left: title.left
addressWidth: 180
anchors.leftMargin: 0
anchors.topMargin: 0
store: walletHeader.store
}
// network filter
NetworkFilter {
id: networkFilter
Layout.alignment: Qt.AlignTrailing
Layout.fillHeight: true
Layout.rowSpan: 2
store: root.walletStore
}
NetworkFilter {
id: networkFilter
anchors.top: parent.top
anchors.topMargin: 56
anchors.right: parent.right
anchors.rightMargin: 63
store: walletHeader.walletStore
// account address button
Button {
horizontalPadding: Style.current.halfPadding
verticalPadding: 5
Layout.preferredWidth: 150
background: Rectangle {
implicitWidth: 150
implicitHeight: 32
color: "transparent"
border.width: 1
border.color: Theme.palette.baseColor2
radius: 36
}
contentItem: RowLayout {
spacing: 4
StatusIcon {
Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: 22
Layout.preferredHeight: 22
icon: "address"
color: Theme.palette.baseColor2
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true
text: currentAccount.mixedcaseAddress
color: Theme.palette.directColor5
elide: Text.ElideMiddle
font.pixelSize: Style.current.primaryTextFontSize
font.weight: Font.Medium
}
}
onClicked: store.copyToClipboard(currentAccount.mixedcaseAddress)
}
}
}
}

93
ui/app/AppLayouts/Wallet/views/RightTabView.qml
View File

@ -1,7 +1,6 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtGraphicalEffects 1.13
import StatusQ.Controls 0.1
@ -17,86 +16,68 @@ import "../views"
import "../panels"
Item {
id: walletContainer
id: root
property alias currentTabIndex: walletTabBar.currentIndex
property var store
property var sendModal
ColumnLayout {
width: parent.width
height: parent.height
anchors.fill: parent
WalletHeader {
id: walletHeader
Layout.fillWidth: true
Layout.leftMargin: Style.current.padding
Layout.rightMargin: Style.current.padding
locale: RootStore.locale
currency: RootStore.currentCurrency
currentAccount: RootStore.currentAccount
store: walletContainer.store
store: root.store
walletStore: RootStore
}
Item {
id: walletInfoContent
Layout.fillHeight: true
StatusTabBar {
id: walletTabBar
horizontalPadding: Style.current.padding
Layout.fillWidth: true
Layout.topMargin: Style.current.padding
StatusTabBar {
id: walletTabBar
anchors.right: parent.right
anchors.rightMargin: Style.current.bigPadding
anchors.left: parent.left
anchors.leftMargin: Style.current.bigPadding
anchors.top: parent.top
anchors.topMargin: Style.current.padding
StatusTabButton {
id: assetBtn
width: implicitWidth
text: qsTr("Assets")
}
StatusTabButton {
id: collectiblesBtn
width: implicitWidth
text: qsTr("Collectibles")
}
StatusTabButton {
id: historyBtn
width: implicitWidth
text: qsTr("History")
}
StatusTabButton {
leftPadding: 0
width: implicitWidth
text: qsTr("Assets")
}
StatusTabButton {
width: implicitWidth
text: qsTr("Collectibles")
}
StatusTabButton {
rightPadding: 0
width: implicitWidth
text: qsTr("Activity")
}
}
StackLayout {
id: stackLayout
anchors.rightMargin: Style.current.bigPadding
anchors.leftMargin: Style.current.bigPadding
anchors.top: walletTabBar.bottom
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.topMargin: Style.current.bigPadding
currentIndex: walletTabBar.currentIndex
StackLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.margins: Style.current.padding
currentIndex: walletTabBar.currentIndex
AssetsView {
id: assetsTab
account: RootStore.currentAccount
}
CollectiblesView {
id: collectiblesTab
}
HistoryView {
id: historyTab
account: RootStore.currentAccount
}
AssetsView {
account: RootStore.currentAccount
}
CollectiblesView {}
HistoryView {
account: RootStore.currentAccount
}
}
WalletFooter {
id: walletFooter
Layout.fillWidth: true
sendModal: walletContainer.sendModal
Layout.leftMargin: -root.StackView.view.anchors.leftMargin
Layout.rightMargin: -root.StackView.view.anchors.rightMargin
sendModal: root.sendModal
}
}
}