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:
parent
52597472ed
commit
f2549fc1ff
|
@ -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"
|
||||
|
|
|
@ -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"}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -14,6 +14,8 @@ QtObject {
|
|||
'blue4': '#869EFF',
|
||||
'blue5': '#AAC6FF',
|
||||
'blue6': '#ECEFFC',
|
||||
'blue7': '#09101C',
|
||||
'blue8': '#6B6F76',
|
||||
|
||||
'brown': '#8B3131',
|
||||
'brown2': '#9B832F',
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -58,6 +58,8 @@ ThemePalette {
|
|||
miscColor11: getColor('brown2')
|
||||
miscColor12: getColor('green5')
|
||||
|
||||
dropShadow2: getColor('blue7', 0.02)
|
||||
|
||||
statusFloatingButtonHighlight: getColor('blueHijab')
|
||||
|
||||
statusLoadingHighlight: getColor('lightPattensBlue', 0.5)
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -88,7 +88,7 @@ Item {
|
|||
RootStore.switchAccount(newIndex)
|
||||
|
||||
}
|
||||
showSavedAddresses: function(showSavedAddresses) {
|
||||
onShowSavedAddressesChanged: {
|
||||
if(showSavedAddresses)
|
||||
rightPanelStackView.replace(cmpSavedAddresses)
|
||||
else
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue