From e47bfa3657cabba97d9643c4afbd7075f8a561e6 Mon Sep 17 00:00:00 2001 From: Stefan Date: Wed, 3 Aug 2022 14:49:34 +0200 Subject: [PATCH] feature(StatusAddressPanel): Implement generic address display control Provides frame, prefix icon and copy operation int addition to StatusAddress Updates: #6798 --- sandbox/pages/StatusAddressPage.qml | 91 ++++++++- src/StatusQ/Components/StatusAddress.qml | 6 +- src/StatusQ/Components/StatusAddressPanel.qml | 189 ++++++++++++++++++ src/StatusQ/Components/qmldir | 1 + src/statusq.qrc | 1 + 5 files changed, 276 insertions(+), 12 deletions(-) create mode 100644 src/StatusQ/Components/StatusAddressPanel.qml diff --git a/sandbox/pages/StatusAddressPage.qml b/sandbox/pages/StatusAddressPage.qml index 544e2985..13d9d92d 100644 --- a/sandbox/pages/StatusAddressPage.qml +++ b/sandbox/pages/StatusAddressPage.qml @@ -2,24 +2,97 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 import QtQuick.Layouts 1.14 +import StatusQ.Core 0.1 import StatusQ.Components 0.1 import Sandbox 0.1 -Column { - spacing: 8 +Item { + id: root - StatusAddress { - text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9" - } + implicitWidth: mainLayout.implicitWidth + implicitHeight: mainLayout.implicitHeight + + GridLayout { + id: mainLayout + + columns: 2 + + anchors.fill: parent + + columnSpacing: 15 + rowSpacing: 8 + + StatusBaseText { text: "StatusAddress\nsimple" } + StatusAddress { + text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9" + } - Item { - width: 200 - height: childrenRect.height + StatusBaseText { text: "StatusAddress\nclick-expandable" } StatusAddress { text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9" + + Layout.preferredWidth: 200 + expandable: true - width: parent.width + } + + StatusBaseText { text: `StatusAddressPanel\nfont.pixelSize: 13, copyable, no frame`} + StatusAddressPanel { + address: "0xDC2c4826f6C56F61C1b9cC6Bb531d0Fe45402fC9" + + font.pixelSize: 13 + font.weight: Font.Normal + + showFrame: false + + onDoCopy: copyAction.text = address + } + + StatusBaseText { text: `StatusAddressPanel\ncompact; width ${simpleAddressPanel.width}px ${simpleAddressPanel.height}px`} + StatusAddressPanel { + id: simpleAddressPanel + address: "0xd8593DEACe2f44dF35dd23fD2BAFC2daeC2ae033" + showCopy: false + expanded: false + onDoCopy: copyAction.text = address + expandable: true + } + + StatusBaseText { text: "StatusAddressPanel\ncopy-icon, non-expandable" } + StatusAddressPanel { + address: "0xDd5A0755e99D66a583253372B569231968A6CF7b" + onDoCopy: copyAction.text = address + } + + StatusBaseText { text: "StatusAddressPanel\ncopy hiden" } + StatusAddressPanel { + address: "0xd2D44C2A1E78975506e474Ecdc7E4F272D7e9A6c" + autHideCopyIcon: true + onDoCopy: copyAction.text = address + expandable: true + } + StatusBaseText { text: "StatusAddressPanel\ncopy hiden, non-expandable" } + StatusAddressPanel { + address: "0xd2a44BA31E78975506e474Ecdc7E4F272D7F3BC5" + autHideCopyIcon: true + expanded: false + onDoCopy: copyAction.text = address + } + + Rectangle { + color: "lightblue" + + Layout.fillWidth: true + Layout.columnSpan: mainLayout.columns + Layout.preferredHeight: 2 + } + + StatusBaseText { + text: qsTr("Copy Action: ") + } + StatusBaseText { + id: copyAction } } } diff --git a/src/StatusQ/Components/StatusAddress.qml b/src/StatusQ/Components/StatusAddress.qml index 4918859e..ee3fe56c 100644 --- a/src/StatusQ/Components/StatusAddress.qml +++ b/src/StatusQ/Components/StatusAddress.qml @@ -4,6 +4,7 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 +/// Forces size, hard to reuse it StatusBaseText { id: root @@ -18,7 +19,6 @@ StatusBaseText { color: Theme.palette.baseColor1 Component.onCompleted: { - maxWidth = width expanded = actualWidth <= maxWidth } @@ -29,9 +29,9 @@ StatusBaseText { onClicked: { if (root.expanded) { - width = root.width = root.maxWidth + root.width = root.maxWidth } else { - width = root.width = root.actualWidth + root.width = root.actualWidth } root.expanded = !root.expanded } diff --git a/src/StatusQ/Components/StatusAddressPanel.qml b/src/StatusQ/Components/StatusAddressPanel.qml new file mode 100644 index 00000000..d1e8de2d --- /dev/null +++ b/src/StatusQ/Components/StatusAddressPanel.qml @@ -0,0 +1,189 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 + +/*! + \qmltype StatusAddressPanel + \inherits Item + \inqmlmodule StatusQ.Components + \since StatusQ.Components 0.1 + \brief Show an address as defined efined in design https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=4222%3A178403 and https://www.figma.com/file/h2Ab3k4wy1Y7SFHEvbcZZx/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop-(Copy)?node-id=1009%3A106451 + + Panel's components: + - Address: displays the rquired \c address property + - Frame: a rounded frame and the \c 0x icon prefix + - Copy action: clickable copy icon. Activable using \c showCopy + + \qmlproperty string address address to show + \qmlproperty bool showCopy if \c true shows the copy action which triggers \c doCopy signal + \qmlproperty bool autHideCopyIcon if \c true shows the copy action when hovered. \see showCopy + \qmlproperty alias showFrame if \c true displays frame and \c 0x prefix + \qmlproperty bool expandable if \c true user can toggle between expanded and compact version; \see expanded + \qmlproperty bool expanded if \c true show address in full; if \c false show the address in compact mode eliding in the middle + + \qmlproperty font: statusAddress.font + + signal doCopy(string address) + + \see StatusImageCrop for more details + + Usage example: + \qml + StatusAddressPanel { + address: currentAccount.mixedcaseAddress + + autHideCopyIcon: true + expanded: false + + onDoCopy: (address) => root.store.copyToClipboard(address) + } + \endqml + For a list of components available see StatusQ. + */ +Item { + id: root + + /*required*/ property string address: "" + property bool showCopy: true + property bool autHideCopyIcon: false + property alias showFrame: frameRect.visible + property bool expandable: false + property bool expanded: true + + property alias font: statusAddress.font + + signal doCopy(string address) + + implicitWidth: frameLayout.implicitWidth + implicitHeight: frameLayout.implicitHeight + + RowLayout { + id: frameLayout + + anchors.fill: parent + + RowLayout { + Layout.leftMargin: frameRect.visible ? 8 : undefined // Theme.geometry.halfPadding + Layout.rightMargin: Layout.leftMargin + Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter + Layout.minimumWidth: 120 + Layout.preferredHeight: 32 + + spacing: 6 + + StatusIcon { + icon: "address" + + Layout.alignment: Qt.AlignVCenter + Layout.preferredWidth: 19 + Layout.preferredHeight: 19 + + visible: frameRect.visible + + color: Theme.palette.baseColor1 + opacity: 0.5 + } + + // Ensure the eliding is done in the middle of the value not taking into account `0x` + RowLayout { + spacing: 0 + + Layout.alignment: Qt.AlignVCenter + + StatusBaseText { + text: "0x" + + Layout.alignment: Qt.AlignVCenter + + font: statusAddress.font + color: statusAddress.color + } + + StatusBaseText { + id: statusAddress + + text: root.address.replace("0x", "").replace("0X", "") + + Layout.preferredWidth: expanded ? implicitWidth : (implicitWidth * 0.25).toFixed() + Layout.alignment: Qt.AlignVCenter + + font.family: Theme.palette.monoFont.name + font.pixelSize: 15 + font.weight: Font.Medium + elide: Text.ElideMiddle + color: Theme.palette.baseColor1 + } + } + + StatusIcon { + icon: "copy" + + visible: root.autHideCopyIcon ? (mainMouseArea.containsMouse || copyMouseArea.containsMouse ) + : root.showCopy + + Layout.alignment: Qt.AlignVCenter + Layout.preferredWidth: (statusAddress.font.pixelSize * 1.2).toFixed() + Layout.preferredHeight: Layout.preferredWidth + + color: Theme.palette.baseColor1 + + MouseArea { + id: copyMouseArea + + anchors.fill: parent + + hoverEnabled: true + cursorShape: Qt.ArrowCursor + preventStealing: true + + onClicked: root.doCopy(root.address) + z: frameRect.z + 1 + } + + StatusIcon { + icon: parent.icon + + x: 1 + y: 1 + width: parent.width + height: parent.height + + visible: copyMouseArea.containsMouse && !copyMouseArea.pressed + + color: "black" + opacity: 0.4 + z: parent.z + 1 + } + } + } + } + + Rectangle { + id: frameRect + + anchors.fill: frameLayout + + color: "transparent" + border.width: 1 + border.color: Theme.palette.baseColor2 + radius: 36 + } + + MouseArea { + id: mainMouseArea + + anchors.fill: parent + + hoverEnabled: root.expandable || root.autHideCopyIcon + enabled: (root.autHideCopyIcon && root.showCopy) || root.expandable + acceptedButtons: root.expandable ? Qt.LeftButton : Qt.NoButton + cursorShape: root.expandable ? Qt.PointingHandCursor : Qt.ArrowCursor + + onClicked: root.expanded = !root.expanded + z: frameLayout.z - 1 + } +} diff --git a/src/StatusQ/Components/qmldir b/src/StatusQ/Components/qmldir index 79e83482..7c0821d2 100644 --- a/src/StatusQ/Components/qmldir +++ b/src/StatusQ/Components/qmldir @@ -1,6 +1,7 @@ module StatusQ.Components StatusAddress 0.1 StatusAddress.qml +StatusAddressPanel 0.1 StatusAddressPanel.qml StatusBadge 0.1 StatusBadge.qml StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml StatusChatList 0.1 StatusChatList.qml diff --git a/src/statusq.qrc b/src/statusq.qrc index f8bd71e3..af10cfbd 100644 --- a/src/statusq.qrc +++ b/src/statusq.qrc @@ -15,6 +15,7 @@ StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml StatusQ/Components/qmldir StatusQ/Components/StatusAddress.qml + StatusQ/Components/StatusAddressPanel.qml StatusQ/Components/StatusBadge.qml StatusQ/Components/StatusCard.qml StatusQ/Components/StatusChatInfoToolBar.qml