diff --git a/storybook/pages/DoubleFlickableWithFoldingPage.qml b/storybook/pages/DoubleFlickableWithFoldingPage.qml index 9cad86ed2b..124a2ad078 100644 --- a/storybook/pages/DoubleFlickableWithFoldingPage.qml +++ b/storybook/pages/DoubleFlickableWithFoldingPage.qml @@ -82,34 +82,25 @@ SplitView { cellWidth: 120 cellHeight: 30 - header: Item { - id: header1 + header: Rectangle { + z: 1 height: root.header1Size width: GridView.view.width - Rectangle { - parent: doubleFlickable.contentItem - y: doubleFlickable.gridHeader1YInContentItem - z: 1 + color: "orange" - width: header1.width - height: header1.height + Label { + anchors.centerIn: parent + font.bold: true + text: (doubleFlickable.flickable1Folded ? "➡️" : "⬇") + + " Community" + } - color: "orange" + MouseArea { + anchors.fill: parent - Label { - anchors.centerIn: parent - font.bold: true - text: (doubleFlickable.flickable1Folded ? "➡️" : "⬇") - + " Community" - } - - MouseArea { - anchors.fill: parent - - onClicked: doubleFlickable.flip1Folding() - } + onClicked: doubleFlickable.flip1Folding() } } @@ -143,34 +134,25 @@ SplitView { cellWidth: 100 cellHeight: 100 - header: Item { - id: header2 + header: Rectangle { + z: 1 height: root.header2Size width: GridView.view.width - Rectangle { - parent: doubleFlickable.contentItem - y: doubleFlickable.gridHeader2YInContentItem - z: 1 + color: "red" - width: header2.width - height: header2.height + Label { + anchors.centerIn: parent + font.bold: true + text: (doubleFlickable.flickable2Folded ? "➡️" : "⬇") + + " Others" + } - color: "red" + MouseArea { + anchors.fill: parent - Label { - anchors.centerIn: parent - font.bold: true - text: (doubleFlickable.flickable2Folded ? "➡️" : "⬇") - + " Others" - } - - MouseArea { - anchors.fill: parent - - onClicked: doubleFlickable.flip2Folding() - } + onClicked: doubleFlickable.flip2Folding() } } diff --git a/ui/StatusQ/src/StatusQ/Core/Utils/DoubleFlickableWithFolding.qml b/ui/StatusQ/src/StatusQ/Core/Utils/DoubleFlickableWithFolding.qml index f869c8d4c3..cf2e6789b3 100644 --- a/ui/StatusQ/src/StatusQ/Core/Utils/DoubleFlickableWithFolding.qml +++ b/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 header2Size: flickable2.headerItem ? flickable2.headerItem.height : 0 + readonly property real header1Size: flickable1.headerItem + ? 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 diff --git a/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml b/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml index 1adde03c52..7ea39a6c1f 100644 --- a/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml +++ b/ui/app/AppLayouts/Wallet/views/CollectiblesView.qml @@ -263,28 +263,18 @@ ColumnLayout { flickable1: CustomGridView { id: communityCollectiblesView - header: Item { - id: communityHeader - + header: HeaderDelegate { height: d.headerHeight width: doubleFlickable.width + z: 1 - HeaderDelegate { - width: communityHeader.width - height: communityHeader.height + text: qsTr("Community minted") - parent: doubleFlickable.contentItem - y: doubleFlickable.gridHeader1YInContentItem - z: 1 + scrolled: !doubleFlickable.atYBeginning + checked: doubleFlickable.flickable1Folded - text: qsTr("Community minted") - - scrolled: !doubleFlickable.atYBeginning - checked: doubleFlickable.flickable1Folded - - onToggleClicked: doubleFlickable.flip1Folding() - onInfoClicked: Global.openPopup(communityInfoPopupCmp) - } + onToggleClicked: doubleFlickable.flip1Folding() + onInfoClicked: Global.openPopup(communityInfoPopupCmp) } Binding { @@ -305,30 +295,20 @@ ColumnLayout { flickable2: CustomGridView { id: regularCollectiblesView - header: Item { - id: nonCommunityHeader - + header: HeaderDelegate { height: d.headerHeight width: doubleFlickable.width + z: 1 - HeaderDelegate { - width: nonCommunityHeader.width - height: nonCommunityHeader.height + text: qsTr("Others") - parent: doubleFlickable.contentItem - y: doubleFlickable.gridHeader2YInContentItem - z: 1 + checked: doubleFlickable.flickable2Folded + scrolled: (doubleFlickable.contentY > + communityCollectiblesView.contentHeight + - d.headerHeight) + showInfoButton: false - text: qsTr("Others") - - checked: doubleFlickable.flickable2Folded - scrolled: (doubleFlickable.contentY > - communityCollectiblesView.contentHeight - - d.headerHeight) - showInfoButton: false - - onToggleClicked: doubleFlickable.flip2Folding() - } + onToggleClicked: doubleFlickable.flip2Folding() } Binding {