refactor(ProfileModal): replace implementation with StatusQ components

Closes #3319

ui/app/AppLayouts/Chat/CommunityComponents/CommunityProfilePopupMembersList.qml

@@ -221,7 +221,6 @@ Item {
     Component {
         id: profilePopup
         ProfilePopup {
-            height: 504
             onClosed: {
                 destroy()
             }

ui/app/AppLayouts/Chat/components/ProfilePopup.qml

@@ -2,13 +2,18 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
+
 import "../../../../imports"
 import "../../../../shared"
-import "../../../../shared/status"
-import "./"
 
-ModalPopup {
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Popups 0.1
+
+StatusModal {
     id: popup
+    anchors.centerIn: parent
 
     property Popup parentPopup
 
@@ -35,9 +40,6 @@ ModalPopup {
     signal contactAdded(publicKey: string)
     signal contactRemoved(publicKey: string)
 
-    clip: true
-    noTopMargin: true
-
     function openPopup(showFooter, userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam) {
         userName = userNameParam || ""
         nickname = nicknameParam || ""
@@ -52,66 +54,130 @@ ModalPopup {
         popup.open()
     }
 
-    header: Item {
+    header.title: Utils.removeStatusEns(isCurrentUser ? profileModel.ens.preferredUsername || userName : userName)
-        height: 78
+    header.subTitle: isEnsVerified ? alias : fromAuthor
-        width: parent.width
+    header.subTitleElide: Text.ElideMiddle
+    header.image.source: identicon
 
-        RoundedImage {
+    headerActionButton: StatusFlatRoundButton {
-            id: profilePic
+        type: StatusFlatRoundButton.Type.Secondary
-            width: 40
+        width: 32
-            height: 40
+        height: 32
-            border.color: Style.current.border
-            border.width: 1
-            anchors.verticalCenter: parent.verticalCenter
-            source: identicon
-        }
 
-        StyledText {
+        icon.width: 20
-            id: profileName
+        icon.height: 20
-            text:  Utils.removeStatusEns(isCurrentUser ? profileModel.ens.preferredUsername || userName : userName)
+        icon.name: "qr"
-            elide: Text.ElideRight
+        onClicked: contentComponent.qrCodePopup.open()
+    }
+
+    content: Item {
+        width: popup.width
+        height: modalContent.height
+
+        property alias qrCodePopup: qrCodePopup
+        property alias unblockContactConfirmationDialog: unblockContactConfirmationDialog
+        property alias blockContactConfirmationDialog: blockContactConfirmationDialog
+        property alias removeContactConfirmationDialog: removeContactConfirmationDialog
+
+        Column {
+            id: modalContent
             anchors.top: parent.top
-            anchors.topMargin: Style.current.padding
+            width: parent.width
-            anchors.left: profilePic.right
-            anchors.leftMargin: Style.current.halfPadding
-            anchors.right: qrCodeButton.left
-            anchors.rightMargin: Style.current.padding
-            font.bold: true
-            font.pixelSize: 17
-        }
 
-        StyledText {
+            Item {
-            text: isEnsVerified ? alias : fromAuthor
+                height: 16
-            elide: !isEnsVerified ? Text.ElideMiddle : Text.ElideRight
+                width: parent.width
-            anchors.left: profilePic.right
+            }
-            anchors.leftMargin: Style.current.smallPadding
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: Style.current.padding
-            anchors.right: qrCodeButton.left
-            anchors.rightMargin: Style.current.padding
-            anchors.topMargin: 2
-            font.pixelSize: 14
-            color: Style.current.secondaryText
-        }
 
-        StatusIconButton {
+            StatusDescriptionListItem {
-            id: qrCodeButton
+                title: qsTr("ENS username")
-            icon.name: "qr-code-icon"
+                subTitle: isCurrentUser ? profileModel.ens.preferredUsername || userName : userName
-            anchors.verticalCenter: profileName.verticalCenter
+                tooltip.text: qsTr("Copy to clipboard")
-            anchors.right: parent.right
+                icon.name: "copy"
-            anchors.rightMargin: 52
+                iconButton.onClicked: {
-            iconColor: Style.current.textColor
+                    chatsModel.copyToClipboard(userName)
-            onClicked: qrCodePopup.open()
+                    tooltip.visible = !tooltip.visible
-            width: 32
+                }
-            height: 32
+                width: parent.width
-        }
+            }
 
-        Separator {
+            StatusDescriptionListItem {
-            anchors.bottom: parent.bottom
+                title: qsTr("Chat key")
-            anchors.left: parent.left
+                subTitle: fromAuthor
-            anchors.leftMargin: -Style.current.padding
+                subTitleComponent.elide: Text.ElideMiddle
-            anchors.right: parent.right
+                subTitleComponent.width: 320
-            anchors.rightMargin: -Style.current.padding
+                subTitleComponent.font.family: Theme.palette.monoFont.name
+                tooltip.text: qsTr("Copy to clipboard")
+                icon.name: "copy"
+                iconButton.onClicked: {
+                    chatsModel.copyToClipboard(fromAuthor)
+                    tooltip.visible = !tooltip.visible
+                }
+                width: parent.width
+            }
+
+            StatusModalDivider {
+                topPadding: 12
+                bottomPadding: 16
+            }
+
+            StatusDescriptionListItem {
+                title: qsTr("Share Profile URL")
+                subTitle: {
+                    let user = ""
+                    if (isCurrentUser) {
+                        user = profileModel.ens.preferredUsername
+                    } else {
+                        if (isEnsVerified) {
+                            user = userName.startsWith("@") ? userName.substring(1) : userName
+                        }
+                    }
+                    if (user === ""){
+                        user = fromAuthor.substr(0, 4) + "..." + fromAuthor.substr(fromAuthor.length - 5)
+                    }
+                    return Constants.userLinkPrefix +  user;
+                }
+                tooltip.text: qsTr("Copy to clipboard")
+                icon.name: "copy"
+                iconButton.onClicked: {
+                    let user = ""
+                    if (isCurrentUser) {
+                        user = profileModel.ens.preferredUsername
+                    } else {
+                        if (isEnsVerified) {
+                            user = userName.startsWith("@") ? userName.substring(1) : userName
+                        }
+                    }
+                    if (user === ""){
+                        user = fromAuthor
+                    }
+
+                    chatsModel.copyToClipboard(Constants.userLinkPrefix + user)
+                    tooltip.visible = !tooltip.visible
+                }
+                width: parent.width
+            }
+
+            StatusModalDivider {
+                topPadding: 8
+                bottomPadding: 12
+            }
+
+            StatusDescriptionListItem {
+                title: qsTr("Chat settings")
+                subTitle: qsTr("Nickname")
+                value: nickname ? nickname : qsTr("None")
+                sensor.enabled: true
+                sensor.onClicked: {
+                    nicknamePopup.open()
+                }
+                width: parent.width
+            }
+
+            Item {
+                width: parent.width
+                height: 16
+            }
         }
 
         ModalPopup {
@@ -129,156 +195,40 @@ ModalPopup {
                 smooth: false
             }
         }
-    }
 
-    Item {
+        UnblockContactConfirmationDialog {
-        anchors.fill: parent
+            id: unblockContactConfirmationDialog
-
+            onUnblockButtonClicked: {
-        TextWithLabel {
+                profileModel.contacts.unblockContact(fromAuthor)
-            id: ensText
+                unblockContactConfirmationDialog.close();
-            //% "ENS username"
+                popup.close()
-            label: qsTrId("ens-username")
+                popup.contactUnblocked(fromAuthor)
-            text: isCurrentUser ? profileModel.ens.preferredUsername || userName : userName
-            anchors.top: parent.top
-            visible: isEnsVerified || profileModel.ens.preferredUsername !== ""
-            height: visible ? implicitHeight : 0
-            textToCopy: userName
-        }
-
-        StyledText {
-            id: labelChatKey
-            //% "Chat key"
-            text: qsTrId("chat-key")
-            font.pixelSize: 13
-            font.weight: Font.Medium
-            color: Style.current.secondaryText
-            anchors.top: ensText.bottom
-            anchors.topMargin: ensText.visible ? popup.innerMargin : 0
-        }
-
-        Address {
-            id: valueChatKey
-            text: fromAuthor
-            width: 160
-            maxWidth: parent.width - (3 * Style.current.smallPadding) - copyBtn.width
-            color: Style.current.textColor
-            font.pixelSize: 15
-            anchors.top: labelChatKey.bottom
-            anchors.topMargin: 4
-        }
-
-        CopyToClipBoardButton {
-            id: copyBtn
-            anchors.top: labelChatKey.bottom
-            anchors.left: valueChatKey.right
-            textToCopy: valueChatKey.text
-        }
-
-        Separator {
-            id: separator
-            anchors.top: valueChatKey.bottom
-            anchors.topMargin: popup.innerMargin
-            anchors.left: parent.left
-            anchors.leftMargin: -Style.current.padding
-            anchors.right: parent.right
-            anchors.rightMargin: -Style.current.padding
-        }
-
-        TextWithLabel {
-            id: valueShareURL
-            //% "Share Profile URL"
-            label: qsTrId("share-profile-url")
-            text: {
-                let user = ""
-                if (isCurrentUser) {
-                    user = profileModel.ens.preferredUsername
-                } else {
-                    if (isEnsVerified) {
-                        user = userName.startsWith("@") ? userName.substring(1) : userName
-                    }
-                }
-                if (user === ""){
-                    user = fromAuthor.substr(0, 4) + "..." + fromAuthor.substr(fromAuthor.length - 5)
-                }
-                return Constants.userLinkPrefix +  user;
-            }
-            anchors.top: separator.top
-            anchors.topMargin: popup.innerMargin
-            textToCopy: {
-                let user = ""
-                if (isCurrentUser) {
-                    user = profileModel.ens.preferredUsername
-                } else {
-                    if (isEnsVerified) {
-                        user = userName.startsWith("@") ? userName.substring(1) : userName
-                    }
-                }
-                if (user === ""){
-                    user = fromAuthor
-                }
-                return Constants.userLinkPrefix +  user;
             }
         }
 
-        Separator {
+        BlockContactConfirmationDialog {
-            id: separator2
+            id: blockContactConfirmationDialog
-            anchors.top: valueShareURL.bottom
+            onBlockButtonClicked: {
-            anchors.topMargin: popup.innerMargin
+                profileModel.contacts.blockContact(fromAuthor)
-            anchors.left: parent.left
+                blockContactConfirmationDialog.close();
-            anchors.leftMargin: -Style.current.padding
+                popup.close()
-            anchors.right: parent.right
-            anchors.rightMargin: -Style.current.padding
-        }
 
-        TextWithLabel {
+                popup.contactBlocked(fromAuthor)
-            id: chatSettings
-            visible: profileModel.profile.pubKey !== fromAuthor
-            //% "Chat settings"
-            label: qsTrId("chat-settings")
-            //% "Nickname"
-            text: qsTrId("nickname")
-            anchors.top: separator2.top
-            anchors.topMargin: popup.innerMargin
-        }
-
-        SVGImage {
-            id: nicknameCaret
-            visible: profileModel.profile.pubKey !== fromAuthor
-            source: "../../../img/caret.svg"
-            rotation: -90
-            anchors.right: parent.right
-            anchors.rightMargin: Style.current.padding
-            anchors.bottom: chatSettings.bottom
-            anchors.bottomMargin: 5
-            width: 13
-            height: 7
-            fillMode: Image.PreserveAspectFit
-            ColorOverlay {
-                anchors.fill: parent
-                source: parent
-                color: Style.current.secondaryText
             }
         }
 
-        StyledText {
+        ConfirmationDialog {
-            id: nicknameText
+            id: removeContactConfirmationDialog
-            visible: profileModel.profile.pubKey !== fromAuthor
+            title: qsTr("Remove contact")
-            //% "None"
+            confirmationText: qsTr("Are you sure you want to remove this contact?")
-            text: nickname ? nickname : qsTrId("none")
+            onConfirmButtonClicked: {
-            anchors.right: nicknameCaret.left
+                if (profileModel.contacts.isAdded(fromAuthor)) {
-            anchors.rightMargin: Style.current.padding
+                    profileModel.contacts.removeContact(fromAuthor);
-            anchors.verticalCenter: nicknameCaret.verticalCenter
+                }
-            color: Style.current.secondaryText
+                removeContactConfirmationDialog.close();
-        }
+                popup.close();
 
-        MouseArea {
+                popup.contactRemoved(fromAuthor);
-            cursorShape: Qt.PointingHandCursor
-            anchors.left: chatSettings.left
-            anchors.right: nicknameCaret.right
-            anchors.top: chatSettings.top
-            anchors.bottom: chatSettings.bottom
-            onClicked: {
-                nicknamePopup.open()
             }
         }
 
@@ -293,127 +243,45 @@ ModalPopup {
         }
     }
 
-    footer: Item {
+    rightButtons: [
-        id: footerContainer
+        StatusFlatButton {
-        visible: !noFooter
-        width: parent.width
-        height: children[0].height
-
-        StatusButton {
-            id: blockBtn
-            anchors.right: addToContactsButton.left
-            anchors.rightMargin: addToContactsButton ? Style.current.padding : 0
-            anchors.bottom: parent.bottom
-            type: "warn"
-            showBorder: true
-            bgColor: "transparent"
-            borderColor: Style.current.border
-            hoveredBorderColor: Style.current.transparent
             text: isBlocked ?
-                      //% "Unblock User"
+                qsTr("Unblock User") :
-                      qsTrId("unblock-user") :
+                qsTr("Block User")
-                      //% "Block User"
+            type: StatusBaseButton.Type.Danger
-                      qsTrId("block-user")
             onClicked: {
                 if (isBlocked) {
-                    unblockContactConfirmationDialog.contactName = userName;
+                    contentComponent.unblockContactConfirmationDialog.contactName = userName;
-                    unblockContactConfirmationDialog.contactAddress = fromAuthor;
+                    contentComponent.unblockContactConfirmationDialog.contactAddress = fromAuthor;
-                    unblockContactConfirmationDialog.open();
+                    contentComponent.unblockContactConfirmationDialog.open();
                     return;
                 }
-                blockContactConfirmationDialog.contactName = userName;
+                ontentComponent.blockContactConfirmationDialog.contactName = userName;
-                blockContactConfirmationDialog.contactAddress = fromAuthor;
+                contentComponent.blockContactConfirmationDialog.contactAddress = fromAuthor;
-                blockContactConfirmationDialog.open();
+                contentComponent.blockContactConfirmationDialog.open();
             }
-        }
+        },
+
+        StatusFlatButton {
+            property bool isAdded:  profileModel.contacts.isAdded(fromAuthor)
+            visible: !isBlocked && isAdded
+            type: StatusBaseButton.Type.Danger
+            text: qsTr('Remove Contact')
+            onClicked: {
+                contentComponent.removeContactConfirmationDialog.parentPopup = popup;
+                contentComponent.removeContactConfirmationDialog.open();
+            }
+        },
 
         StatusButton {
             property bool isAdded:  profileModel.contacts.isAdded(fromAuthor)
-
+            text: qsTr("Add to contacts")
-            id: addToContactsButton
+            visible: !isBlocked && !isAdded
-            anchors.right: sendMessageBtn.left
-            anchors.rightMargin: sendMessageBtn.visible ? Style.current.padding : 0
-            text: isAdded ?
-                      //% "Remove Contact"
-                      qsTrId("remove-contact") :
-                      //% "Add to contacts"
-                      qsTrId("add-to-contacts")
-            anchors.bottom: parent.bottom
-            type: isAdded ? "warn" : "primary"
-            showBorder: isAdded
-            borderColor: Style.current.border
-            bgColor: isAdded ? "transparent" : Style.current.buttonBackgroundColor
-            hoveredBorderColor: Style.current.transparent
-            visible: !isBlocked
-            width: visible ? implicitWidth : 0
             onClicked: {
-                if (profileModel.contacts.isAdded(fromAuthor)) {
+                profileModel.contacts.addContact(fromAuthor);
-                    removeContactConfirmationDialog.parentPopup = profilePopup;
+                popup.contactAdded(fromAuthor);
-                    removeContactConfirmationDialog.open();
-                } else {
-                    profileModel.contacts.addContact(fromAuthor);
-                    contactAdded(fromAuthor);
-                    profilePopup.close();
-                }
-            }
-        }
-
-        StatusButton {
-            id: sendMessageBtn
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            //% "Send message"
-            text: qsTrId("send-message")
-            visible: !isBlocked && chatsModel.channelView.activeChannel.id !== popup.fromAuthor
-            width: visible ? implicitWidth : 0
-            onClicked: {
-                appMain.changeAppSection(Constants.chat)
-                chatsModel.channelView.joinPrivateChat(fromAuthor, "")
-                popup.close()
-                let pp = parentPopup
-                while (pp) {
-                    pp.close()
-                    pp = pp.parentPopup
-                }
-            }
-        }
-
-        BlockContactConfirmationDialog {
-            id: blockContactConfirmationDialog
-            onBlockButtonClicked: {
-                profileModel.contacts.blockContact(fromAuthor)
-                blockContactConfirmationDialog.close();
-                popup.close()
-
-                contactBlocked(fromAuthor)
-            }
-        }
-
-        UnblockContactConfirmationDialog {
-            id: unblockContactConfirmationDialog
-            onUnblockButtonClicked: {
-                profileModel.contacts.unblockContact(fromAuthor)
-                unblockContactConfirmationDialog.close();
-                popup.close()
-                contactUnblocked(fromAuthor)
-            }
-        }
-
-        ConfirmationDialog {
-            id: removeContactConfirmationDialog
-            // % "Remove contact"
-            title: qsTrId("remove-contact")
-            //% "Are you sure you want to remove this contact?"
-            confirmationText: qsTrId("are-you-sure-you-want-to-remove-this-contact-")
-            onConfirmButtonClicked: {
-                if (profileModel.contacts.isAdded(fromAuthor)) {
-                    profileModel.contacts.removeContact(fromAuthor);
-                }
-                removeContactConfirmationDialog.close();
                 popup.close();
-
-                contactRemoved(fromAuthor);
             }
         }
-    }
+    ]
 }

ui/app/AppLayouts/Timeline/TimelineLayout.qml

@@ -44,7 +44,6 @@ ScrollView {
 
     property Component profilePopupComponent: ProfilePopup {
         id: profilePopup
-        height: 450
         onClosed: {
             if(profilePopup.parentPopup){
                 profilePopup.parentPopup.close();

ui/app/AppMain.qml

@@ -129,7 +129,6 @@ Item {
 
     property Component profilePopupComponent: ProfilePopup {
         id: profilePopup
-        height: 504
         onClosed: {
             if(profilePopup.parentPopup){
                 profilePopup.parentPopup.close();