From 7f18a76fd51b3f72f0141d72e19c5c567ce87039 Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Tue, 13 Jun 2023 16:55:26 +0200 Subject: [PATCH] feat(@desktop/wallet): Complete Filter Activity List fixes #10823 --- storybook/pages/ActivityFilterMenuPage.qml | 164 ++++++++--- storybook/src/Models/RecipientModel.qml | 12 +- .../Wallet/controls/ActivityFilterTagItem.qml | 40 +++ .../controls/StatusWalletMenuRadioButton.qml | 5 +- ui/app/AppLayouts/Wallet/controls/qmldir | 1 + .../Wallet/panels/ActivityFilterPanel.qml | 267 ++++++++++++++++++ ui/app/AppLayouts/Wallet/panels/qmldir | 1 + .../Wallet/popups/ActivityFilterMenu.qml | 10 +- .../ActivityCounterpartyFilterSubMenu.qml | 4 +- .../ActivityPeriodFilterSubMenu.qml | 16 +- .../ActivityTokensFilterSubMenu.qml | 2 +- ui/imports/shared/controls/InformationTag.qml | 12 +- ui/imports/shared/views/HistoryView.qml | 65 ++--- 13 files changed, 490 insertions(+), 109 deletions(-) create mode 100644 ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml create mode 100644 ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml diff --git a/storybook/pages/ActivityFilterMenuPage.qml b/storybook/pages/ActivityFilterMenuPage.qml index fe68b404f0..d37089ab37 100644 --- a/storybook/pages/ActivityFilterMenuPage.qml +++ b/storybook/pages/ActivityFilterMenuPage.qml @@ -1,10 +1,13 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 import AppLayouts.Wallet.controls 1.0 import AppLayouts.Wallet.popups 1.0 +import AppLayouts.Wallet.panels 1.0 import AppLayouts.stores 1.0 +import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Popups 0.1 @@ -17,6 +20,8 @@ import Models 1.0 import utils 1.0 +import shared.controls 1.0 + SplitView { id: root @@ -27,12 +32,14 @@ SplitView { QtObject { id: d property int selectedTime: Constants.TransactionTimePeriod.All + property double fromTimestamp: new Date().setDate(new Date().getDate() - 7) + property double toTimestamp: Date.now() function changeSelectedTime(newTime) { selectedTime = newTime } function setCustomTimeRange(fromTimestamp , toTimestamp) { - dialog.fromTimestamp = fromTimestamp - dialog.toTimestamp = toTimestamp + d.fromTimestamp = fromTimestamp + d.toTimestamp = toTimestamp } property var typeFilters: [ Constants.TransactionType.Send, @@ -139,6 +146,7 @@ SplitView { } else if(checkedTokens.length === 1 && checkedTokens[0].symbol === tokenSymbol) { for (let j = 0; j> ",address) - onUpdateRecentsFilter: console.warn("onUpdateRecentsFilter >> ",address) - - closePolicy: Popup.NoAutoClose - } - - StatusDateRangePicker { - id: dialog - anchors.centerIn: parent - destroyOnClose: false - fromTimestamp: new Date().setDate(new Date().getDate() - 7) // 7 days ago - onNewRangeSet: d.setCustomTimeRange(fromTimestamp, toTimestamp) + recentsList: d.simulatedRecentsList + onChangeSelectedTime: d.changeSelectedTime(selectedTime) + onSetCustomTimeRange: d.setCustomTimeRange(from, to) + onToggleType: d.toggleType(type) + onToggleStatus: d.toggleStatus(status) + onToggleToken: d.toggleToken(tokenSymbol) + onToggleCollectibles: d.toggleCollectibles(name) + onToggleSavedAddress: d.toggleSavedAddress(address) + onToggleRecents: d.toggleRecents(address) } } diff --git a/storybook/src/Models/RecipientModel.qml b/storybook/src/Models/RecipientModel.qml index 28660462fd..b6749e26f1 100644 --- a/storybook/src/Models/RecipientModel.qml +++ b/storybook/src/Models/RecipientModel.qml @@ -40,22 +40,22 @@ QtObject { readonly property var recents: ListModel { ListElement { - from: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756ccx" - to: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2" + from: "0x2a4baa88a3924c2c99072918688032c2142cd9f6" + to: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421" checked: true allChecked: true } ListElement { - from: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756ccx" - to: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2" + from: "0x0910a46b3b99d4781e9841df0fd02ea1b95178c6" + to: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421" checked: true allChecked: true } ListElement { - from: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756ccx" - to: "0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2" + from: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421" + to: "0xcdc2ea3b6ba8fed3a3402f8db8b2fab53e7b7421" checked: true allChecked: true } diff --git a/ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml b/ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml new file mode 100644 index 0000000000..b289139aa7 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/controls/ActivityFilterTagItem.qml @@ -0,0 +1,40 @@ +import QtQuick 2.14 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + +import shared.controls 1.0 + +InformationTag { + id: root + + signal closed() + + tagPrimaryLabel.color: Theme.palette.directColor1 + tagSecondaryLabel.color: Theme.palette.directColor1 + middleLabel.color: Theme.palette.baseColor1 + iconAsset.color: Theme.palette.primaryColor1 + secondarylabelMaxWidth: 1000 + height: 32 + customBackground: Component { + Rectangle { + radius: 36 + color: Theme.palette.transparent + border.width: 1 + border.color: Theme.palette.baseColor2 + } + } + rightComponent: StatusIcon { + color: Theme.palette.primaryColor1 + width: 20 + height: 20 + icon: "close" + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor + onClicked: root.closed() + } + } +} diff --git a/ui/app/AppLayouts/Wallet/controls/StatusWalletMenuRadioButton.qml b/ui/app/AppLayouts/Wallet/controls/StatusWalletMenuRadioButton.qml index 49c92d421e..65d48f6f06 100644 --- a/ui/app/AppLayouts/Wallet/controls/StatusWalletMenuRadioButton.qml +++ b/ui/app/AppLayouts/Wallet/controls/StatusWalletMenuRadioButton.qml @@ -8,6 +8,7 @@ import StatusQ.Controls 0.1 StatusRadioButton { id: root implicitHeight: 34 + property bool checkedState: false contentItem: StatusBaseText { width: parent.width font.pixelSize: 13 @@ -26,9 +27,9 @@ StatusRadioButton { width: 12 height: 12 color: Theme.palette.primaryColor1 - visible: root.checked + visible: root.checkedState } background: Rectangle { - color: root.hovered ? Theme.palette.baseColor2 : Theme.palette.statusModal.backgroundColor + color: root.hovered ? Theme.palette.baseColor2 : Theme.palette.statusModal.backgroundColor } } diff --git a/ui/app/AppLayouts/Wallet/controls/qmldir b/ui/app/AppLayouts/Wallet/controls/qmldir index c33a685c76..bc56afce9d 100644 --- a/ui/app/AppLayouts/Wallet/controls/qmldir +++ b/ui/app/AppLayouts/Wallet/controls/qmldir @@ -3,3 +3,4 @@ NetworkSelectItemDelegate 1.0 NetworkSelectItemDelegate.qml AccountHeaderGradient 1.0 AccountHeaderGradient.qml StatusTxProgressBar 1.0 StatusTxProgressBar.qml StatusDateRangePicker 1.0 StatusDateRangePicker.qml +ActivityFilterTagItem 1.0 ActivityFilterTagItem.qml diff --git a/ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml b/ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml new file mode 100644 index 0000000000..fd182a5c0e --- /dev/null +++ b/ui/app/AppLayouts/Wallet/panels/ActivityFilterPanel.qml @@ -0,0 +1,267 @@ +import QtQuick 2.13 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Core.Utils 0.1 as StatusQUtils +import StatusQ.Controls 0.1 + +import utils 1.0 + +import "../controls" +import "../popups" + +Flow { + id: root + + property var store + property int selectedTime + property double fromTimestamp + property double toTimestamp + property var typeFilters + property var statusFilters + property var assetsList + property var collectiblesList + property var savedAddressList + property var recentsList + + signal changeSelectedTime(int selectedTime) + signal setCustomTimeRange(string from, string to) + signal toggleType(int type) + signal toggleStatus(int status) + signal toggleToken(string tokenSymbol) + signal toggleCollectibles(string name) + signal toggleSavedAddress(string address) + signal toggleRecents(string address) + + spacing: 8 + + StatusRoundButton { + id: filterButton + width: 32 + height: 32 + icon.name: "filter" + border.width: 1 + border.color: Theme.palette.directColor8 + type: StatusRoundButton.Type.Tertiary + onClicked: activityFilterMenu.popup(x, y + height + 4) + } + + ActivityFilterTagItem { + tagPrimaryLabel.text: { + var currDate = new Date; // current date + switch(root.selectedTime) { + case Constants.TransactionTimePeriod.Today: + return LocaleUtils.formatDate(currDate) // Today + case Constants.TransactionTimePeriod.Yesterday: + return LocaleUtils.formatDate(new Date().setDate(currDate.getDate() - 1)) // Yesterday + case Constants.TransactionTimePeriod.ThisWeek: + var firstDayOfCurrentWeek = currDate.getDate() - currDate.getDay() + return LocaleUtils.formatDate(currDate.setDate(firstDayOfCurrentWeek)) // This week + case Constants.TransactionTimePeriod.LastWeek: + return LocaleUtils.formatDate(new Date().setDate(currDate.getDate() - 7)) // Last week + case Constants.TransactionTimePeriod.ThisMonth: + return LocaleUtils.formatDate(currDate.setDate(1)) // This month + case Constants.TransactionTimePeriod.LastMonth: + currDate.setDate(1); + currDate.setMonth(currDate.getMonth()-1); + return LocaleUtils.formatDate(currDate) // Last month + case Constants.TransactionTimePeriod.Custom: + return LocaleUtils.formatDate(new Date(root.fromTimestamp)) // Custom + default: + return "" + } + } + tagSecondaryLabel.text: { + switch(root.selectedTime) { + case Constants.TransactionTimePeriod.Today: + case Constants.TransactionTimePeriod.Yesterday: + return "" + case Constants.TransactionTimePeriod.ThisWeek: + case Constants.TransactionTimePeriod.LastWeek: + case Constants.TransactionTimePeriod.ThisMonth: + return LocaleUtils.formatDate(new Date) + case Constants.TransactionTimePeriod.LastMonth: + let x = new Date() + x.setDate(1); + x.setMonth(x.getMonth()-1); + x.setDate(new Date(x.getFullYear(), x.getMonth(), 0).getDate() + 1) + return LocaleUtils.formatDate(x) + case Constants.TransactionTimePeriod.Custom: + return LocaleUtils.formatDate(new Date(root.toTimestamp)) // Custom + default: + return "" + } + } + middleLabel.text:{ + switch(root.selectedTime) { + case Constants.TransactionTimePeriod.Today: + case Constants.TransactionTimePeriod.Yesterday: + return "" + default: + return qsTr("to") + } + } + + iconAsset.icon: "history" + visible: root.selectedTime !== Constants.TransactionTimePeriod.All + onClosed: root.changeSelectedTime(Constants.TransactionTimePeriod.All) + } + + Repeater { + model: activityFilterMenu.allTypesChecked ? 0: root.typeFilters + delegate: ActivityFilterTagItem { + property int type: root.typeFilters[index] + tagPrimaryLabel.text: switch(root.typeFilters[index]) { + case Constants.TransactionType.Send: + return qsTr("Send") + case Constants.TransactionType.Receive: + return qsTr("Receive") + case Constants.TransactionType.Buy: + return qsTr("Buy") + case Constants.TransactionType.Swap: + return qsTr("Swap") + case Constants.TransactionType.Bridge: + return qsTr("Bridge") + default: + console.warn("Unhandled type :: ",root.typeFilters[index]) + return "" + } + iconAsset.icon: switch(root.typeFilters[index]) { + case Constants.TransactionType.Send: + return "send" + case Constants.TransactionType.Receive: + return "receive" + case Constants.TransactionType.Buy: + return "token" + case Constants.TransactionType.Swap: + return "swap" + case Constants.TransactionType.Bridge: + return "bridge" + default: + console.warn("Unhandled type :: ",root.typeFilters[index]) + return "" + } + onClosed: root.toggleType(type) + } + } + + Repeater { + model: activityFilterMenu.allStatusChecked ? 0 : root.statusFilters + delegate: ActivityFilterTagItem { + property int type: root.statusFilters[index] + tagPrimaryLabel.text: switch(root.statusFilters[index]) { + case Constants.TransactionStatus.Failed: + return qsTr("Failed") + case Constants.TransactionStatus.Pending: + return qsTr("Pending") + case Constants.TransactionStatus.Complete: + return qsTr("Complete") + case Constants.TransactionStatus.Finished: + return qsTr("Finalised") + default: + console.warn("Unhandled status :: ",root.statusFilters[index]) + return "" + } + iconAsset.icon: switch(root.statusFilters[index]) { + case Constants.TransactionStatus.Failed: + return Style.svg("transaction/failed") + case Constants.TransactionStatus.Pending: + return Style.svg("transaction/pending") + case Constants.TransactionStatus.Complete: + return Style.svg("transaction/verified") + case Constants.TransactionStatus.Finished: + return Style.svg("transaction/finished") + default: + console.warn("Unhandled status :: ",root.statusFilters[index]) + return "" + } + iconAsset.color: "transparent" + onClosed: root.toggleStatus(type) + } + } + + Repeater { + model: root.assetsList + delegate: ActivityFilterTagItem { + tagPrimaryLabel.text: symbol + iconAsset.icon: Constants.tokenIcon(symbol) + iconAsset.color: "transparent" + visible: !allChecked && checked + onClosed: root.toggleToken(symbol) + } + } + + Repeater { + model: root.collectiblesList + delegate: ActivityFilterTagItem { + tagPrimaryLabel.text: name + iconAsset.icon: model.iconSource + iconAsset.color: "transparent" + visible: !allChecked && checked + onClosed: root.toggleCollectibles(name) + } + } + + Repeater { + model: root.recentsList + delegate: ActivityFilterTagItem { + property int transactionType: to.toLowerCase() === root.store.overview.mixedcaseAddress.toLowerCase() ? Constants.TransactionType.Receive : Constants.TransactionType.Send + tagPrimaryLabel.text: transactionType === Constants.TransactionType.Receive ? + root.store.getNameForAddress(from) || StatusQUtils.Utils.elideText(from,6,4) : + root.store.getNameForAddress(to) || StatusQUtils.Utils.elideText(to,6,4) + visible: !allChecked && checked + onClosed: root.toggleRecents(transactionType === Constants.TransactionType.Receive ? from : to) + } + } + + Repeater { + model: root.savedAddressList + delegate: ActivityFilterTagItem { + tagPrimaryLabel.text: ens.length > 0 ? ens : chainShortNames + StatusQUtils.Utils.elideText(address,6,4) + visible: !allChecked && checked + onClosed: root.toggleSavedAddress(address) + } + } + + ActivityFilterMenu { + id: activityFilterMenu + + selectedTime: root.selectedTime + onSetSelectedTime: { + if(selectedTime === Constants.TransactionTimePeriod.Custom) { + dialog.open() + } + else + root.changeSelectedTime(selectedTime) + } + + typeFilters: root.typeFilters + onUpdateTypeFilter: root.toggleType(type) + + statusFilters: root.statusFilters + onUpdateStatusFilter: root.toggleStatus(status) + + tokensList: root.assetsList + collectiblesList: root.collectiblesList + onUpdateTokensFilter: root.toggleToken(tokenSymbol) + onUpdateCollectiblesFilter: root.toggleCollectibles(name) + + store: root.store + recentsList: root.recentsList + savedAddressList: root.savedAddressList + onUpdateSavedAddressFilter: root.toggleSavedAddress(address) + onUpdateRecentsFilter: root.toggleRecents(address) + } + + StatusDateRangePicker { + id: dialog + anchors.centerIn: parent + // To-do sync with backend + fromTimestamp: root.fromTimestamp// 7 days ago + toTimestamp: root.toTimestamp + onNewRangeSet: { + root.setCustomTimeRange(fromTimestamp, toTimestamp) + root.changeSelectedTime(Constants.TransactionTimePeriod.Custom) + } + } +} diff --git a/ui/app/AppLayouts/Wallet/panels/qmldir b/ui/app/AppLayouts/Wallet/panels/qmldir index 470fe6386a..4f006f8f96 100644 --- a/ui/app/AppLayouts/Wallet/panels/qmldir +++ b/ui/app/AppLayouts/Wallet/panels/qmldir @@ -1,3 +1,4 @@ WalletHeader 1.0 WalletHeader.qml WalletTxProgressBlock 1.0 WalletTxProgressBlock.qml WalletNftPreview 1.0 WalletNftPreview.qml +ActivityFilterPanel 1.0 ActivityFilterPanel.qml diff --git a/ui/app/AppLayouts/Wallet/popups/ActivityFilterMenu.qml b/ui/app/AppLayouts/Wallet/popups/ActivityFilterMenu.qml index 0c8b593eb7..11da5daab2 100644 --- a/ui/app/AppLayouts/Wallet/popups/ActivityFilterMenu.qml +++ b/ui/app/AppLayouts/Wallet/popups/ActivityFilterMenu.qml @@ -14,10 +14,12 @@ StatusMenu { // Type filter property var typeFilters: [] + property bool allTypesChecked: typeMenu.allChecked signal updateTypeFilter(int type) // Status filter property var statusFilters: [] + property bool allStatusChecked: statusMenu.allChecked signal updateStatusFilter(int status) // Assets filter @@ -30,7 +32,7 @@ StatusMenu { property var store property var recentsList property var savedAddressList - signal updateSavedAddressFilter(string adddress) + signal updateSavedAddressFilter(string address) signal updateRecentsFilter(string address) implicitWidth: 176 @@ -67,7 +69,7 @@ StatusMenu { } ActivityTokensFilterSubMenu { id: tokensMenu - height: Math.min(439, implicitHeight) + height: Math.min(439, tokensMenu.implicitHeight) onBack: root.open() tokensList: root.tokensList collectiblesList: root.collectiblesList @@ -77,11 +79,13 @@ StatusMenu { } ActivityCounterpartyFilterSubMenu { id: counterPartyMenu - height: Math.min(439, implicitHeight) + height: Math.min(439, counterPartyMenu.implicitHeight) onBack: root.open() store: root.store recentsList: root.recentsList savedAddressList: root.savedAddressList + onSavedAddressToggled: root.updateSavedAddressFilter(address) + onRecentsToggled: root.updateRecentsFilter(address) closePolicy: root.closePolicy } } diff --git a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityCounterpartyFilterSubMenu.qml b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityCounterpartyFilterSubMenu.qml index 60d3c3b29a..00ce3bd5df 100644 --- a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityCounterpartyFilterSubMenu.qml +++ b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityCounterpartyFilterSubMenu.qml @@ -25,7 +25,7 @@ StatusMenu { property var store signal back() - signal savedAddressToggled(string adddress) + signal savedAddressToggled(string address) signal recentsToggled(string address) property var searchTokenSymbolByAddressFn: function (address) { @@ -104,7 +104,7 @@ StatusMenu { buttonGroup: recentsButtonGroup allChecked: model.allChecked checked: model.checked - onActionTriggered: root.recentsToggled(transactionType === Constants.TransactionType.Receive ? fromName : toName) + onActionTriggered: root.recentsToggled(transactionType === Constants.TransactionType.Receive ? model.from: model.to) } } } diff --git a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityPeriodFilterSubMenu.qml b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityPeriodFilterSubMenu.qml index ba055fab9a..cf5f113684 100644 --- a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityPeriodFilterSubMenu.qml +++ b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityPeriodFilterSubMenu.qml @@ -22,43 +22,43 @@ StatusMenu { } } StatusWalletMenuRadioButton { - checked: root.selectedTime === Constants.TransactionTimePeriod.All + checkedState: root.selectedTime === Constants.TransactionTimePeriod.All text: qsTr("All time") onClicked: actionTriggered(Constants.TransactionTimePeriod.All) } StatusWalletMenuRadioButton { - checked: root.selectedTime === Constants.TransactionTimePeriod.Today + checkedState: root.selectedTime === Constants.TransactionTimePeriod.Today text: qsTr("Today") onClicked: actionTriggered(Constants.TransactionTimePeriod.Today) } StatusWalletMenuRadioButton { - checked: root.selectedTime === Constants.TransactionTimePeriod.Yesterday + checkedState: root.selectedTime === Constants.TransactionTimePeriod.Yesterday text: qsTr("Yesterday") onClicked: actionTriggered(Constants.TransactionTimePeriod.Yesterday) } StatusWalletMenuRadioButton { - checked: root.selectedTime === Constants.TransactionTimePeriod.ThisWeek + checkedState: root.selectedTime === Constants.TransactionTimePeriod.ThisWeek text: qsTr("This week") onClicked: actionTriggered(Constants.TransactionTimePeriod.ThisWeek) } StatusWalletMenuRadioButton { - checked: root.selectedTime === Constants.TransactionTimePeriod.LastWeek + checkedState: root.selectedTime === Constants.TransactionTimePeriod.LastWeek text: qsTr("Last week") onClicked: actionTriggered(Constants.TransactionTimePeriod.LastWeek) } StatusWalletMenuRadioButton { - checked: root.selectedTime === Constants.TransactionTimePeriod.ThisMonth + checkedState: root.selectedTime === Constants.TransactionTimePeriod.ThisMonth text: qsTr("This month") onClicked: actionTriggered(Constants.TransactionTimePeriod.ThisMonth) } StatusWalletMenuRadioButton { - checked: root.selectedTime === Constants.TransactionTimePeriod.LastMonth + checkedState: root.selectedTime === Constants.TransactionTimePeriod.LastMonth text: qsTr("Last month") onClicked: actionTriggered(Constants.TransactionTimePeriod.LastMonth) } StatusMenuSeparator {} StatusWalletMenuRadioButton { - checked: root.selectedTime === Constants.TransactionTimePeriod.Custom + checkedState: root.selectedTime === Constants.TransactionTimePeriod.Custom text: qsTr("Custom range") onClicked: actionTriggered(Constants.TransactionTimePeriod.Custom) } diff --git a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityTokensFilterSubMenu.qml b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityTokensFilterSubMenu.qml index de3831af95..52958b901d 100644 --- a/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityTokensFilterSubMenu.qml +++ b/ui/app/AppLayouts/Wallet/popups/filterSubMenus/ActivityTokensFilterSubMenu.qml @@ -96,7 +96,7 @@ StatusMenu { Layout.preferredHeight: 44 title: model.name titleAsideText: model.symbol - assetSettings.name: model.symbol ? Style.png("tokens/" + model.symbol) : "" + assetSettings.name: model.symbol ? Constants.tokenIcon(symbol) : "" assetSettings.isImage: true buttonGroup: tokenButtonGroup allChecked: model.allChecked diff --git a/ui/imports/shared/controls/InformationTag.qml b/ui/imports/shared/controls/InformationTag.qml index 178c2dd510..467d45ba56 100644 --- a/ui/imports/shared/controls/InformationTag.qml +++ b/ui/imports/shared/controls/InformationTag.qml @@ -15,8 +15,10 @@ Control { property alias iconAsset : iconAsset property alias tagPrimaryLabel: tagPrimaryLabel property alias tagSecondaryLabel: tagSecondaryLabel + property alias middleLabel: middleLabel property alias rightComponent: rightComponent.sourceComponent property bool loading: false + property int secondarylabelMaxWidth: 100 property Component customBackground: Component { Rectangle { @@ -65,10 +67,18 @@ Control { color: Theme.palette.directColor1 visible: text !== "" } + StatusBaseText { + id: middleLabel + Layout.alignment: Qt.AlignVCenter + font.pixelSize: Style.current.tertiaryTextFontSize + font.weight: Font.Normal + color: Theme.palette.baseColor1 + visible: text !== "" + } StatusBaseText { id: tagSecondaryLabel Layout.alignment: Qt.AlignVCenter - Layout.maximumWidth: 100 + Layout.maximumWidth: root.secondarylabelMaxWidth font.pixelSize: Style.current.tertiaryTextFontSize font.weight: Font.Normal color: Theme.palette.baseColor1 diff --git a/ui/imports/shared/views/HistoryView.qml b/ui/imports/shared/views/HistoryView.qml index b59cd54bd1..6326f0f38d 100644 --- a/ui/imports/shared/views/HistoryView.qml +++ b/ui/imports/shared/views/HistoryView.qml @@ -21,6 +21,7 @@ import "../controls" import AppLayouts.Wallet.stores 1.0 as WalletStores import AppLayouts.Wallet.popups 1.0 import AppLayouts.Wallet.controls 1.0 +import AppLayouts.Wallet.panels 1.0 ColumnLayout { id: root @@ -70,23 +71,27 @@ ColumnLayout { text: qsTr("Activity for this account will appear here") } - Rectangle { + // Tp-do make connections with nim once logic is ready + ActivityFilterPanel { id: filterComponent visible: !d.isLoading && transactionListRoot.count !== 0 Layout.fillWidth: true Layout.preferredHeight: 50 - color: Theme.palette.transparent - StatusRoundButton { - anchors.left: parent.left - anchors.verticalCenter: parent.verticalCenter - width: 32 - height: 32 - border.width: 1 - border.color: Theme.palette.directColor8 - icon.name: "filter" - onClicked: activityFilter.popup(x, y + height + 4) - type: StatusRoundButton.Type.Tertiary - } + store: RootStore + selectedTime: Constants.TransactionTimePeriod.All + typeFilters: [ + Constants.TransactionType.Send, + Constants.TransactionType.Receive, + Constants.TransactionType.Buy, + Constants.TransactionType.Swap, + Constants.TransactionType.Bridge + ] + statusFilters: [ + Constants.TransactionStatus.Failed, + Constants.TransactionStatus.Pending, + Constants.TransactionStatus.Complete, + Constants.TransactionStatus.Finished + ] } Separator { @@ -339,38 +344,4 @@ ColumnLayout { } } } - - // To-do connect with backend once its implemented - ActivityFilterMenu { - id: activityFilter - selectedTime: Constants.TransactionTimePeriod.All - onSetSelectedTime: { - // To do connect with n=backend to set time range - if(selectedTime === Constants.TransactionTimePeriod.Custom) { - customDateRangePicker.open() - } - } - typeFilters: [ - Constants.TransactionType.Send, - Constants.TransactionType.Receive, - Constants.TransactionType.Buy, - Constants.TransactionType.Swap, - Constants.TransactionType.Bridge - ] - statusFilters: [ - Constants.TransactionStatus.Failed, - Constants.TransactionStatus.Pending, - Constants.TransactionStatus.Complete, - Constants.TransactionStatus.Finished - ] - store: RootStore - } - - // To-do update once https://github.com/status-im/status-desktop/pull/10916 is updated and connect with backend values - StatusDateRangePicker { - id: customDateRangePicker - destroyOnClose: false - fromTimestamp: new Date().setDate(new Date().getDate() - 7) -// onNewRangeSet: d.setCustomTimeRange(fromTimestamp, toTimestamp) - } }