chore(DoubleFlickableWithFolding): Component api and usage simplified

Now the header don't have to be reparented manually. Everything
is done internally in the component. Additionally the usage
in CollectiblesView is adjusted to the change.

storybook/pages/DoubleFlickableWithFoldingPage.qml

@@ -82,34 +82,25 @@ SplitView {
                     cellWidth: 120
                     cellHeight: 30
 
-                    header: Item {
+                    header: Rectangle {
-                        id: header1
+                        z: 1
 
                         height: root.header1Size
                         width: GridView.view.width
 
-                        Rectangle {
+                        color: "orange"
-                            parent: doubleFlickable.contentItem
-                            y: doubleFlickable.gridHeader1YInContentItem
-                            z: 1
 
-                            width: header1.width
+                        Label {
-                            height: header1.height
+                            anchors.centerIn: parent
+                            font.bold: true
+                            text: (doubleFlickable.flickable1Folded ? "➡️" : "⬇")
+                                  + " Community"
+                        }
 
-                            color: "orange"
+                        MouseArea {
+                            anchors.fill: parent
 
-                            Label {
+                            onClicked: doubleFlickable.flip1Folding()
-                                anchors.centerIn: parent
-                                font.bold: true
-                                text: (doubleFlickable.flickable1Folded ? "➡️" : "⬇")
-                                      + " Community"
-                            }
-
-                            MouseArea {
-                                anchors.fill: parent
-
-                                onClicked: doubleFlickable.flip1Folding()
-                            }
                         }
                     }
 
@@ -143,34 +134,25 @@ SplitView {
                     cellWidth: 100
                     cellHeight: 100
 
-                    header: Item {
+                    header: Rectangle {
-                        id: header2
+                        z: 1
 
                         height: root.header2Size
                         width: GridView.view.width
 
-                        Rectangle {
+                        color: "red"
-                            parent: doubleFlickable.contentItem
-                            y: doubleFlickable.gridHeader2YInContentItem
-                            z: 1
 
-                            width: header2.width
+                        Label {
-                            height: header2.height
+                            anchors.centerIn: parent
+                            font.bold: true
+                            text: (doubleFlickable.flickable2Folded ? "➡️" : "⬇")
+                                  + " Others"
+                        }
 
-                            color: "red"
+                        MouseArea {
+                            anchors.fill: parent
 
-                            Label {
+                            onClicked: doubleFlickable.flip2Folding()
-                                anchors.centerIn: parent
-                                font.bold: true
-                                text: (doubleFlickable.flickable2Folded ? "➡️" : "⬇")
-                                      + " Others"
-                            }
-
-                            MouseArea {
-                                anchors.fill: parent
-
-                                onClicked: doubleFlickable.flip2Folding()
-                            }
                         }
                     }
 

ui/StatusQ/src/StatusQ/Core/Utils/DoubleFlickableWithFolding.qml

@@ -2,9 +2,6 @@ import QtQuick 2.15
 import QtQml 2.15
 
 DoubleFlickable {
-    readonly property real gridHeader1YInContentItem: contentY
-    readonly property real gridHeader2YInContentItem: contentY + d.grid2HeaderOffset
-
     readonly property bool flickable1Folded: !d.grid1ContentInViewport
     readonly property bool flickable2Folded: d.grid2HeaderAtEnd || d.model2Blocked
 
@@ -52,11 +49,57 @@ DoubleFlickable {
         }
     }
 
+    HeaderWrapper {
+        id: header1Wrapper
+
+        parent: contentItem
+        flickable: flickable1
+        y: contentY
+    }
+
+    HeaderWrapper {
+        id: header2Wrapper
+
+        parent: contentItem
+        flickable: flickable2
+        y: contentY + d.grid2HeaderOffset
+    }
+
+    // The Flickable component (ListView or GridView) controls y positioning
+    // of the header and it cannot be effectively overriden. As a solution to
+    // this problem, the header can be reparented to a wrapper compensating
+    // for the y offset.
+    component HeaderWrapper: Item {
+        property Flickable flickable
+
+        z: 1
+
+        Binding {
+            when: flickable.headerItem
+            target: flickable.headerItem
+            property: "parent"
+            value: container
+            restoreMode: Binding.RestoreBindingOrValue
+        }
+
+        Binding {
+            when: flickable.headerItem
+            target: container
+            property: "y"
+            value: -flickable.headerItem.y
+            restoreMode: Binding.RestoreBindingOrValue
+        }
+
+        Item { id: container }
+    }
+
     QtObject {
         id: d
 
-        readonly property real header1Size: flickable1.headerItem ? flickable1.headerItem.height : 0
+        readonly property real header1Size: flickable1.headerItem
-        readonly property real header2Size: flickable2.headerItem ? flickable2.headerItem.height : 0
+                                            ? flickable1.headerItem.height : 0
+        readonly property real header2Size: flickable2.headerItem
+                                            ? flickable2.headerItem.height : 0
 
         readonly property bool grid1ContentInViewport:
             flickable1.y > contentY - Math.min(height, flickable1ContentHeight) + header1Size

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

@@ -263,28 +263,18 @@ ColumnLayout {
         flickable1: CustomGridView {
             id: communityCollectiblesView
 
-            header: Item {
+            header: HeaderDelegate {
-                id: communityHeader
-
                 height: d.headerHeight
                 width: doubleFlickable.width
+                z: 1
 
-                HeaderDelegate {
+                text: qsTr("Community minted")
-                    width: communityHeader.width
-                    height: communityHeader.height
 
-                    parent: doubleFlickable.contentItem
+                scrolled: !doubleFlickable.atYBeginning
-                    y: doubleFlickable.gridHeader1YInContentItem
+                checked: doubleFlickable.flickable1Folded
-                    z: 1
 
-                    text: qsTr("Community minted")
+                onToggleClicked: doubleFlickable.flip1Folding()
-
+                onInfoClicked: Global.openPopup(communityInfoPopupCmp)
-                    scrolled: !doubleFlickable.atYBeginning
-                    checked: doubleFlickable.flickable1Folded
-
-                    onToggleClicked: doubleFlickable.flip1Folding()
-                    onInfoClicked: Global.openPopup(communityInfoPopupCmp)
-                }
             }
 
             Binding {
@@ -305,30 +295,20 @@ ColumnLayout {
         flickable2: CustomGridView {
             id: regularCollectiblesView
 
-            header: Item {
+            header: HeaderDelegate {
-                id: nonCommunityHeader
-
                 height: d.headerHeight
                 width: doubleFlickable.width
+                z: 1
 
-                HeaderDelegate {
+                text: qsTr("Others")
-                    width: nonCommunityHeader.width
-                    height: nonCommunityHeader.height
 
-                    parent: doubleFlickable.contentItem
+                checked: doubleFlickable.flickable2Folded
-                    y: doubleFlickable.gridHeader2YInContentItem
+                scrolled: (doubleFlickable.contentY >
-                    z: 1
+                           communityCollectiblesView.contentHeight
+                           - d.headerHeight)
+                showInfoButton: false
 
-                    text: qsTr("Others")
+                onToggleClicked: doubleFlickable.flip2Folding()
-
-                    checked: doubleFlickable.flickable2Folded
-                    scrolled: (doubleFlickable.contentY >
-                               communityCollectiblesView.contentHeight
-                               - d.headerHeight)
-                    showInfoButton: false
-
-                    onToggleClicked: doubleFlickable.flip2Folding()
-                }
             }
 
             Binding {