Feat/add perspective combo box

storybook/pages/ProfilePerspectiveSelectorPage.qml

@@ -0,0 +1,14 @@
+import QtQuick 2.15
+
+import shared.controls 1.0
+
+Item {
+    ProfilePerspectiveSelector {
+        anchors.centerIn: parent
+        onVisibilitySelected: (visibility) => showcaseVisibility = visibility
+    }
+}
+
+//category: Controls
+
+// https://www.figma.com/file/ibJOTPlNtIxESwS96vJb06/👤-Profile-%7C-Desktop?type=design&node-id=2460-28481&mode=design&t=XMfk3mxF7lZD7DZe-0

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

ui/imports/shared/controls/ProfilePerspectiveSelector.qml

@@ -0,0 +1,93 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+import utils 1.0
+
+StatusButton {
+    id: root
+
+    property int showcaseVisibility: Constants.ShowcaseVisibility.Everyone
+
+    signal visibilitySelected(int showcaseVisibility)
+
+    implicitWidth: d.maxTextWidth + 2 * horizontalPadding + indicator.width + icon.width + 2 * spacing
+    hoverColor: normalColor
+    normalColor: Theme.palette.primaryColor1
+    textColor: Theme.palette.indirectColor1
+    text: (showcaseVisibilityGroup.checkedButton as ShowcaseVisibilityAction).selectedText
+    textFillWidth: true
+    icon.name: showcaseVisibilityGroup.checkedButton.icon.name
+
+    indicator: StatusIcon {
+        anchors.right: parent.right
+        anchors.rightMargin: parent.horizontalPadding
+        anchors.verticalCenter: parent.verticalCenter
+        icon: "chevron-down"
+        color: root.textColor
+    }
+
+    onClicked: {
+        menu.open()
+    }
+
+    ButtonGroup {
+        id: showcaseVisibilityGroup
+        exclusive: true
+        onClicked: (button) => root.visibilitySelected((button as ShowcaseVisibilityAction).showcaseVisibility)
+    }
+
+    StatusMenu {
+        id: menu
+
+        y: root.height + 4
+        width: root.width
+
+        ShowcaseVisibilityAction {
+            showcaseVisibility: Constants.ShowcaseVisibility.Everyone
+            text: qsTr("Stranger")
+        }
+        ShowcaseVisibilityAction {
+            showcaseVisibility: Constants.ShowcaseVisibility.Contacts
+            text: qsTr("Contact")
+        }
+        ShowcaseVisibilityAction {
+            showcaseVisibility: Constants.ShowcaseVisibility.IdVerifiedContacts
+            text: qsTr("ID verified contact")
+        }
+    }
+
+    component ShowcaseVisibilityAction: StatusMenuItem {
+        id: menuItem
+        required property int showcaseVisibility
+
+        readonly property string selectedText: qsTr("Preview as %1").arg(text)
+        readonly property alias selectedTextWidth: textMetricsMaxWidth.width
+
+        ButtonGroup.group: showcaseVisibilityGroup
+        icon.name: ProfileUtils.visibilityIcon(showcaseVisibility)
+        icon.color: Theme.palette.primaryColor1
+        checked: root.showcaseVisibility === showcaseVisibility
+
+        TextMetrics {
+            id: textMetricsMaxWidth
+            font: root.font
+            text: menuItem.selectedText
+        }
+    }
+
+    QtObject {
+        id: d        
+        property real maxTextWidth: {
+                let max = 0
+                for (var i = 0; i < showcaseVisibilityGroup.buttons.length; i++) {
+                    max = Math.max(max, (showcaseVisibilityGroup.buttons[i] as ShowcaseVisibilityAction).selectedTextWidth)
+                }
+                return max
+        }
+    }
+}

ui/imports/shared/controls/qmldir

@@ -22,6 +22,7 @@ InformationTile 1.0 InformationTile.qml
 Input 1.0 Input.qml
 LoadingTokenDelegate 1.0 LoadingTokenDelegate.qml
 LinkPreviewDebugView 1.0 LinkPreviewDebugView.qml
+ProfilePerspectiveSelector 1.0 ProfilePerspectiveSelector.qml
 RadioButtonSelector 1.0 RadioButtonSelector.qml
 RecipientSelector 1.0 RecipientSelector.qml
 SearchBox 1.0 SearchBox.qml

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

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()
 

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