feat(profile): Implement side-by-side preview

- restored dirty tracking for Identity; showcase is handled by the NIM backend atm - StatusSectionLayout: make the right panel width configurable and clean the docu Fixes #13331
2024-02-07 10:54:45 +01:00 · 2024-02-07 10:54:45 +01:00 · 3eff96bfc8
parent 69d4c8824b
commit 3eff96bfc8
5 changed files with 55 additions and 30 deletions
--- a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml
+++ b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml
@ -52,22 +52,22 @@ SplitView {
    handle: Item { }

    /*!
-        \qmlproperty Item StatusAppLayout::leftPanel
+        \qmlproperty Item StatusSectionLayout::leftPanel
        This property holds the left panel of the component.
    */
    property Item leftPanel
    /*!
-        \qmlproperty Item StatusAppLayout::centerPanel
+        \qmlproperty Item StatusSectionLayout::centerPanel
        This property holds the center panel of the component.
    */
    property Item centerPanel
    /*!
-        \qmlproperty Component StatusAppLayout::rightPanel
+        \qmlproperty Component StatusSectionLayout::rightPanel
        This property holds the right panel of the component.
    */
    property Component rightPanel
    /*!
-        \qmlproperty Component StatusAppLayout::footer
+        \qmlproperty Item StatusSectionLayout::footer
        This property holds the footer of the component.
    */
    property Item footer
@ -77,47 +77,54 @@ SplitView {
    */
    property Item headerBackground
    /*!
-        \qmlproperty bool StatusAppLayout::showRightPanel
+        \qmlproperty bool StatusSectionLayout::showRightPanel
        This property sets the right panel component's visibility to true/false.
        Default value is false.
    */
    property bool showRightPanel: false
+
    /*!
-        \qmlproperty bool StatusAppLayout::showHeader
+        \qmlproperty int StatusSectionLayout::rightPanelWidth
+        This property sets the right panel component's width.
+        Default value is 250.
+    */
+    property int rightPanelWidth: 250
+    /*!
+        \qmlproperty bool StatusSectionLayout::showHeader
        This property sets the header component's visibility to true/false.
        Default value is true.
    */
    property bool showHeader: true

    /*!
-        \qmlproperty alias StatusAppLayout::notificationCount
+        \qmlproperty alias StatusSectionLayout::notificationCount
        This property holds a reference to the notificationCount property of the
        header component.
    */
    property alias notificationCount: statusToolBar.notificationCount

    /*!
-        \qmlproperty alias StatusAppLayout::hasUnseenNotifications
+        \qmlproperty alias StatusSectionLayout::hasUnseenNotifications
        This property holds a reference to the hasUnseenNotifications property of the
        header component.
    */
    property alias hasUnseenNotifications: statusToolBar.hasUnseenNotifications

    /*!
-        \qmlproperty alias StatusAppLayout::backButtonName
+        \qmlproperty alias StatusSectionLayout::backButtonName
        This property holds a reference to the backButtonName property of the
        header component.
    */
    property alias backButtonName: statusToolBar.backButtonName

    /*!
-        \qmlproperty alias StatusAppLayout::headerContent
+        \qmlproperty alias StatusSectionLayout::headerContent
        This property holds a reference to the custom header content of
        the header component.
    */
    property alias headerContent: statusToolBar.headerContent
    /*!
-        \qmlproperty alias StatusAppLayout::notificationButton
+        \qmlproperty alias StatusSectionLayout::notificationButton
        This property holds a reference to the notification button of the header
        component.
    */
@ -176,7 +183,7 @@ SplitView {
            Item {
                id: headerBackgroundSlot
                anchors.top: parent.top
-		// Needed cause I see a gap otherwise
+                // Needed cause I see a gap otherwise
                anchors.topMargin: -3
                width: visible ? parent.width : 0
                height: visible ? childrenRect.height : 0
@ -212,7 +219,7 @@ SplitView {
    }

    Control {
-        SplitView.preferredWidth: root.showRightPanel ? 250 : 0
+        SplitView.preferredWidth: root.showRightPanel ? root.rightPanelWidth : 0
        SplitView.minimumWidth: root.showRightPanel ? 58 : 0
        opacity: root.showRightPanel ? 1.0 : 0.0
        visible: (opacity > 0.1)
--- a/ui/app/AppLayouts/Profile/ProfileLayout.qml
+++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml
@ -1,11 +1,12 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15

 import utils 1.0
 import shared 1.0
 import shared.panels 1.0
-import shared.stores 1.0 as SharedStores
+import shared.stores 1.0
 import shared.popups.keycard 1.0
 import shared.stores.send 1.0

@ -15,6 +16,7 @@ import AppLayouts.Wallet.stores 1.0
 import "stores"
 import "popups"
 import "views"
+import "views/profile"

 import StatusQ.Core 0.1
 import StatusQ.Layout 0.1
@ -36,7 +38,7 @@ StatusSectionLayout {
    required property TransactionStore transactionStore
    required property WalletAssetsStore walletAssetsStore
    required property CollectiblesStore collectiblesStore
-    required property SharedStores.CurrenciesStore currencyStore
+    required property CurrenciesStore currencyStore

    backButtonName: root.store.backButtonName
    notificationCount: activityCenterStore.unreadNotificationsCount
@ -74,6 +76,10 @@ StatusSectionLayout {
        readonly property int leftMargin: 64

        readonly property int contentWidth: 560
+        readonly property int rightPanelWidth: 768
+
+        readonly property bool isProfilePanelActive: profileContainer.currentIndex === Constants.settingsSubsection.profile
+        readonly property bool sideBySidePreviewAvailable: root.Window.width >= 1840 // design
    }

    headerBackground: AccountHeaderGradient {
@ -137,6 +143,7 @@ StatusSectionLayout {
                communitiesModel: root.store.communitiesList
                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.profile)
                contentWidth: d.contentWidth
+                sideBySidePreview: d.sideBySidePreviewAvailable
            }
        }

@ -227,7 +234,7 @@ StatusSectionLayout {
                implicitHeight: parent.height

                languageStore: root.store.languageStore
-                currencyStore: SharedStores.RootStore.currencyStore
+                currencyStore: root.currencyStore
                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.language)
                contentWidth: d.contentWidth
            }
@ -405,6 +412,16 @@ StatusSectionLayout {
        }
    }

+    showRightPanel: d.isProfilePanelActive && d.sideBySidePreviewAvailable
+    rightPanelWidth: d.rightPanelWidth
+    rightPanel: MyProfilePreview {
+        profileStore: root.store.profileStore
+        contactsStore: root.store.contactsStore
+        networkConnectionStore: root.networkConnectionStore
+        dirtyValues: d.isProfilePanelActive ? profileContainer.currentItem.dirtyValues : ({})
+        dirty: d.isProfilePanelActive ? profileContainer.currentItem.dirty : false
+    }
+
    Connections {
        target: root.store.keycardStore.keycardModule
        enabled: profileContainer.currentIndex === Constants.settingsSubsection.wallet ||
--- a/ui/app/AppLayouts/Profile/views/MyProfileView.qml
+++ b/ui/app/AppLayouts/Profile/views/MyProfileView.qml
@ -35,17 +35,18 @@ SettingsContentBase {

    property var communitiesModel

-    titleRowComponentLoader.sourceComponent: RowLayout {
-        StatusButton {
-            objectName: "profileSettingsChangePasswordButton"
-            text: qsTr("Change Password")
-            onClicked: Global.openPopup(changePasswordModal)
-            enabled: !userProfile.isKeycardUser
-        }
-        StatusButton {
-            text: qsTr("Preview")
-            onClicked: Global.openPopup(profilePreview)
-        }
+    property bool sideBySidePreview
+
+    property QtObject dirtyValues: QtObject {
+        property string displayName: descriptionPanel.displayName.text
+        property string bio: descriptionPanel.bio.text
+        property url profileLargeImage: profileHeader.previewIcon
+    }
+
+    titleRowComponentLoader.sourceComponent: StatusButton {
+        text: qsTr("Preview")
+        onClicked: Global.openPopup(profilePreview)
+        visible: !root.sideBySidePreview
    }

    dirty: (!descriptionPanel.isEnsName &&
--- a/ui/app/AppLayouts/Profile/views/profile/MyProfilePreview.qml
+++ b/ui/app/AppLayouts/Profile/views/profile/MyProfilePreview.qml
@ -28,7 +28,7 @@ Item {
    SharedViews.ProfileDialogView {
        id: profilePreview
        anchors.fill: parent
-        anchors.margins: 24
+        anchors.margins: 64
        readOnly: true
    }

--- a/ui/imports/shared/views/ProfileDialogView.qml
+++ b/ui/imports/shared/views/ProfileDialogView.qml
@ -36,13 +36,13 @@ Pane {
    property var networkConnectionStore
    property var communitiesModel

-    property QtObject dirtyValues: null
+    property var dirtyValues: ({})
    property bool dirty: false

    signal closeRequested()

    padding: 0
-    topPadding: 40
+    topPadding: 32

    background: StatusDialogBackground {
        id: background