status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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.
This commit is contained in:
Michał Cieślak 2024-01-29 10:59:26 +01:00 committed by Michał
parent f2db89573f
commit 9fe60e650f
3 changed files with 88 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
storybook/pages/DoubleFlickableWithFoldingPage.qml
View File

@ -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()
}
}

53
ui/StatusQ/src/StatusQ/Core/Utils/DoubleFlickableWithFolding.qml
View File

@ -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

52
ui/app/AppLayouts/Wallet/views/CollectiblesView.qml
View File

@ -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 {