From 25eda789af201eef0199b7512e1eee91a17cb803 Mon Sep 17 00:00:00 2001 From: MishkaRogachev Date: Thu, 17 Aug 2023 13:46:38 +0400 Subject: [PATCH] feat(Communities): Refactor token holder list item to separate file Close #11858 --- .../controls/TokenHolderListItem.qml | 183 +++++++++++++++++ .../controls/TokenHolderNumberCell.qml | 21 ++ .../panels/SortableTokenHoldersList.qml | 184 ++---------------- .../Communities/panels/TokenHoldersList.qml | 20 +- 4 files changed, 230 insertions(+), 178 deletions(-) create mode 100644 ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml create mode 100644 ui/app/AppLayouts/Communities/controls/TokenHolderNumberCell.qml diff --git a/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml b/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml new file mode 100644 index 00000000000..c5f6d5eb39a --- /dev/null +++ b/ui/app/AppLayouts/Communities/controls/TokenHolderListItem.qml @@ -0,0 +1,183 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 +import StatusQ.Core.Utils 0.1 as StatusQUtils + +import utils 1.0 + +/*! + \qmltype TokenHolderListItem + \inherits ItemDelegate + \brief Represents a token holder which can be a community member or a bare wallet address + */ + +ItemDelegate { + id: root + + property int usernameHeaderWidth: 0 + property int noOfMessagesHeaderWidth: 0 + property int holdingHeaderWidth: 0 + property bool isCurrentItem: false + + property bool remotelyDestructInProgress: false + property bool showSeparator: false + property bool isFirstRowAddress: false + + property string name + property string contactId + property string walletAddress + property string imageSource + property int noOfMessages + property int amount + + property var contactDetails + + signal clicked(var mouse) + + function updateContactDetails() { + contactDetails = contactId !== "" ? Utils.getContactDetailsAsJson(contactId, false) : null + } + + onContactIdChanged: root.updateContactDetails() + + onRemotelyDestructInProgressChanged: { + if(!remotelyDestructInProgress) + colorAnimation.restart() + } + + padding: 0 + horizontalPadding: Style.current.padding + topPadding: showSeparator ? Style.current.halfPadding : 0 + + background: Item { + Rectangle { + anchors.fill: parent + anchors.topMargin: root.topPadding + + radius: Style.current.radius + color: root.hovered || root.isCurrentItem ? Theme.palette.baseColor2 : "transparent" + } + + Rectangle { + anchors.fill: parent + anchors.topMargin: root.topPadding + + radius: Style.current.radius + color: "transparent" + + SequentialAnimation on color { + id: colorAnimation + + running: false + + PropertyAction { value: Theme.palette.primaryColor3 } + PauseAnimation { duration: 1000 } + ColorAnimation { to: "transparent"; duration: 500 } + } + } + + Rectangle { + visible: root.showSeparator + + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + + height: 1 + color: Theme.palette.baseColor2 + } + } + + contentItem: Item { + implicitWidth: delegateRow.implicitWidth + implicitHeight: delegateRow.implicitHeight + + RowLayout { + id: delegateRow + + spacing: Style.current.padding + + StatusListItem { + id: listItem + + readonly property bool unknownHolder: root.name === "" + readonly property string formattedTitle: unknownHolder ? "?" : root.name + + readonly property string addressElided: + StatusQUtils.Utils.elideText(root.walletAddress, 6, 3).replace("0x", + "0" + String.fromCodePoint(0x00D7)) + + Layout.preferredWidth: root.usernameHeaderWidth + + color: "transparent" + + leftPadding: 0 + rightPadding: 0 + sensor.enabled: false + title: unknownHolder ? addressElided : root.name + + statusListItemIcon.name: "?" + + subTitle: unknownHolder ? "" : addressElided + + statusListItemSubTitle.font.pixelSize: Theme.asideTextFontSize + statusListItemSubTitle.lineHeightMode: Text.FixedHeight + statusListItemSubTitle.lineHeight: 14 + + asset.name: root.imageSource + asset.isImage: true + asset.isLetterIdenticon: unknownHolder + asset.color: Theme.palette.userCustomizationColors[d.red2Color] + } + + TokenHolderNumberCell { + Layout.preferredWidth: root.noOfMessagesHeaderWidth + + text: root.name + ? LocaleUtils.numberToLocaleString(root.noOfMessages) + : "-" + } + + RowLayout { + Layout.preferredWidth: root.holdingHeaderWidth + spacing: 4 + + StatusBaseText { + Layout.fillWidth: true + horizontalAlignment: Qt.AlignRight + + text: StatusQUtils.Emoji.fromCodePoint("1f525") // :fire: emoji + font.pixelSize: Style.current.tertiaryTextFontSize + visible: root.remotelyDestructInProgress + color: Theme.palette.directColor1 + } + + TokenHolderNumberCell { + Layout.alignment: Qt.AlignRight + text: LocaleUtils.numberToLocaleString(root.amount) + } + + StatusLoadingIndicator { + Layout.preferredHeight: Theme.primaryTextFontSize + Layout.preferredWidth: Layout.preferredHeight + Layout.leftMargin: 6 + visible: root.remotelyDestructInProgress + color: Theme.palette.primaryColor1 + } + } + } + } + + MouseArea { + anchors.fill: parent + + acceptedButtons: Qt.AllButtons + cursorShape: Qt.PointingHandCursor + + onClicked: root.clicked(mouse) + } +} \ No newline at end of file diff --git a/ui/app/AppLayouts/Communities/controls/TokenHolderNumberCell.qml b/ui/app/AppLayouts/Communities/controls/TokenHolderNumberCell.qml new file mode 100644 index 00000000000..2ac9e93237f --- /dev/null +++ b/ui/app/AppLayouts/Communities/controls/TokenHolderNumberCell.qml @@ -0,0 +1,21 @@ + +import QtQuick 2.15 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 + +import utils 1.0 + +StatusBaseText { + id: root + + horizontalAlignment: Qt.AlignRight + verticalAlignment: Qt.AlignVCenter + + font.weight: Font.Medium + font.pixelSize: 13 + + color: Theme.palette.baseColor1 + elide: Qt.ElideRight +} diff --git a/ui/app/AppLayouts/Communities/panels/SortableTokenHoldersList.qml b/ui/app/AppLayouts/Communities/panels/SortableTokenHoldersList.qml index a2162cfa5f2..07d7a8b0b7e 100644 --- a/ui/app/AppLayouts/Communities/panels/SortableTokenHoldersList.qml +++ b/ui/app/AppLayouts/Communities/panels/SortableTokenHoldersList.qml @@ -9,13 +9,15 @@ import StatusQ.Core.Utils 0.1 as StatusQUtils import utils 1.0 +import "../controls" + /*! \qmltype SortableTokenHoldersList \inherits StatusListView \brief Shows list of users or addresses with corrensponding numbers of messages and holding amounts. - Expected roles: name, walletAddress, imageSource, noOfMessages, amount + Expected roles: contactId, name, walletAddress, imageSource, noOfMessages, amount */ StatusListView { id: root @@ -53,17 +55,6 @@ StatusListView { } } - component NumberCell: StatusBaseText { - horizontalAlignment: Qt.AlignRight - verticalAlignment: Qt.AlignVCenter - - font.weight: Font.Medium - font.pixelSize: 13 - - color: Theme.palette.baseColor1 - elide: Qt.ElideRight - } - QtObject { id: d @@ -150,165 +141,30 @@ StatusListView { } } - delegate: ItemDelegate { + delegate: TokenHolderListItem { id: delegate - readonly property bool remotelyDestructInProgress: - model.remotelyDestructState === Constants.ContractTransactionStatus.InProgress - - onRemotelyDestructInProgressChanged: { - if(!remotelyDestructInProgress) - colorAnimation.restart() - } - - padding: 0 - horizontalPadding: Style.current.padding - - topPadding: showSeparator ? Style.current.halfPadding : 0 - - readonly property string name: model.name - - readonly property bool isFirstRowAddress: { - if (model.name !== "") + width: ListView.view.width + usernameHeaderWidth: root.headerItem.usernameHeaderWidth + noOfMessagesHeaderWidth: root.headerItem.noOfMessagesHeaderWidth + holdingHeaderWidth: root.headerItem.holdingHeaderWidth + isCurrentItem: delegate.ListView.isCurrentItem + + remotelyDestructInProgress: model.remotelyDestructState === Constants.ContractTransactionStatus.InProgress + name: model.name + walletAddress: model.walletAddress + imageSource: model.imageSource + noOfMessages: model.noOfMessages + amount: model.amount + showSeparator: isFirstRowAddress && root.sortBy === TokenHoldersProxyModel.SortBy.Username + isFirstRowAddress: { + if (name !== "") return false const item = root.itemAtIndex(index - 1) return item && item.name } - readonly property bool showSeparator: isFirstRowAddress - && root.sortBy === TokenHoldersProxyModel.SortBy.Username - - width: ListView.view.width - - background: Item { - Rectangle { - anchors.fill: parent - anchors.topMargin: delegate.topPadding - - radius: Style.current.radius - color: (delegate.hovered || delegate.ListView.isCurrentItem) - ? Theme.palette.baseColor2 : "transparent" - } - - Rectangle { - anchors.fill: parent - anchors.topMargin: delegate.topPadding - - radius: Style.current.radius - color: "transparent" - - SequentialAnimation on color { - id: colorAnimation - - running: false - - PropertyAction { value: Theme.palette.primaryColor3 } - PauseAnimation { duration: 1000 } - ColorAnimation { to: "transparent"; duration: 500 } - } - } - - Rectangle { - visible: delegate.showSeparator - - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - - height: 1 - color: Theme.palette.baseColor2 - } - } - - contentItem: Item { - implicitWidth: delegateRow.implicitWidth - implicitHeight: delegateRow.implicitHeight - - RowLayout { - id: delegateRow - - spacing: Style.current.padding - - StatusListItem { - id: listItem - - readonly property bool unknownHolder: model.name === "" - readonly property string formattedTitle: unknownHolder - ? "?" : model.name - - readonly property string addressElided: - StatusQUtils.Utils.elideText( - model.walletAddress, 6, 3).replace("0x", "0×") - - Layout.preferredWidth: root.headerItem.usernameHeaderWidth - - color: "transparent" - - leftPadding: 0 - rightPadding: 0 - sensor.enabled: false - title: unknownHolder ? addressElided : model.name - - statusListItemIcon.name: "?" - - subTitle: unknownHolder ? "" : addressElided - - statusListItemSubTitle.font.pixelSize: Theme.asideTextFontSize - statusListItemSubTitle.lineHeightMode: Text.FixedHeight - statusListItemSubTitle.lineHeight: 14 - - asset.name: model.imageSource - asset.isImage: true - asset.isLetterIdenticon: unknownHolder - asset.color: Theme.palette.userCustomizationColors[d.red2Color] - } - - NumberCell { - Layout.preferredWidth: root.headerItem.noOfMessagesHeaderWidth - - text: model.name - ? LocaleUtils.numberToLocaleString(model.noOfMessages) - : "-" - } - - RowLayout { - Layout.preferredWidth: root.headerItem.holdingHeaderWidth - spacing: 4 - - StatusBaseText { - Layout.fillWidth: true - horizontalAlignment: Qt.AlignRight - - text: StatusQUtils.Emoji.fromCodePoint("1f525") // :fire: emoji - font.pixelSize: Style.current.tertiaryTextFontSize - visible: delegate.remotelyDestructInProgress - color: Theme.palette.directColor1 - } - - NumberCell { - Layout.alignment: Qt.AlignRight - text: LocaleUtils.numberToLocaleString(model.amount) - } - - StatusLoadingIndicator { - Layout.preferredHeight: Theme.primaryTextFontSize - Layout.preferredWidth: Layout.preferredHeight - Layout.leftMargin: 6 - visible: delegate.remotelyDestructInProgress - color: Theme.palette.primaryColor1 - } - } - } - } - - MouseArea { - anchors.fill: parent - - acceptedButtons: Qt.AllButtons - cursorShape: Qt.PointingHandCursor - - onClicked: root.clicked(model.index, delegate, mouse) - } + onClicked: root.clicked(model.index, delegate, mouse) } } diff --git a/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml b/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml index 05c21ba16ca..fb8ef3fb6fc 100644 --- a/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml +++ b/ui/app/AppLayouts/Communities/panels/TokenHoldersList.qml @@ -1,6 +1,6 @@ -import QtQuick 2.14 -import QtQuick.Layouts 1.14 -import QtQuick.Controls 2.14 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -12,6 +12,8 @@ import SortFilterProxyModel 0.2 import utils 1.0 import shared.controls 1.0 +import "../controls" + /*! \qmltype TokenHoldersList \inherits StatusListView @@ -141,16 +143,6 @@ Item { } } - component NumberCell: StatusBaseText { - horizontalAlignment: Qt.AlignRight - - font.weight: Font.Medium - font.pixelSize: 13 - - color: Theme.palette.baseColor1 - elide: Qt.ElideRight - } - delegate: ItemDelegate { id: delegate width: ListView.view.width @@ -215,7 +207,7 @@ Item { asset.color: Theme.palette.getColor("red2") } - NumberCell { + TokenHolderNumberCell { Layout.preferredWidth: header.holdingHeaderWidth Layout.leftMargin: Style.current.halfPadding