From 85a88a77eda95f1f3d0ba0c7eba564747ea0b4c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Mon, 5 Aug 2024 20:15:27 +0200 Subject: [PATCH] fix: Add additional information to the Beta tags (#15988) - display additional beta information as a tooltip - don't overlap the Beta badge with the unread msg indicator - some minor cleanups & fixes Fixes #15795 Fixes #15929 --- ...entalTagPage.qml => StatusBetaTagPage.qml} | 12 ++++++- .../src/StatusQ/Components/StatusBetaTag.qml | 15 +++++++- .../Components/StatusNavigationListItem.qml | 11 ++---- .../Components/StatusSmartIdenticon.qml | 4 +-- .../src/StatusQ/Controls/StatusToolTip.qml | 5 +-- .../AppLayouts/Profile/panels/MenuPanel.qml | 13 ++++--- .../Profile/stores/ProfileSectionStore.qml | 8 +++-- .../AppLayouts/Profile/views/SyncingView.qml | 1 + .../AppLayouts/Profile/views/WalletView.qml | 4 ++- .../Profile/views/wallet/MainView.qml | 2 ++ ui/app/AppLayouts/Wallet/WalletLayout.qml | 2 +- .../Wallet/controls/TokenSelectorNew.qml | 1 + .../AppLayouts/Wallet/panels/WalletFooter.qml | 4 +-- .../panels/ActivityCenterPopupTopBarPanel.qml | 4 ++- ui/imports/shared/views/HistoryView.qml | 34 +++++++++++++++++++ ui/imports/utils/Utils.qml | 13 ++++++- 16 files changed, 106 insertions(+), 27 deletions(-) rename storybook/pages/{StatusExperimentalTagPage.qml => StatusBetaTagPage.qml} (72%) diff --git a/storybook/pages/StatusExperimentalTagPage.qml b/storybook/pages/StatusBetaTagPage.qml similarity index 72% rename from storybook/pages/StatusExperimentalTagPage.qml rename to storybook/pages/StatusBetaTagPage.qml index 0050e9b721..8976bd335b 100644 --- a/storybook/pages/StatusExperimentalTagPage.qml +++ b/storybook/pages/StatusBetaTagPage.qml @@ -17,8 +17,8 @@ SplitView { SplitView.fillHeight: true StatusBetaTag { - id: tag anchors.centerIn: parent + tooltipText: ctrlTooltip.text } } @@ -27,6 +27,16 @@ SplitView { SplitView.preferredWidth: 400 SplitView.fillHeight: true + + RowLayout { + Label { + text: "Tooltip:" + } + TextField { + id: ctrlTooltip + text: "Hic sunt leones!!!" + } + } } } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml b/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml index e71460c6f5..e9e5b0afeb 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml @@ -1,10 +1,14 @@ -import QtQuick 2.13 +import QtQuick 2.15 + import StatusQ.Core 0.1 +import StatusQ.Controls 0.1 import StatusQ.Core.Theme 0.1 Rectangle { id: root + property alias tooltipText: tip.text + implicitHeight: 20 implicitWidth: 36 radius: 4 @@ -20,4 +24,13 @@ Rectangle { anchors.centerIn: parent text: "Beta" } + + StatusToolTip { + id: tip + visible: hoverHandler.hovered && !!text + } + + HoverHandler { + id: hoverHandler + } } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml index 6c73bd4819..de1e355abe 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml @@ -1,4 +1,5 @@ -import QtQuick 2.13 +import QtQuick 2.15 + import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Components 0.1 @@ -29,14 +30,6 @@ StatusListItem { Theme.palette.baseColor4 } - MouseArea { - id: sensor - anchors.fill: parent - cursorShape: Qt.PointingHandCursor - hoverEnabled: true - onClicked: statusNavigationListItem.clicked(statusNavigationListItem.itemId, mouse) - } - components: [ StatusBadge { id: statusBadge diff --git a/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml b/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml index 3d03a7a508..90180869ca 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusSmartIdenticon.qml @@ -1,9 +1,9 @@ -import QtQuick 2.13 +import QtQuick 2.15 + import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 - Loader { id: root diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml b/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml index 74c0a29e99..67e17019e8 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusToolTip.qml @@ -1,5 +1,6 @@ -import QtQuick 2.13 -import QtQuick.Controls 2.13 +import QtQuick 2.15 +import QtQuick.Controls 2.15 + import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 diff --git a/ui/app/AppLayouts/Profile/panels/MenuPanel.qml b/ui/app/AppLayouts/Profile/panels/MenuPanel.qml index 1a84871a5a..8393ccc6c1 100644 --- a/ui/app/AppLayouts/Profile/panels/MenuPanel.qml +++ b/ui/app/AppLayouts/Profile/panels/MenuPanel.qml @@ -28,6 +28,7 @@ Column { Repeater { id: mainMenuItems delegate: StatusNavigationListItem { + id: navigationItem objectName: itemId + "-MainMenuItem" width: root.width itemId: model.subsection @@ -41,7 +42,7 @@ Column { return !root.privacyStore.mnemonicBackedUp case Constants.settingsSubsection.syncingSettings: return root.devicesStore.devicesModel.count - root.devicesStore.devicesModel.pairedCount - default: return ""; + default: return 0 } } visible: { @@ -55,17 +56,21 @@ Column { } Loader { + id: betaTagLoader + readonly property string experimentalTooltip: model.experimentalTooltip active: model.isExperimental anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: 15 + anchors.rightMargin: Style.current.padding + (navigationItem.badge.visible ? navigationItem.badge.width + Style.current.halfPadding : 0) - sourceComponent: StatusBetaTag {} + sourceComponent: StatusBetaTag { + tooltipText: betaTagLoader.experimentalTooltip + } } } } - StatusListSectionHeadline { + StatusListSectionHeadline { text: qsTr("Apps") width: root.width } diff --git a/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml b/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml index 7f4ccdefb1..b82e97f6b9 100644 --- a/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml +++ b/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml @@ -108,11 +108,15 @@ QtObject { append({subsection: Constants.settingsSubsection.ensUsernames, text: qsTr("ENS usernames"), icon: "username", - isExperimental: true}) + isExperimental: true, + experimentalTooltip: qsTr("This section is going through a redesign.") + }) append({subsection: Constants.settingsSubsection.syncingSettings, text: qsTr("Syncing"), icon: "rotate", - isExperimental: true}) + isExperimental: true, + experimentalTooltip: qsTr("Connection problems can happen.
If they do, please use the Enter a Seed Phrase feature instead.") + }) } } diff --git a/ui/app/AppLayouts/Profile/views/SyncingView.qml b/ui/app/AppLayouts/Profile/views/SyncingView.qml index 5c39c21304..706847ddc6 100644 --- a/ui/app/AppLayouts/Profile/views/SyncingView.qml +++ b/ui/app/AppLayouts/Profile/views/SyncingView.qml @@ -188,6 +188,7 @@ SettingsContentBase { anchors.left: parent.right anchors.leftMargin: 8 anchors.verticalCenter: parent.verticalCenter + tooltipText: qsTr("Connection problems can happen.
If they do, please use the Enter a Seed Phrase feature instead.") } } } diff --git a/ui/app/AppLayouts/Profile/views/WalletView.qml b/ui/app/AppLayouts/Profile/views/WalletView.qml index c2d8ee444a..fb99d29471 100644 --- a/ui/app/AppLayouts/Profile/views/WalletView.qml +++ b/ui/app/AppLayouts/Profile/views/WalletView.qml @@ -388,7 +388,9 @@ SettingsContentBase { Component { id: experimentalTagComponent - StatusBetaTag {} + StatusBetaTag { + tooltipText: qsTr("Under construction, you might experience some minor issues") + } } Component { diff --git a/ui/app/AppLayouts/Profile/views/wallet/MainView.qml b/ui/app/AppLayouts/Profile/views/wallet/MainView.qml index 780809132b..bfe9178e90 100644 --- a/ui/app/AppLayouts/Profile/views/wallet/MainView.qml +++ b/ui/app/AppLayouts/Profile/views/wallet/MainView.qml @@ -146,6 +146,7 @@ Column { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 125 + tooltipText: qsTr("Under construction, you might experience some minor issues") } } @@ -168,6 +169,7 @@ Column { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.leftMargin: 135 + tooltipText: qsTr("Under construction, you might experience some minor issues") } } diff --git a/ui/app/AppLayouts/Wallet/WalletLayout.qml b/ui/app/AppLayouts/Wallet/WalletLayout.qml index 92c33bab1a..71338702ff 100644 --- a/ui/app/AppLayouts/Wallet/WalletLayout.qml +++ b/ui/app/AppLayouts/Wallet/WalletLayout.qml @@ -204,7 +204,7 @@ Item { sendModal: root.sendModalPopup networkConnectionStore: root.networkConnectionStore - headerButton.text: RootStore.overview.ens || StatusQUtils.Utils.elideText(RootStore.overview.mixedcaseAddress, 6, 4) + headerButton.text: RootStore.overview.ens || StatusQUtils.Utils.elideAndFormatWalletAddress(RootStore.overview.mixedcaseAddress) headerButton.visible: !RootStore.overview.isAllAccounts onLaunchShareAddressModal: Global.openShowQRPopup({ switchingAccounsEnabled: true, diff --git a/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml b/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml index d787628184..01c1d9888e 100644 --- a/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml +++ b/ui/app/AppLayouts/Wallet/controls/TokenSelectorNew.qml @@ -188,6 +188,7 @@ Control { } MouseArea { + cursorShape: root.enabled ? Qt.PointingHandCursor : undefined anchors.fill: parent onClicked: dropdown.opened ? dropdown.close() : dropdown.open() } diff --git a/ui/app/AppLayouts/Wallet/panels/WalletFooter.qml b/ui/app/AppLayouts/Wallet/panels/WalletFooter.qml index 7dae87f5c8..417b467768 100644 --- a/ui/app/AppLayouts/Wallet/panels/WalletFooter.qml +++ b/ui/app/AppLayouts/Wallet/panels/WalletFooter.qml @@ -144,9 +144,9 @@ Rectangle { StatusFlatButton { id: swap - interactive: !d.isCollectibleSoulbound && networkConnectionStore.sendBuyBridgeEnabled + interactive: !d.isCollectibleViewed && networkConnectionStore.sendBuyBridgeEnabled visible: d.swapActionAvailable - tooltip.text: d.isCollectibleSoulbound ? qsTr("Soulbound collectibles cannot be swapped") : networkConnectionStore.sendBuyBridgeToolTipText + tooltip.text: d.isCollectibleViewed ? qsTr("Collectibles cannot be swapped") : networkConnectionStore.sendBuyBridgeToolTipText icon.name: "swap" text: qsTr("Swap") onClicked: root.launchSwapModal() diff --git a/ui/app/mainui/activitycenter/panels/ActivityCenterPopupTopBarPanel.qml b/ui/app/mainui/activitycenter/panels/ActivityCenterPopupTopBarPanel.qml index d2385a6fbe..493f85caa5 100644 --- a/ui/app/mainui/activitycenter/panels/ActivityCenterPopupTopBarPanel.qml +++ b/ui/app/mainui/activitycenter/panels/ActivityCenterPopupTopBarPanel.qml @@ -76,7 +76,9 @@ Item { } } - StatusBetaTag {} + StatusBetaTag { + tooltipText: qsTr("Under construction.
More notification types to be coming soon.") + } StatusFlatRoundButton { id: markAllReadBtn diff --git a/ui/imports/shared/views/HistoryView.qml b/ui/imports/shared/views/HistoryView.qml index aeb6ca8622..5da990a42c 100644 --- a/ui/imports/shared/views/HistoryView.qml +++ b/ui/imports/shared/views/HistoryView.qml @@ -4,6 +4,7 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import StatusQ.Core 0.1 +import StatusQ.Core.Utils 0.1 as SQUtils import StatusQ.Components 0.1 import StatusQ.Controls 0.1 import StatusQ.Core.Theme 0.1 @@ -105,6 +106,39 @@ ColumnLayout { } } + InformationTag { + id: betaTag + Layout.fillWidth: true + Layout.alignment: Qt.AlignTop + Layout.topMargin: root.firstItemOffset + Layout.preferredHeight: 56 + visible: root.firstItemOffset === 0 // visible only in the main wallet view + spacing: Style.current.halfPadding + backgroundColor: Theme.palette.primaryColor3 + bgRadius: Style.current.radius + bgBorderColor: Theme.palette.primaryColor2 + tagPrimaryLabel.textFormat: Text.RichText + tagPrimaryLabel.font.pixelSize: Style.current.additionalTextSize + tagPrimaryLabel.text: qsTr("Activity is in beta. If transactions are missing, check %1, %2, or %3.") + .arg(Utils.getStyledLink("Etherscan", "https://etherscan.io/", tagPrimaryLabel.hoveredLink)) + .arg(Utils.getStyledLink("OP Explorer", "https://optimistic.etherscan.io/", tagPrimaryLabel.hoveredLink)) + .arg(Utils.getStyledLink("Arbiscan", "https://arbiscan.io/", tagPrimaryLabel.hoveredLink)) + tagPrimaryLabel.onLinkActivated: (link) => { + const explorerUrl = WalletStores.RootStore.showAllAccounts ? link + : "%1/%2/%3".arg(link).arg(Constants.networkExplorerLinks.addressPath).arg(WalletStores.RootStore.selectedAddress) + Global.openLinkWithConfirmation(explorerUrl, SQUtils.StringUtils.extractDomainFromLink(explorerUrl)) + } + asset { + name: "warning" + width: 20 + height: 20 + color: Theme.palette.primaryColor1 + } + HoverHandler { + cursorShape: hovered && !!parent.tagPrimaryLabel.hoveredLink ? Qt.PointingHandCursor : undefined + } + } + StyledText { id: nonArchivalNodeError Layout.fillWidth: true diff --git a/ui/imports/utils/Utils.qml b/ui/imports/utils/Utils.qml index 75469d821e..ee0b4b1c5c 100644 --- a/ui/imports/utils/Utils.qml +++ b/ui/imports/utils/Utils.qml @@ -137,11 +137,22 @@ QtObject { `${link}` } + function getStyledLink(linkText, linkUrl, hoveredLink, textColor = Theme.palette.directColor1, linkColor = Theme.palette.primaryColor1) { + return `` + + `${linkText}` + } + function isMnemonic(value) { if(!value.match(/^([a-z\s]+)$/)){ return false; } - return Utils.seedPhraseValidWordCount(value); + return seedPhraseValidWordCount(value); } function compactAddress(addr, numberOfChars) {