From 9fe60e650f40518d77eb207a71b5a09a743c5efe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Cie=C5=9Blak?= Date: Mon, 29 Jan 2024 10:59:26 +0100 Subject: [PATCH] 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. --- .../pages/DoubleFlickableWithFoldingPage.qml | 66 +++++++------------ .../Core/Utils/DoubleFlickableWithFolding.qml | 53 +++++++++++++-- .../Wallet/views/CollectiblesView.qml | 52 +++++---------- 3 files changed, 88 insertions(+), 83 deletions(-) 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 {