status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(@desktop/wallet): update wallet navigation 

Fixed StatusBaseButton to expose a property to load either normal
icon or a round one.
Implemented new wallet navigation according to design in Figma.
Fixed regression: small accounts icons in accounts list view.
Updated wallet test.

Fixes #8598
This commit is contained in:
Ivan Belyakov 2023-01-05 15:50:55 +03:00 committed by Anthony Laibe
parent 52597472ed
commit f2549fc1ff
9 changed files with 217 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
test/ui-test/src/screens/StatusWalletScreen.py
View File

@ -14,7 +14,7 @@ class SigningPhrasePopUp(Enum):
OK_GOT_IT_BUTTON: str = "signPhrase_Ok_Button"
class MainWalletScreen(Enum):
ADD_ACCOUNT_BUTTON: str = "mainWallet_Add_Account"
ADD_ACCOUNT_BUTTON: str = "mainWallet_Add_Account_Button"
ACCOUNT_NAME: str = "mainWallet_Account_Name"
ACCOUNT_ADDRESS_PANEL: str = "mainWallet_Address_Panel"
SEND_BUTTON_FOOTER: str = "mainWallet_Footer_Send_Button"

2
test/ui-test/testSuites/suite_wallet/shared/scripts/wallet_names.py
View File

@ -5,7 +5,7 @@ navBarListView_Wallet_navbar_StatusNavBarTabButton = {"checkable": True, "contai
wallet_navbar_wallet_icon_StatusIcon = {"container": navBarListView_Wallet_navbar_StatusNavBarTabButton, "objectName": "wallet-icon", "type": "StatusIcon", "visible": True}
mainWallet_Account_Name = {"container": statusDesktop_mainWindow, "objectName": "accountName", "type": "StatusBaseText", "visible": True}
mainWallet_Address_Panel = {"container": statusDesktop_mainWindow, "objectName": "addressPanel", "type": "StatusAddressPanel", "visible": True}
mainWallet_Add_Account = {"container": statusDesktop_mainWindow, "text": "Add account", "type": "StatusBaseText", "unnamed": 1, "visible": True}
mainWallet_Add_Account_Button = {"container": statusDesktop_mainWindow, "objectName": "addAccountButton", "type": "StatusRoundButton", "visible": True}
signPhrase_Ok_Button = {"container": statusDesktop_mainWindow, "type": "StatusFlatButton", "objectName": "signPhraseModalOkButton", "visible": True}
mainWallet_Saved_Addresses_Button = {"container": statusDesktop_mainWindow, "objectName": "savedAddressesBtn", "type": "StatusButton"}
mainWallet_Network_Selector_Button = {"container": statusDesktop_mainWindow, "objectName": "networkSelectorButton", "type": "StatusListItem"}

36
ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml
View File

@ -33,12 +33,16 @@ Button {
property color textColor
property color disabledTextColor
property color borderColor: "transparent"
property int textAlignment: Qt.AlignVCenter | Qt.AlignHCenter
property bool textFillWidth: false
property int radius: size === StatusBaseButton.Size.Tiny ? 6 : 8
property int size: StatusBaseButton.Size.Large
property int type: StatusBaseButton.Type.Normal
property bool isRoundIcon: false
QtObject {
id: d
readonly property color textColor: root.enabled || root.loading ? root.textColor : root.disabledTextColor
@ -84,15 +88,36 @@ Button {
contentItem: RowLayout {
spacing: root.spacing
Component {
id: baseIcon
StatusIcon {
Layout.preferredWidth: visible ? root.icon.width : 0
Layout.preferredHeight: visible ? root.icon.height : 0
icon: root.icon.name
rotation: root.asset.rotation
opacity: !loading && root.icon.name !== ""
visible: root.icon.name !== ""
opacity: !root.loading && root.icon.name !== ""
color: root.icon.color
}
}
Component {
id: roundIcon
StatusRoundIcon {
asset.name: root.icon.name
asset.color: root.asset.color
asset.bgColor: root.asset.bgColor
}
}
Loader {
id: iconLoader
Layout.preferredWidth: active ? root.icon.width : 0
Layout.preferredHeight: active ? root.icon.height : 0
active: root.icon.name !== ""
sourceComponent: root.isRoundIcon ? roundIcon : baseIcon
}
StatusEmoji {
Layout.preferredWidth: visible ? root.icon.width : 0
Layout.preferredHeight: visible ? root.icon.height : 0
@ -100,7 +125,8 @@ Button {
emojiId: Emoji.iconId(root.asset.emoji, root.asset.emojiSize) || ""
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Layout.alignment: root.textAlignment
Layout.fillWidth: root.textFillWidth
opacity: !loading
font: root.font
text: root.text

2
ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml
View File

@ -14,6 +14,8 @@ QtObject {
'blue4': '#869EFF',
'blue5': '#AAC6FF',
'blue6': '#ECEFFC',
'blue7': '#09101C',
'blue8': '#6B6F76',
'brown': '#8B3131',
'brown2': '#9B832F',

2
ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml
View File

@ -60,6 +60,8 @@ ThemePalette {
miscColor11: getColor('yellow2')
miscColor12: getColor('green6')
dropShadow2: getColor('blue8', 0.02)
statusFloatingButtonHighlight: getColor('blue4', 0.3)
statusLoadingHighlight: getColor('white', 0.03)

2
ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml
View File

@ -58,6 +58,8 @@ ThemePalette {
miscColor11: getColor('brown2')
miscColor12: getColor('green5')
dropShadow2: getColor('blue7', 0.02)
statusFloatingButtonHighlight: getColor('blueHijab')
statusLoadingHighlight: getColor('lightPattensBlue', 0.5)

1
ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml
View File

@ -104,6 +104,7 @@ QtObject {
property color white: getColor('white')
property color dropShadow: getColor('black', 0.12)
property color dropShadow2
property color backdropColor: getColor('black', 0.4)
function hoverColor(normalColor) {

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

@ -88,7 +88,7 @@ Item {
RootStore.switchAccount(newIndex)
}
showSavedAddresses: function(showSavedAddresses) {
onShowSavedAddressesChanged: {
if(showSavedAddresses)
rightPanelStackView.replace(cmpSavedAddresses)
else

148
ui/app/AppLayouts/Wallet/views/LeftTabView.qml
View File

@ -7,6 +7,7 @@ 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
@ -22,7 +23,11 @@ Rectangle {
id: root
property var changeSelectedAccount: function(){}
property var showSavedAddresses: function(showSavedAddresses){}
property bool showSavedAddresses: false
onShowSavedAddressesChanged: {
walletAccountsListView.footerItem.button.highlighted = showSavedAddresses
}
property var emojiPopup: null
function onAfterAddAccount () {
@ -62,20 +67,41 @@ Rectangle {
ColumnLayout {
anchors.fill: parent
anchors.margins: Style.current.padding
anchors.bottomMargin: Style.current.smallPadding
spacing: Style.current.padding
StyledText {
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
StyledTextEdit {
id: walletAmountValue
@ -92,9 +118,9 @@ Rectangle {
font.pixelSize: 22
}
StyledText {
StatusBaseText {
id: totalValue
color: Style.current.secondaryText
color: Theme.palette.baseColor1
text: qsTr("Total value")
width: parent.width
anchors.top: walletAmountValue.bottom
@ -104,6 +130,8 @@ Rectangle {
}
StatusListView {
id: walletAccountsListView
objectName: "walletAccountsListView"
spacing: Style.current.smallPadding
Layout.fillWidth: true
@ -112,15 +140,21 @@ Rectangle {
// ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
readonly property Item firstItem: count > 0 ? itemAtIndex(0) : null
delegate: StatusListItem {
objectName: "walletAccountItem"
width: ListView.view.width
highlighted: RootStore.currentAccount.name === model.name
width: ListView.view.width - Style.current.padding * 2
highlighted: !ListView.view.footerItem.button.highlighted &&
RootStore.currentAccount.name === model.name
anchors.horizontalCenter: parent.horizontalCenter
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
@ -128,41 +162,87 @@ Rectangle {
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
onClicked: {
changeSelectedAccount(index)
showSavedAddresses(false)
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
}
}
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
font.pixelSize: 15
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
icon.name: "add"
text: qsTr("Add account")
onClicked: addAccountModal.open()
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
}
StatusButton {
objectName: "savedAddressesBtn"
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)
}
}
}