fix(@desktop/wallet): Update wallet accounts list effects (#11680)

fixes #11626

ui/app/AppLayouts/Wallet/views/LeftTabView.qml

@@ -1,5 +1,5 @@
-import QtQuick 2.13
+import QtQuick 2.15
-import QtQuick.Controls 2.13
+import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 import SortFilterProxyModel 0.2
@@ -33,17 +33,26 @@ Rectangle {
     property bool showSavedAddresses: false
     property bool showAllAccounts: true
     property string currentAddress: ""
+
+    onCurrentAddressChanged: {
+        if (!currentAddress)
+            return
+        root.showAllAccounts = false
+        root.showSavedAddresses = false
+    }
     
     onShowSavedAddressesChanged: {
+        if (!showSavedAddresses)
+            return
         root.currentAddress = ""
-        walletAccountsListView.headerItem.highlighted = root.showAllAccounts
+        root.showAllAccounts = false
-        walletAccountsListView.footerItem.button.highlighted = root.showSavedAddresses
     }
 
     onShowAllAccountsChanged: {
+        if (!showAllAccounts)
+            return
         root.currentAddress = ""
-        walletAccountsListView.headerItem.highlighted = root.showAllAccounts
+        root.showSavedAddresses = false
-        walletAccountsListView.footerItem.button.highlighted = root.showSavedAddresses
     }
 
     property var emojiPopup: null
@@ -160,7 +169,7 @@ Rectangle {
 
     ColumnLayout {
         anchors.fill: parent
-        spacing: Style.current.padding
+        spacing: 0
 
         Item {
             Layout.fillWidth: true
@@ -172,9 +181,7 @@ Rectangle {
             MouseArea {
                 anchors.fill: parent
                 acceptedButtons: Qt.RightButton
-                onClicked: {
+                onClicked: mouse.accepted = true
-                    mouse.accepted = true
-                }
             }
 
             StatusBaseText {
@@ -199,169 +206,189 @@ Rectangle {
             }
         }
 
-        StatusListView {
+        Rectangle {
-            id: walletAccountsListView
-
-            objectName: "walletAccountsListView"
-            spacing: Style.current.smallPadding
             Layout.fillWidth: true
+            Layout.minimumHeight: Style.current.bigPadding
+            color: root.color
+            z: 2
+
+            layer.enabled: !walletAccountsListView.atYBeginning
+            layer.effect: DropShadow {
+                verticalOffset: 10
+                radius: 20
+                samples: 41
+                fast: true
+                cached: true
+                color: Theme.palette.dropShadow2
+            }
+        }
+
+        Item {
             Layout.fillHeight: true
-            Layout.topMargin: Style.current.halfPadding
+            Layout.fillWidth: true
-            currentIndex: -1
-            highlightRangeMode: ListView.ApplyRange
-            preferredHighlightBegin: 0
-            preferredHighlightEnd: height - (footerOverlayed ? footerItem.height : 0)
 
-            readonly property Item firstItem: count > 0 ? itemAtIndex(0) : null
+            StatusListView {
-
+                id: walletAccountsListView
-            delegate: StatusListItem {
+                objectName: "walletAccountsListView"
-                objectName: "walletAccount-" + model.name
+                anchors {
-                readonly property bool itemLoaded: !model.assetsLoading // needed for e2e tests
+                    top: parent.top
-                width: ListView.view.width - Style.current.padding * 2
+                    left: parent.left
-                highlighted: root.currentAddress.toLowerCase() === model.address.toLowerCase()
+                    right: parent.right
-                onHighlightedChanged: {
-                    if (highlighted)
-                        ListView.view.currentIndex = index
                 }
-                anchors.horizontalCenter: !!parent ? parent.horizontalCenter : undefined
+                height: parent.height - footer.height
-                title: model.name
+
-                subTitle: LocaleUtils.currencyAmountToLocaleString(model.currencyBalance)
+                spacing: Style.current.smallPadding
-                asset.emoji: !!model.emoji ? model.emoji: ""
+                currentIndex: -1
-                asset.color: Utils.getColorForId(model.colorId)
+                highlightRangeMode: ListView.ApplyRange
-                asset.name: !model.emoji ? "filled-account": ""
+                preferredHighlightBegin: 0
-                asset.width: 40
+                preferredHighlightEnd: height
-                asset.height: 40
+                bottomMargin: Style.current.padding
-                asset.letterSize: 14
+
-                asset.isLetterIdenticon: !!model.emoji ? true : false
+                readonly property Item firstItem: count > 0 ? itemAtIndex(0) : null
-                asset.bgColor: Theme.palette.primaryColor3
+                readonly property bool footerOverlayed: contentHeight > availableHeight
-                statusListItemTitle.font.weight: Font.Medium
+
-                color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
+                delegate: StatusListItem {
-                statusListItemSubTitle.loading: !!model.assetsLoading
+                    objectName: "walletAccount-" + model.name
-                errorMode: networkConnectionStore.accountBalanceNotAvailable
+                    readonly property bool itemLoaded: !model.assetsLoading // needed for e2e tests
-                errorIcon.tooltip.maxWidth: 300
+                    width: ListView.view.width - Style.current.padding * 2
-                errorIcon.tooltip.text: networkConnectionStore.accountBalanceNotAvailableText
+                    highlighted: root.currentAddress.toLowerCase() === model.address.toLowerCase()
-                onClicked: {
+                    onHighlightedChanged: {
-                    if (mouse.button === Qt.RightButton) {
+                        if (highlighted)
-                        walletAccountContextMenu.active = true
+                            ListView.view.currentIndex = index
-                        walletAccountContextMenu.item.account = model
-                        walletAccountContextMenu.item.popup(this, mouse.x, mouse.y)
-                        return
                     }
-                    root.showSavedAddresses = false
+                    anchors.horizontalCenter: !!parent ? parent.horizontalCenter : undefined
-                    root.showAllAccounts = false
+                    title: model.name
-                    changeSelectedAccount(model.address)
+                    subTitle: LocaleUtils.currencyAmountToLocaleString(model.currencyBalance)
-                }
+                    asset.emoji: !!model.emoji ? model.emoji: ""
-                components: [
+                    asset.color: Utils.getColorForId(model.colorId)
-                    StatusIcon {
+                    asset.name: !model.emoji ? "filled-account": ""
-                        width: !!icon ? 15: 0
+                    asset.width: 40
-                        height: !!icon ? 15: 0
+                    asset.height: 40
-                        color: Theme.palette.directColor1
+                    asset.letterSize: 14
-                        icon: model.walletType === Constants.watchWalletType ? "show" : ""
+                    asset.isLetterIdenticon: !!model.emoji ? true : false
-                    },
+                    asset.bgColor: Theme.palette.primaryColor3
-                    StatusIcon {
+                    statusListItemTitle.font.weight: Font.Medium
-                        width: !!icon ? 15: 0
+                    color: sensor.containsMouse || highlighted ? Theme.palette.baseColor3 : "transparent"
-                        height: !!icon ? 15: 0
+                    statusListItemSubTitle.loading: !!model.assetsLoading
-                        color: Theme.palette.directColor1
+                    errorMode: networkConnectionStore.accountBalanceNotAvailable
-                        icon: model.keycardAccount ? "keycard" : ""
+                    errorIcon.tooltip.maxWidth: 300
-                    }
+                    errorIcon.tooltip.text: networkConnectionStore.accountBalanceNotAvailableText
-                ]
+                    onClicked: {
-            }
+                        if (mouse.button === Qt.RightButton) {
-
+                            walletAccountContextMenu.active = true
-            readonly property bool footerOverlayed: contentHeight > availableHeight
+                            walletAccountContextMenu.item.account = model
-
+                            walletAccountContextMenu.item.popup(this, mouse.x, mouse.y)
-            header: Button {
+                            return
-                id: header
-                verticalPadding: Style.current.padding
-                horizontalPadding: Style.current.padding
-                highlighted: true
-                objectName: "allAccountsBtn"
-                
-                leftInset: Style.current.padding
-                bottomInset: Style.current.padding
-
-                background: Rectangle {
-                    MouseArea {
-                        id: mouseArea
-                        anchors.fill: parent
-                        acceptedButtons: Qt.LeftButton
-                        cursorShape: Qt.PointingHandCursor
-                        onClicked: {
-                            root.showSavedAddresses = false
-                            walletAccountsListView.currentIndex = -1
-                            root.selectAllAccounts()
                         }
-                        hoverEnabled: true
+                        changeSelectedAccount(model.address)
                     }
-                    radius: Style.current.radius
+                    components: [
-                    color: header.highlighted || mouseArea.containsMouse ? Theme.palette.baseColor3 : root.color
+                        StatusIcon {
-                    implicitWidth: parent.ListView.view.width - Style.current.padding * 2
+                            width: !!icon ? 15: 0
-                    implicitHeight: parent.ListView.view.firstItem.height + Style.current.padding
+                            height: !!icon ? 15: 0
+                            color: Theme.palette.directColor1
+                            icon: model.walletType === Constants.watchWalletType ? "show" : ""
+                        },
+                        StatusIcon {
+                            width: !!icon ? 15: 0
+                            height: !!icon ? 15: 0
+                            color: Theme.palette.directColor1
+                            icon: model.keycardAccount ? "keycard" : ""
+                        }
+                    ]
+                }
 
-                    layer.effect: DropShadow {
+                header: Button {
-                        verticalOffset: -10
+                    id: header
-                        radius: 20
+                    verticalPadding: Style.current.padding
-                        samples: 41
+                    horizontalPadding: Style.current.padding
-                        fast: true
+                    highlighted: root.showAllAccounts
-                        cached: true
+                    objectName: "allAccountsBtn"
-                        color: Theme.palette.dropShadow2
+
+                    leftInset: Style.current.padding
+                    bottomInset: Style.current.padding
+
+                    background: Rectangle {
+                        MouseArea {
+                            id: mouseArea
+                            anchors.fill: parent
+                            acceptedButtons: Qt.LeftButton
+                            cursorShape: Qt.PointingHandCursor
+                            onClicked: root.selectAllAccounts()
+                            hoverEnabled: true
+                        }
+                        radius: Style.current.radius
+                        color: header.highlighted || mouseArea.containsMouse ? Style.current.backgroundHover : root.color
+                        implicitWidth: parent.ListView.view.width - Style.current.padding * 2
+                        implicitHeight: parent.ListView.view.firstItem.height + Style.current.padding
+                    }
+
+                    contentItem: Item {
+                        StatusBaseText {
+                            id: allAccounts
+                            leftPadding: Style.current.padding
+                            color: Theme.palette.baseColor1
+                            text: qsTr("All accounts")
+                            font.weight: Font.Medium
+                            font.pixelSize: 15
+                        }
+
+                        StatusTextWithLoadingState {
+                            id: walletAmountValue
+                            objectName: "walletLeftListAmountValue"
+                            customColor: Style.current.textColor
+                            text: LocaleUtils.currencyAmountToLocaleString(RootStore.totalCurrencyBalance)
+                            font.pixelSize: 22
+                            loading: RootStore.assetsLoading
+                            visible: !networkConnectionStore.accountBalanceNotAvailable
+                            anchors.top: allAccounts.bottom
+                            anchors.topMargin: 4
+                            anchors.bottomMargin: Style.current.padding
+                            leftPadding: Style.current.padding
+                        }
+
+                        StatusFlatRoundButton {
+                            id: errorIcon
+                            width: 14
+                            height: visible ? 14 : 0
+                            icon.width: 14
+                            icon.height: 14
+                            icon.name: "tiny/warning"
+                            icon.color: Theme.palette.dangerColor1
+                            tooltip.text: networkConnectionStore.accountBalanceNotAvailableText
+                            tooltip.maxWidth: 200
+                            visible: networkConnectionStore.accountBalanceNotAvailable
+                        }
                     }
                 }
 
-                contentItem: Item {
+                model: SortFilterProxyModel {
-                    StatusBaseText {
+                    sourceModel: RootStore.accounts
-                        id: allAccounts
+                    sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
-                        leftPadding: Style.current.padding
-                        color: Theme.palette.baseColor1
-                        text: qsTr("All accounts")
-                        font.weight: Font.Medium
-                        font.pixelSize: 15
-                    }
-
-                    StatusTextWithLoadingState {
-                        id: walletAmountValue
-                        objectName: "walletLeftListAmountValue"
-                        customColor: Style.current.textColor
-                        text: LocaleUtils.currencyAmountToLocaleString(RootStore.totalCurrencyBalance)
-                        font.pixelSize: 22
-                        loading: RootStore.assetsLoading
-                        visible: !networkConnectionStore.accountBalanceNotAvailable
-                        anchors.top: allAccounts.bottom
-                        anchors.topMargin: 4
-                        anchors.bottomMargin: Style.current.padding
-                        leftPadding: Style.current.padding
-                    }
-
-                    StatusFlatRoundButton {
-                        id: errorIcon
-                        width: 14
-                        height: visible ? 14 : 0
-                        icon.width: 14
-                        icon.height: 14
-                        icon.name: "tiny/warning"
-                        icon.color: Theme.palette.dangerColor1
-                        tooltip.text: networkConnectionStore.accountBalanceNotAvailableText
-                        tooltip.maxWidth: 200
-                        visible: networkConnectionStore.accountBalanceNotAvailable
-                    }
                 }
             }
 
-            footerPositioning: footerOverlayed ? ListView.OverlayFooter : ListView.InlineFooter
+            Control {
-            footer: Control {
                 id: footer
 
-                z: 2 // to be on top of delegates when in ListView.OverlayFooter
+                anchors {
+                    top: parent.top
+                    // Bottom Margin is not applied to ListView if it's fully visible
+                    topMargin: Math.min(walletAccountsListView.contentHeight, parent.height - height) + (walletAccountsListView.footerOverlayed ? 0 : walletAccountsListView.bottomMargin)
+                    left: parent.left
+                    right: parent.right
+                }
+
                 horizontalPadding: Style.current.padding
                 verticalPadding: Style.current.padding
 
-                property alias button: savedAddressesBtn
-
                 background: Rectangle {
+                    id: footerBackground
                     color: root.color
                     implicitWidth: root.width
-                    implicitHeight: parent.ListView.view.firstItem.height + Style.current.xlPadding
+                    implicitHeight: walletAccountsListView.firstItem.height + Style.current.xlPadding
 
-                    layer.enabled: parent.ListView.view.footerOverlayed
+                    layer.enabled: walletAccountsListView.footerOverlayed && !walletAccountsListView.atYEnd
                     layer.effect: DropShadow {
                         verticalOffset: -10
                         radius: 20
@@ -371,19 +398,17 @@ Rectangle {
                         color: Theme.palette.dropShadow2
                     }
 
-                    StatusMenuSeparator {
+                    Separator {
-                        id: footerSeparator
+                        anchors.top: parent.top
-
+                        anchors.topMargin: -1
                         width: parent.width
-                        visible: !footer.ListView.view.footerOverlayed
                     }
                 }
 
                 contentItem: StatusFlatButton {
-                    id: savedAddressesBtn
-
                     objectName: "savedAddressesBtn"
-                    hoverColor: Theme.palette.baseColor3
+                    highlighted: root.showSavedAddresses
+                    hoverColor: Style.current.backgroundHover
                     asset.bgColor: Theme.palette.primaryColor3
                     text: qsTr("Saved addresses")
                     icon.name: "address"
@@ -393,28 +418,19 @@ Rectangle {
                     isRoundIcon: true
                     textColor: Theme.palette.directColor1
                     textFillWidth: true
-                    spacing: parent.ListView.view.firstItem.statusListItemTitleArea.anchors.leftMargin
+                    spacing: walletAccountsListView.firstItem.statusListItemTitleArea.anchors.leftMargin
-                    onClicked: {
+                    onClicked: root.showSavedAddresses = true
-                        root.showAllAccounts = false
-                        root.showSavedAddresses = true
-                    }
 
                     MouseArea {
                         anchors.fill: parent
                         acceptedButtons: Qt.RightButton
                         cursorShape: Qt.PointingHandCursor
                         propagateComposedEvents: true
-                        onClicked: {
+                        onClicked: mouse.accepted = true
-                            mouse.accepted = true
-                        }
                     }
                 }
             }
-
-            model: SortFilterProxyModel {
-                sourceModel: RootStore.accounts
-                sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
-            }
         }
+
     }
 }