From 3eff96bfc84a9833f0b27022b83085a9c6b81081 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Tinkl?= Date: Wed, 7 Feb 2024 10:54:45 +0100 Subject: [PATCH] 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 --- .../StatusQ/Layout/StatusSectionLayout.qml | 33 +++++++++++-------- ui/app/AppLayouts/Profile/ProfileLayout.qml | 23 +++++++++++-- .../Profile/views/MyProfileView.qml | 23 ++++++------- .../views/profile/MyProfilePreview.qml | 2 +- ui/imports/shared/views/ProfileDialogView.qml | 4 +-- 5 files changed, 55 insertions(+), 30 deletions(-) diff --git a/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml b/ui/StatusQ/src/StatusQ/Layout/StatusSectionLayout.qml index 50500b0b82..852c1f3549 100644 --- 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) diff --git a/ui/app/AppLayouts/Profile/ProfileLayout.qml b/ui/app/AppLayouts/Profile/ProfileLayout.qml index 4c3464971a..a16ae31bcf 100644 --- 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 || diff --git a/ui/app/AppLayouts/Profile/views/MyProfileView.qml b/ui/app/AppLayouts/Profile/views/MyProfileView.qml index 151f8223e0..2c80a282d7 100644 --- 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 && diff --git a/ui/app/AppLayouts/Profile/views/profile/MyProfilePreview.qml b/ui/app/AppLayouts/Profile/views/profile/MyProfilePreview.qml index 2a302059fb..04c8180b54 100644 --- 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 } diff --git a/ui/imports/shared/views/ProfileDialogView.qml b/ui/imports/shared/views/ProfileDialogView.qml index f01234e7cc..65759fa797 100644 --- 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