feat(ProfileShowcase): Integrate profile perspective selector

status-im · Apr 2, 2024 · 1d45243 · 1d45243
1 parent 77933cc
commit 1d45243
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 26 deletions.
diff --git a/ui/app/AppLayouts/Profile/views/profile/MyProfilePreview.qml b/ui/app/AppLayouts/Profile/views/profile/MyProfilePreview.qml
@@ -1,10 +1,13 @@
-import QtQuick 2.14
-import QtGraphicalEffects 1.14
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
 
 import shared.views 1.0 as SharedViews
 
 import StatusQ.Core.Theme 0.1
 
+import shared.controls 1.0
+
 Item {
     property alias profileStore: profilePreview.profileStore
     property alias contactsStore: profilePreview.contactsStore
@@ -20,27 +23,42 @@ Item {
 
 
     implicitHeight: profilePreview.implicitHeight 
-                        + profilePreview.anchors.topMargin 
-                        + profilePreview.anchors.bottomMargin
+                        + layout.anchors.topMargin 
+                        + layout.anchors.bottomMargin
 
     implicitWidth: profilePreview.implicitWidth 
-                        + profilePreview.anchors.leftMargin 
-                        + profilePreview.anchors.rightMargin
+                        + layout.anchors.leftMargin 
+                        + layout.anchors.rightMargin
 
     function reload() {
         profilePreview.reload()
     }
 
-    SharedViews.ProfileDialogView {
-        id: profilePreview
+    ColumnLayout {
+        id: layout
         anchors.fill: parent
         anchors.margins: 64
-        readOnly: true
+        spacing: 20
+        ProfilePerspectiveSelector {
+            id: selector
+            showcaseVisibility: profilePreview.showcaseMaxVisibility
+            onVisibilitySelected: (visibility) => profilePreview.showcaseMaxVisibility = visibility
+        }
+
+        SharedViews.ProfileDialogView {
+            id: profilePreview
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.maximumHeight: implicitHeight
+            readOnly: true
+        }
+        Item { Layout.fillHeight: true }
     }
 
     DropShadow {
         id: shadow
-        anchors.fill: profilePreview
+        anchors.fill: layout
+        anchors.topMargin: profilePreview.y
         horizontalOffset: 0
         verticalOffset: 4
         radius: 16

diff --git a/ui/imports/shared/controls/ProfilePerspectiveSelector.qml b/ui/imports/shared/controls/ProfilePerspectiveSelector.qml
@@ -65,7 +65,7 @@ StatusButton {
         id: menuItem
         required property int showcaseVisibility
 
-        readonly property string selectedText: d.buttonTextFormat.arg(text)
+        readonly property string selectedText: qsTr("Preview as %1").arg(text)
         readonly property alias selectedTextWidth: textMetricsMaxWidth.width
 
         ButtonGroup.group: showcaseVisibilityGroup
@@ -81,10 +81,7 @@ StatusButton {
     }
 
     QtObject {
-        id: d
-
-        readonly property string buttonTextFormat: "%1%2".arg(qsTr("Preview as "))
-
+        id: d        
         property real maxTextWidth: {
                 let max = 0
                 for (var i = 0; i < showcaseVisibilityGroup.buttons.length; i++) {

diff --git a/ui/imports/shared/popups/ProfileDialog.qml b/ui/imports/shared/popups/ProfileDialog.qml
@@ -1,8 +1,10 @@
 import QtQuick 2.14
+import QtQuick.Controls 2.15
 
 import StatusQ.Popups.Dialog 0.1
 
 import shared.views 1.0
+import shared.controls 1.0
 
 StatusDialog {
     id: root
@@ -24,11 +26,29 @@ StatusDialog {
     property alias dirtyValues: profileView.dirtyValues
     property alias dirty: profileView.dirty
 
+    implicitHeight: implicitContentHeight + (header.visible ? header.height : 0)
     width: 640
     padding: 0
 
-    header: null
     footer: null
+    background: null
+    header: Item {
+        id: headerItem
+        height: selector.height + 20
+        visible: profileView.isCurrentUser
+
+        TapHandler {
+            enabled: root.closePolicy != Popup.NoAutoClose
+            onTapped: {
+                root.close()
+            }   
+        }
+        ProfilePerspectiveSelector {
+            id: selector
+            showcaseVisibility: profileView.showcaseMaxVisibility
+            onVisibilitySelected: (visibility) => profileView.showcaseMaxVisibility = visibility
+        }
+    }
 
     contentItem: ProfileDialogView {
         id: profileView

diff --git a/ui/imports/shared/views/ProfileDialogView.qml b/ui/imports/shared/views/ProfileDialogView.qml
@@ -29,6 +29,7 @@ Pane {
     property bool readOnly // inside settings/profile/preview
 
     property string publicKey: contactsStore.myPublicKey
+    readonly property alias isCurrentUser: d.isCurrentUser
 
     property var profileStore
     property var contactsStore
@@ -43,6 +44,8 @@ Pane {
     property var showcaseCollectiblesModel
     property var showcaseSocialLinksModel
     property var showcaseAssetsModel
+
+    property alias showcaseMaxVisibility: showcaseView.maxVisibility
 
     signal closeRequested()
 

diff --git a/ui/imports/shared/views/profile/ProfileShowcaseView.qml b/ui/imports/shared/views/profile/ProfileShowcaseView.qml
@@ -19,6 +19,8 @@ Control {
     id: root
 
     property alias currentTabIndex: stackLayout.currentIndex
+
+    property int maxVisibility: Constants.ShowcaseVisibility.Everyone
 
     property alias communitiesModel: communitiesProxyModel.sourceModel
     property alias accountsModel: accountsProxyModel.sourceModel
@@ -48,18 +50,24 @@ Control {
                 roleName: "showcasePosition"
             }
         ]
-        filters: AnyOf {
-            inverted: true
-            UndefinedFilter {
-                roleName: "showcaseVisibility"
-            }
+        filters: [
+            AnyOf {
+                inverted: true
+                UndefinedFilter {
+                    roleName: "showcaseVisibility"
+                }
 
-            ValueFilter {
-                roleName: "showcaseVisibility"
-                value: Constants.ShowcaseVisibility.NoOne
+                ValueFilter {
+                    roleName: "showcaseVisibility"
+                    value: Constants.ShowcaseVisibility.NoOne
+                }
+            },
+            FastExpressionFilter {
+                expression: model.showcaseVisibility >= root.maxVisibility
+                expectedRoles: ["showcaseVisibility"]
             }
-        }
-    } 
+        ]
+    }
 
     PositionSFPM {
         id: communitiesProxyModel