Add Beta tag to the features that are not yet fully ready (#15617)

Fixes #15614 * feat(StatusQ): add StatusExperimentalTag component and page * chore(beta): add beta tag to ENS * chore(beta): add beta tag to Activity tab * chore(beta): add beta tag to wallet settings * chore(beta): add beta tag to Notification Center
2024-07-18 16:10:24 -04:00 · 2024-07-18 16:10:24 -04:00 · 2501e04ccb
parent 9a16ae40bf
commit 2501e04ccb
18 changed files with 154 additions and 3 deletions
--- a/storybook/pages/StatusExperimentalTagPage.qml
+++ b/storybook/pages/StatusExperimentalTagPage.qml
@ -0,0 +1,35 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+import Storybook 1.0
+import utils 1.0
+
+SplitView {
+    id: root
+
+    orientation: Qt.Horizontal
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+
+        StatusBetaTag {
+            id: tag
+            anchors.centerIn: parent
+        }
+    }
+
+    LogsAndControlsPanel {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 400
+
+        SplitView.fillHeight: true
+    }
+}
+
+// category: Components
+
+// https://www.figma.com/design/bZJgpgchRfMGIKNBoyYUh8/Experimental-tag?node-id=2-15420&t=F3R5CcOZSOMWYtkk-0
--- a/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusBetaTag.qml
@ -0,0 +1,23 @@
+import QtQuick 2.13
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Rectangle {
+    id: root
+
+    implicitHeight: 20
+    implicitWidth: 36
+    radius: 4
+    color: "transparent"
+    border.width: 1
+    border.color: Theme.palette.baseColor1
+
+    StatusBaseText {
+        id: label
+        font.pixelSize: 11
+        font.weight: Font.Medium
+        color: Theme.palette.baseColor1
+        anchors.centerIn: parent
+        text: "Beta"
+    }
+}
--- a/ui/StatusQ/src/StatusQ/Components/qmldir
+++ b/ui/StatusQ/src/StatusQ/Components/qmldir
@ -6,6 +6,7 @@ StatusAddress 0.1 StatusAddress.qml
 StatusAddressPanel 0.1 StatusAddressPanel.qml
 StatusAnimatedImage 0.1 StatusAnimatedImage.qml
 StatusBadge 0.1 StatusBadge.qml
+StatusBetaTag 0.1 StatusBetaTag.qml
 StatusCard 0.1 StatusCard.qml
 StatusChart 0.1 StatusChart.qml
 StatusChartPanel 0.1 StatusChartPanel.qml
--- a/ui/StatusQ/src/statusq.qrc
+++ b/ui/StatusQ/src/statusq.qrc
@ -6,6 +6,7 @@
        <file>StatusQ/Components/StatusAddressPanel.qml</file>
        <file>StatusQ/Components/StatusAnimatedImage.qml</file>
        <file>StatusQ/Components/StatusBadge.qml</file>
+        <file>StatusQ/Components/StatusBetaTag.qml</file>
        <file>StatusQ/Components/StatusCard.qml</file>
        <file>StatusQ/Components/StatusChartPanel.qml</file>
        <file>StatusQ/Components/StatusChatInfoToolBar.qml</file>
--- a/ui/app/AppLayouts/Profile/panels/MenuPanel.qml
+++ b/ui/app/AppLayouts/Profile/panels/MenuPanel.qml
@ -53,6 +53,15 @@ Column {
                default: return true;
                }
            }
+
+            Loader {
+                active: model.isExperimental
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.right: parent.right
+                anchors.rightMargin: 15
+
+                sourceComponent: StatusBetaTag {}
+            }
        }
    }

--- a/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml
+++ b/ui/app/AppLayouts/Profile/stores/ProfileSectionStore.qml
@ -107,7 +107,8 @@ QtObject {
                       icon: "keycard"})
            append({subsection: Constants.settingsSubsection.ensUsernames,
                       text: qsTr("ENS usernames"),
-                       icon: "username"})
+                       icon: "username",
+                       isExperimental: true})
            append({subsection: Constants.settingsSubsection.syncingSettings,
                       text: qsTr("Syncing"),
                       icon: "rotate"})
--- a/ui/app/AppLayouts/Profile/views/EnsAddedView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsAddedView.qml
@ -7,6 +7,7 @@ import utils 1.0
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1

 Item {
    property string ensUsername: ""
@ -22,6 +23,12 @@ Item {
        font.weight: Font.Bold
        font.pixelSize: 20
        color: Theme.palette.directColor1
+
+        StatusBetaTag {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.right
+            anchors.leftMargin: 7
+        }
    }


--- a/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsConnectedView.qml
@ -7,6 +7,7 @@ import utils 1.0
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1

 Item {
    property string ensUsername: ""
@ -22,6 +23,12 @@ Item {
        font.weight: Font.Bold
        font.pixelSize: 20
        color: Theme.palette.directColor1
+
+        StatusBetaTag {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.right
+            anchors.leftMargin: 7
+        }
    }


--- a/ui/app/AppLayouts/Profile/views/EnsListView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsListView.qml
@ -64,6 +64,12 @@ Item {
            font.weight: Font.Bold
            font.pixelSize: 20
            color: Theme.palette.directColor1
+
+            StatusBetaTag {
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.right
+                anchors.leftMargin: 7
+            }
        }

        Item {
--- a/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsRegisteredView.qml
@ -7,6 +7,7 @@ import utils 1.0
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1

 Item {
    property string ensUsername: ""
@ -22,6 +23,12 @@ Item {
        font.weight: Font.Bold
        font.pixelSize: 20
        color: Theme.palette.directColor1
+
+        StatusBetaTag {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.right
+            anchors.leftMargin: 7
+        }
    }


--- a/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsReleasedView.qml
@ -7,6 +7,7 @@ import utils 1.0
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Components 0.1

 Item {
    property string ensUsername: ""
@ -22,6 +23,12 @@ Item {
        font.weight: Font.Bold
        font.pixelSize: 20
        color: Theme.palette.directColor1
+
+        StatusBetaTag {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.right
+            anchors.leftMargin: 7
+        }
    }


--- a/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml
+++ b/ui/app/AppLayouts/Profile/views/EnsTermsAndConditionsView.qml
@ -50,6 +50,12 @@ Item {
        font.weight: Font.Bold
        font.pixelSize: 20
        color: Theme.palette.directColor1
+
+        StatusBetaTag {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.right
+            anchors.leftMargin: 7
+        }
    }

    Loader {
--- a/ui/app/AppLayouts/Profile/views/NotificationsView.qml
+++ b/ui/app/AppLayouts/Profile/views/NotificationsView.qml
@ -311,6 +311,8 @@ SettingsContentBase {
        }

        StatusListItem {
+            // Hidden since 2.29 since it's not mature enough
+            visible: false
            Layout.preferredWidth: root.contentWidth
            title: qsTr("Identity Verification Requests")
            components: [
--- a/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml
+++ b/ui/app/AppLayouts/Profile/views/SettingsContentBase.qml
@ -23,6 +23,8 @@ FocusScope {
    default property alias content: contentWrapper.children
    property alias titleLayout: titleLayout

+    property bool stickTitleRowComponentLoader: false
+
    property bool dirty: false

    // Used to configure the dirty behaviour of the settings page as a must blocker notification when
@ -84,7 +86,7 @@ FocusScope {
            }

            StatusBaseText {
-                Layout.fillWidth: true
+                Layout.fillWidth: !root.stickTitleRowComponentLoader
                text: root.sectionTitle
                font.weight: Font.Bold
                font.pixelSize: Constants.settingsSection.mainHeaderFontSize
@ -93,6 +95,7 @@ FocusScope {

            Loader {
                id: loader
+                Layout.leftMargin: root.stickTitleRowComponentLoader ? 8 : 0
            }
        }
        Control {
--- a/ui/app/AppLayouts/Profile/views/WalletView.qml
+++ b/ui/app/AppLayouts/Profile/views/WalletView.qml
@ -148,6 +148,7 @@ SettingsContentBase {
            root.titleRowComponentLoader.sourceComponent = undefined
            root.titleRowLeftComponentLoader.sourceComponent = undefined
            root.titleRowLeftComponentLoader.visible = false
+            root.stickTitleRowComponentLoader = false
            root.titleLayout.spacing = 5

            if (currentIndex == root.mainViewIndex) {
@ -174,11 +175,15 @@ SettingsContentBase {
            } else if(currentIndex == root.accountOrderViewIndex) {
                root.rootStore.backButtonName = root.walletSectionTitle
                root.sectionTitle = qsTr("Edit account order")
+                root.titleRowComponentLoader.sourceComponent = experimentalTagComponent
+                root.stickTitleRowComponentLoader = true

            } else if(currentIndex == root.manageTokensViewIndex) {
                root.rootStore.backButtonName = root.walletSectionTitle
                root.titleRowLeftComponentLoader.visible = false
                root.sectionTitle = qsTr("Manage tokens")
+                root.titleRowComponentLoader.sourceComponent = experimentalTagComponent
+                root.stickTitleRowComponentLoader = true
            } else if(currentIndex == root.savedAddressesViewIndex) {
                root.rootStore.backButtonName = root.walletSectionTitle
                root.titleRowLeftComponentLoader.visible = false
@ -381,6 +386,11 @@ SettingsContentBase {
            }
        }

+        Component {
+            id: experimentalTagComponent
+            StatusBetaTag {}
+        }
+
        Component {
            id: addNewSavedAddressButtonComponent

--- a/ui/app/AppLayouts/Profile/views/wallet/MainView.qml
+++ b/ui/app/AppLayouts/Profile/views/wallet/MainView.qml
@ -141,6 +141,12 @@ Column {
                color: Theme.palette.baseColor1
            }
        ]
+
+        StatusBetaTag {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 125
+        }
    }

    Separator {}
@ -157,6 +163,12 @@ Column {
                color: Theme.palette.baseColor1
            }
        ]
+
+        StatusBetaTag {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 135
+        }
    }

    Separator {}
--- a/ui/app/AppLayouts/Wallet/views/RightTabView.qml
+++ b/ui/app/AppLayouts/Wallet/views/RightTabView.qml
@ -1,6 +1,7 @@
 import QtQuick 2.15
 import QtQuick.Layouts 1.15

+import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
@ -113,6 +114,15 @@ RightTabBaseView {
                        rightPadding: 0
                        width: implicitWidth
                        text: qsTr("Activity")
+
+                        StatusBetaTag {
+                            // TODO remove me when Activity is no longer experimental
+                            // Keep Activity as the last tab for now as the Experimental tag don't flow 
+                            anchors.top: parent.top
+                            anchors.topMargin: 6
+                            anchors.left: parent.right
+                            anchors.leftMargin: 5
+                        }
                    }
                    onCurrentIndexChanged: {
                        RootStore.setCurrentViewedHoldingType(walletTabBar.currentIndex === 1 ? Constants.TokenType.ERC721 : Constants.TokenType.ERC20)
--- a/ui/app/mainui/activitycenter/panels/ActivityCenterPopupTopBarPanel.qml
+++ b/ui/app/mainui/activitycenter/panels/ActivityCenterPopupTopBarPanel.qml
@ -6,6 +6,7 @@ import utils 1.0

 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1

@ -54,7 +55,8 @@ Item {
                             { text: qsTr("Mentions"), group: ActivityCenterStore.ActivityCenterGroup.Mentions, visible: true, enabled: root.hasMentions },
                             { text: qsTr("Replies"), group: ActivityCenterStore.ActivityCenterGroup.Replies, visible: true, enabled: root.hasReplies },
                             { text: qsTr("Contact requests"), group: ActivityCenterStore.ActivityCenterGroup.ContactRequests, visible: true, enabled: root.hasContactRequests },
-                             { text: qsTr("Identity verification"), group: ActivityCenterStore.ActivityCenterGroup.IdentityVerification, visible: true, enabled: root.hasIdentityVerification },
+                             // Hidden since 2.29 since it's not mature enough
+                             { text: qsTr("Identity verification"), group: ActivityCenterStore.ActivityCenterGroup.IdentityVerification, visible: false, enabled: root.hasIdentityVerification },
                             { text: qsTr("Transactions"), group: ActivityCenterStore.ActivityCenterGroup.Transactions, visible: false, enabled: true },
                             { text: qsTr("Membership"), group: ActivityCenterStore.ActivityCenterGroup.Membership, visible: true, enabled: root.hasMembership },
                             { text: qsTr("System"), group: ActivityCenterStore.ActivityCenterGroup.System, visible: false, enabled: true } ]
@ -74,6 +76,8 @@ Item {
            }
        }

+        StatusBetaTag {}
+
        StatusFlatRoundButton {
            id: markAllReadBtn
            objectName: "markAllReadButton"