From f5e67fc658d40e5bc04f2fbe64135442ba37a79f Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Tue, 15 Mar 2022 20:34:28 +0100 Subject: [PATCH] feat(@desktop/wallet): adapt receive modal design closes #5039 --- .../Browser/popups/BrowserWalletMenu.qml | 2 + .../AppLayouts/Browser/stores/RootStore.qml | 4 + .../AppLayouts/Wallet/panels/WalletHeader.qml | 1 + .../AppLayouts/Wallet/popups/ReceiveModal.qml | 189 ++++++++++++------ ui/app/AppLayouts/Wallet/stores/RootStore.qml | 4 + .../shared/controls/CopyToClipBoardButton.qml | 69 ++----- ui/imports/shared/panels/TextWithLabel.qml | 1 + .../shared/status/StatusExpandableAddress.qml | 1 + .../shared/status/StatusSectionDescItem.qml | 1 + 9 files changed, 160 insertions(+), 112 deletions(-) diff --git a/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml b/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml index 9e5a15f416..d9682352ca 100644 --- a/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml +++ b/ui/app/AppLayouts/Browser/popups/BrowserWalletMenu.qml @@ -146,7 +146,9 @@ Popup { anchors.rightMargin: Style.current.padding anchors.top: parent.top anchors.topMargin: Style.current.padding + color: Style.current.transparent textToCopy: accountSelector.selectedAccount.address + store: RootStore } StatusFlatRoundButton { diff --git a/ui/app/AppLayouts/Browser/stores/RootStore.qml b/ui/app/AppLayouts/Browser/stores/RootStore.qml index bd4a2f40a9..94010ca181 100644 --- a/ui/app/AppLayouts/Browser/stores/RootStore.qml +++ b/ui/app/AppLayouts/Browser/stores/RootStore.qml @@ -78,4 +78,8 @@ QtObject { } return tempUrl } + + function copyToClipboard(text) { + globalUtils.copyToClipboard(text) + } } diff --git a/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml b/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml index 1ba15d66bb..334951bb7a 100644 --- a/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml +++ b/ui/app/AppLayouts/Wallet/panels/WalletHeader.qml @@ -95,6 +95,7 @@ Item { destroy(); } selectedAccount: walletHeader.walletStore.currentAccount + anchors.centerIn: parent } } diff --git a/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml b/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml index b0b74c8dbe..efca277ee0 100644 --- a/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml +++ b/ui/app/AppLayouts/Wallet/popups/ReceiveModal.qml @@ -1,82 +1,153 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 +import QtGraphicalEffects 1.13 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 +import StatusQ.Popups 0.1 +import StatusQ.Components 0.1 import utils 1.0 -import shared.popups 1.0 import shared.controls 1.0 + import "../stores" -// TODO: replace with StatusModal -ModalPopup { - property alias selectedAccount: accountSelector.selectedAccount +StatusModal { id: popup + property alias selectedAccount: accountSelector.selectedAccount + //% "Receive" - title: qsTrId("receive") - height: 500 - width: 500 + header.title: qsTrId("receive") + contentHeight: layout.implicitHeight + width: 556 + contentItem: Column { + id: layout + width: popup.width - Rectangle { - id: qrCodeBox - height: 240 - width: 240 - anchors.top: parent.top - anchors.horizontalCenter: parent.horizontalCenter - radius: Style.current.radius - border.width: 1 - border.color: Style.current.border + topPadding: Style.current.smallPadding + spacing: Style.current.bigPadding - Image { - id: qrCodeImage - asynchronous: true - fillMode: Image.PreserveAspectFit + Rectangle { + id: qrCodeBox anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter - height: parent.height - Style.current.padding - width: parent.width - Style.current.padding - mipmap: true - smooth: false - } - } + height: 339 + width: 339 + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Item { + width: qrCodeBox.width + height: qrCodeBox.height + Rectangle { + anchors.top: parent.top + anchors.left: parent.left + width: qrCodeBox.width + height: qrCodeBox.height + radius: Style.current.bigPadding + border.width: 1 + border.color: Style.current.border + } + Rectangle { + anchors.top: parent.top + anchors.right: parent.right + width: Style.current.bigPadding + height: Style.current.bigPadding + } + Rectangle { + anchors.bottom: parent.bottom + anchors.left: parent.left + width: Style.current.bigPadding + height: Style.current.bigPadding + } + } + } - StatusAccountSelector { - id: accountSelector - label: "" - showAccountDetails: false - accounts: RootStore.accounts - currency: RootStore.currentCurrency - anchors.top: qrCodeBox.bottom - anchors.topMargin: Style.current.padding - anchors.horizontalCenter: parent.horizontalCenter - width: 240 - dropdownWidth: parent.width - (Style.current.padding * 2) - dropdownAlignment: StatusSelect.MenuAlignment.Center - onSelectedAccountChanged: { - if (selectedAccount.address) { - qrCodeImage.source = RootStore.getQrCode(selectedAccount.address) - txtWalletAddress.text = selectedAccount.address + Image { + id: qrCodeImage + anchors.centerIn: parent + height: parent.height + width: parent.width + asynchronous: true + fillMode: Image.PreserveAspectFit + mipmap: true + smooth: false + } + + Rectangle { + anchors.centerIn: qrCodeImage + width: 78 + height: 78 + color: "white" + StatusIcon { + anchors.centerIn: parent + anchors.margins: 2 + width: 78 + height: 78 + source: Style.svg("status-logo-icon") + } + } + } + + StatusAccountSelector { + id: accountSelector + anchors.horizontalCenter: parent.horizontalCenter + width: 240 + label: "" + showAccountDetails: false + accounts: RootStore.accounts + currency: RootStore.currentCurrency + dropdownWidth: parent.width - (Style.current.padding * 2) + dropdownAlignment: StatusSelect.MenuAlignment.Center + onSelectedAccountChanged: { + if (selectedAccount.address) { + qrCodeImage.source = RootStore.getQrCode(selectedAccount.address) + txtWalletAddress.text = selectedAccount.address + } + } + } + + Item { + anchors.horizontalCenter: parent.horizontalCenter + width: parent.width + height: addressLabel.height + copyButton.height + Column { + id: addressLabel + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: Style.current.bigPadding + StatusBaseText { + id: contactsLabel + font.pixelSize: 15 + color: Theme.palette.baseColor1 + text: qsTr("Your Address") + } + StatusAddress { + id: txtWalletAddress + color: Theme.palette.directColor1 + font.pixelSize: 15 + } + } + Column { + id: copyButton + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: Style.current.bigPadding + spacing: 5 + CopyToClipBoardButton { + store: RootStore + textToCopy: txtWalletAddress.text + } + StatusBaseText { + anchors.horizontalCenter: parent.horizontalCenter + font.pixelSize: 13 + color: Theme.palette.primaryColor1 + text: qsTr("Copy") + } } } } - - Input { - id: txtWalletAddress - //% "Wallet address" - label: qsTrId("wallet-address") - anchors.top: accountSelector.bottom - anchors.topMargin: Style.current.padding - anchors.left: parent.left - anchors.leftMargin: Style.current.padding - anchors.right: parent.right - anchors.rightMargin: Style.current.padding - copyToClipboard: true - textField.readOnly: true - customHeight: 56 - } - } diff --git a/ui/app/AppLayouts/Wallet/stores/RootStore.qml b/ui/app/AppLayouts/Wallet/stores/RootStore.qml index bfc2a2f533..24b6143a75 100644 --- a/ui/app/AppLayouts/Wallet/stores/RootStore.qml +++ b/ui/app/AppLayouts/Wallet/stores/RootStore.qml @@ -187,4 +187,8 @@ QtObject { function toggleNetwork(chainId) { networksModule.toggleNetwork(chainId) } + + function copyToClipboard(text) { + globalUtils.copyToClipboard(text) + } } diff --git a/ui/imports/shared/controls/CopyToClipBoardButton.qml b/ui/imports/shared/controls/CopyToClipBoardButton.qml index 2f83ac6127..8daf31dc18 100644 --- a/ui/imports/shared/controls/CopyToClipBoardButton.qml +++ b/ui/imports/shared/controls/CopyToClipBoardButton.qml @@ -1,79 +1,42 @@ import QtQuick 2.13 -import QtQuick.Controls 2.13 -import QtGraphicalEffects 1.13 -import StatusQ.Controls 0.1 as StatusQ -import utils 1.0 +import StatusQ.Controls 0.1 + import shared.stores 1.0 -import "./" -import "../" +import utils 1.0 -// TODO: Replace with StatusQ components -Rectangle { +StatusRoundButton { id: copyToClipboardButton - height: 32 - width: 32 - radius: 8 - color: Style.current.transparent + property var onClick: function() {} property string textToCopy: "" property bool tooltipUnder: false property var store - Image { - width: 20 - height: 20 - sourceSize.width: width - sourceSize.height: height - source: Style.svg("copy-to-clipboard-icon") - anchors.horizontalCenter: parent.horizontalCenter - anchors.verticalCenter: parent.verticalCenter + icon.name: "copy" - ColorOverlay { - anchors.fill: parent - antialiasing: true - source: parent - color: Style.current.primary + onPressed: { + if (!toolTip.visible) { + toolTip.visible = true } } - - MouseArea { - cursorShape: Qt.PointingHandCursor - anchors.fill: parent - hoverEnabled: true - onExited: { - parent.color = Style.current.transparent - } - onEntered:{ - parent.color = Style.current.backgroundHover - } - onPressed: { - parent.color = Style.current.backgroundHover - if (!toolTip.visible) { - toolTip.visible = true - } - } - onReleased: { - parent.color = Style.current.backgroundHover - } - onClicked: { - if (textToCopy) { - copyToClipboardButton.store.copyToClipboard(textToCopy) - } - onClick() + onClicked: { + if (textToCopy) { + store.copyToClipboard(textToCopy) } + onClick() } - StatusQ.StatusToolTip { + StatusToolTip { id: toolTip //% "Copied!" text: qsTrId("copied-") - orientation: tooltipUnder ? StatusQ.StatusToolTip.Orientation.Bottom: StatusQ.StatusToolTip.Orientation.Top + orientation: tooltipUnder ? StatusToolTip.Orientation.Bottom: StatusToolTip.Orientation.Top } Timer { - id:hideTimer + id: hideTimer interval: 2000 running: toolTip.visible onTriggered: { diff --git a/ui/imports/shared/panels/TextWithLabel.qml b/ui/imports/shared/panels/TextWithLabel.qml index 7f4e88a321..7a34184807 100644 --- a/ui/imports/shared/panels/TextWithLabel.qml +++ b/ui/imports/shared/panels/TextWithLabel.qml @@ -53,6 +53,7 @@ Item { Component { id: copyComponent CopyToClipBoardButton { + color: Style.current.transparent textToCopy: infoText.textToCopy } } diff --git a/ui/imports/shared/status/StatusExpandableAddress.qml b/ui/imports/shared/status/StatusExpandableAddress.qml index 9058a6768d..1e9d15347d 100644 --- a/ui/imports/shared/status/StatusExpandableAddress.qml +++ b/ui/imports/shared/status/StatusExpandableAddress.qml @@ -81,6 +81,7 @@ Item { anchors.left: control.right anchors.leftMargin: Style.current.smallPadding anchors.verticalCenter: parent.verticalCenter + color: Style.current.transparent textToCopy: root.address store: root.store MouseArea { diff --git a/ui/imports/shared/status/StatusSectionDescItem.qml b/ui/imports/shared/status/StatusSectionDescItem.qml index cf18105511..c59458c1f6 100644 --- a/ui/imports/shared/status/StatusSectionDescItem.qml +++ b/ui/imports/shared/status/StatusSectionDescItem.qml @@ -43,6 +43,7 @@ Item { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.right anchors.leftMargin: Style.current.smallPadding + color: Style.current.transparent store: root.store } }