fix(@desktop/wallet): Activity list polish changes (#11486)

fixes #11447
This commit is contained in:
Cuteivist 2023-07-13 14:22:02 +02:00 committed by GitHub
parent 4c8c7d95d7
commit 461bbbc06f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 69 additions and 72 deletions

View File

@ -389,8 +389,9 @@ QtObject:
QtProperty[QVariant] status: QtProperty[QVariant] status:
read = getStatus read = getStatus
proc globalFilterChanged*(self: Controller, addresses: seq[string], chainIds: seq[int]) = proc globalFilterChanged*(self: Controller, addresses: seq[string], chainIds: seq[int]) =
if (self.addresses == addresses and self.chainIds == chainIds):
return
self.setFilterAddresses(addresses) self.setFilterAddresses(addresses)
self.setFilterChains(chainIds) self.setFilterChains(chainIds)
self.status.setIsFilterDirty(true) self.status.setIsFilterDirty(true)

View File

@ -31,8 +31,9 @@ ColumnLayout {
signal launchTransactionDetail(var transaction) signal launchTransactionDetail(var transaction)
onVisibleChanged: { onVisibleChanged: {
if (visible) { if (visible && RootStore.isTransactionFilterDirty) {
RootStore.updateTransactionFilter() // TODO(#11412) restore filter for selected wallet account
d.activityFiltersStore.resetAllFilters()
} }
} }
@ -51,13 +52,12 @@ ColumnLayout {
readonly property int loadingSectionWidth: 56 readonly property int loadingSectionWidth: 56
readonly property int topSectionMargin: 20 readonly property int topSectionMargin: 20
property bool showRefreshButton: false
property double lastRefreshTime property double lastRefreshTime
readonly property int maxSecondsBetweenRefresh: 3 readonly property int maxSecondsBetweenRefresh: 3
function refreshData() { function refreshData() {
RootStore.resetFilter() RootStore.resetFilter()
d.lastRefreshTime = Date.now() d.lastRefreshTime = Date.now()
d.showRefreshButton = false newTransactions.visible = false
} }
} }
@ -82,7 +82,7 @@ ColumnLayout {
ActivityFilterPanel { ActivityFilterPanel {
id: filterComponent id: filterComponent
visible: !noTxs.visible && (!d.isInitialLoading || d.activityFiltersStore.filtersSet) visible: d.isInitialLoading || transactionListRoot.count > 0 || d.activityFiltersStore.filtersSet
Layout.fillWidth: true Layout.fillWidth: true
activityFilterStore: d.activityFiltersStore activityFilterStore: d.activityFiltersStore
store: WalletStores.RootStore store: WalletStores.RootStore
@ -149,15 +149,12 @@ ColumnLayout {
delegate: transactionDelegate delegate: transactionDelegate
headerPositioning: ListView.OverlayHeader headerPositioning: ListView.OverlayHeader
header: headerComp
footer: footerComp footer: footerComp
ScrollBar.vertical: StatusScrollBar {} ScrollBar.vertical: StatusScrollBar {}
section.property: "date" section.property: "date"
// Adding some magic number to align the top headerComp with the top of the list. topMargin: d.isInitialLoading ? 0 : -d.topSectionMargin // Top margin for first section. Section cannot have different sizes
// TODO: have to be fixed properly and match the design
topMargin: d.isInitialLoading ? 0 : -(2 * d.topSectionMargin + 9) // Top margin for first section. Section cannot have different sizes
section.delegate: ColumnLayout { section.delegate: ColumnLayout {
id: sectionDelegate id: sectionDelegate
@ -196,7 +193,7 @@ ColumnLayout {
} }
function tryFetchMoreTransactions() { function tryFetchMoreTransactions() {
if (!footerItem || !RootStore.historyTransactions.hasMore) if (d.isInitialLoading || !footerItem || !RootStore.historyTransactions.hasMore)
return return
const footerYPosition = footerItem.height / contentHeight const footerYPosition = footerItem.height / contentHeight
if (footerYPosition >= 1.0) { if (footerYPosition >= 1.0) {
@ -216,11 +213,59 @@ ColumnLayout {
} }
} }
StatusButton {
id: newTransactions
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.topMargin: Style.current.halfPadding
text: qsTr("New transactions")
visible: false
onClicked: d.refreshData()
icon.name: "arrow-up"
radius: 36
type: StatusButton.Primary
size: StatusBaseButton.Size.Tiny
}
Separator { Separator {
id: topListSeparator id: topListSeparator
width: parent.width width: parent.width
visible: !transactionListRoot.atYBeginning visible: !transactionListRoot.atYBeginning
} }
Connections {
target: RootStore
function onNewDataAvailableChanged() {
if (!d.lastRefreshTime || ((Date.now() - d.lastRefreshTime) > (1000 * d.maxSecondsBetweenRefresh))) {
newTransactions.visible = RootStore.newDataAvailable
return
}
if (showRefreshButtonTimer.running) {
if (!RootStore.newDataAvailable) {
showRefreshButtonTimer.stop()
newTransactions.visible = false
}
} else if(RootStore.newDataAvailable) {
showRefreshButtonTimer.start()
}
}
}
Timer {
id: showRefreshButtonTimer
interval: 2000
running: false
repeat: false
onTriggered: newTransactions.visible = RootStore.newDataAvailable
}
} }
StatusMenu { StatusMenu {
@ -307,7 +352,7 @@ ColumnLayout {
id: footerColumn id: footerColumn
readonly property bool allActivityLoaded: !RootStore.historyTransactions.hasMore && transactionListRoot.count !== 0 readonly property bool allActivityLoaded: !RootStore.historyTransactions.hasMore && transactionListRoot.count !== 0
width: root.width width: root.width
spacing: 12 spacing: d.isInitialLoading ? 6 : 12
Separator { Separator {
Layout.fillWidth: true Layout.fillWidth: true
@ -326,7 +371,17 @@ ColumnLayout {
} }
Repeater { Repeater {
model: !noTxs.visible && (RootStore.historyTransactions.hasMore || d.isInitialLoading) ? 10 : 0 model: {
if (!noTxs.visible) {
const delegateHeight = 64 + footerColumn.spacing
if (d.isInitialLoading) {
return Math.floor(transactionListRoot.height / delegateHeight)
} else if (RootStore.historyTransactions.hasMore) {
return Math.max(3, Math.floor(transactionListRoot.height / delegateHeight) - 3)
}
}
return 0
}
TransactionDelegate { TransactionDelegate {
Layout.fillWidth: true Layout.fillWidth: true
rootStore: RootStore rootStore: RootStore
@ -357,63 +412,4 @@ ColumnLayout {
} }
} }
} }
Component {
id: headerComp
Item {
width: root.width
height: dataUpdatedButton.implicitHeight
StatusButton {
id: dataUpdatedButton
anchors.centerIn: parent
text: qsTr("New transactions")
visible: d.showRefreshButton
onClicked: d.refreshData()
icon.name: "arrow-up"
radius: 36
textColor: Theme.palette.indirectColor1
normalColor: Theme.palette.primaryColor1
hoverColor: Theme.palette.miscColor1
size: StatusBaseButton.Size.Tiny
}
z: 3
}
}
Connections {
target: RootStore
function onNewDataAvailableChanged() {
if (!d.lastRefreshTime || ((Date.now() - d.lastRefreshTime) > (1000 * d.maxSecondsBetweenRefresh))) {
d.showRefreshButton = RootStore.newDataAvailable
return
}
if (showRefreshButtonTimer.running) {
if (!RootStore.newDataAvailable) {
showRefreshButtonTimer.stop()
d.showRefreshButton = false
}
} else if(RootStore.newDataAvailable) {
showRefreshButtonTimer.start()
}
}
}
Timer {
id: showRefreshButtonTimer
interval: 2000
running: false
repeat: false
onTriggered: d.showRefreshButton = RootStore.newDataAvailable
}
} }