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
@@ -34,16 +34,25 @@ Rectangle {
     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,20 +206,46 @@ Rectangle {
             }
         }
 
+        Rectangle {
+            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.fillWidth: true
+
             StatusListView {
                 id: walletAccountsListView
-
                 objectName: "walletAccountsListView"
+                anchors {
+                    top: parent.top
+                    left: parent.left
+                    right: parent.right
+                }
+                height: parent.height - footer.height
+
                 spacing: Style.current.smallPadding
-            Layout.fillWidth: true
-            Layout.fillHeight: true
-            Layout.topMargin: Style.current.halfPadding
                 currentIndex: -1
                 highlightRangeMode: ListView.ApplyRange
                 preferredHighlightBegin: 0
-            preferredHighlightEnd: height - (footerOverlayed ? footerItem.height : 0)
+                preferredHighlightEnd: height
+                bottomMargin: Style.current.padding
 
                 readonly property Item firstItem: count > 0 ? itemAtIndex(0) : null
+                readonly property bool footerOverlayed: contentHeight > availableHeight
 
                 delegate: StatusListItem {
                     objectName: "walletAccount-" + model.name
@@ -247,8 +280,6 @@ Rectangle {
                             walletAccountContextMenu.item.popup(this, mouse.x, mouse.y)
                             return
                         }
-                    root.showSavedAddresses = false
-                    root.showAllAccounts = false
                         changeSelectedAccount(model.address)
                     }
                     components: [
@@ -267,13 +298,11 @@ Rectangle {
                     ]
                 }
 
-            readonly property bool footerOverlayed: contentHeight > availableHeight
-
                 header: Button {
                     id: header
                     verticalPadding: Style.current.padding
                     horizontalPadding: Style.current.padding
-                highlighted: true
+                    highlighted: root.showAllAccounts
                     objectName: "allAccountsBtn"
 
                     leftInset: Style.current.padding
@@ -285,26 +314,13 @@ Rectangle {
                             anchors.fill: parent
                             acceptedButtons: Qt.LeftButton
                             cursorShape: Qt.PointingHandCursor
-                        onClicked: {
+                            onClicked: root.selectAllAccounts()
-                            root.showSavedAddresses = false
-                            walletAccountsListView.currentIndex = -1
-                            root.selectAllAccounts()
-                        }
                             hoverEnabled: true
                         }
                         radius: Style.current.radius
-                    color: header.highlighted || mouseArea.containsMouse ? Theme.palette.baseColor3 : root.color
+                        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
-
-                    layer.effect: DropShadow {
-                        verticalOffset: -10
-                        radius: 20
-                        samples: 41
-                        fast: true
-                        cached: true
-                        color: Theme.palette.dropShadow2
-                    }
                     }
 
                     contentItem: Item {
@@ -346,22 +362,33 @@ Rectangle {
                     }
                 }
 
-            footerPositioning: footerOverlayed ? ListView.OverlayFooter : ListView.InlineFooter
+                model: SortFilterProxyModel {
-            footer: Control {
+                    sourceModel: RootStore.accounts
+                    sorters: RoleSorter { roleName: "position"; sortOrder: Qt.AscendingOrder }
+                }
+            }
+
+            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 }
-            }
-        }
     }
 }