chore(settings/profile): rework ProfilePopup to StatusDialog

iterates: status-im/StatusQ#760

ui/imports/shared/popups/ProfilePopup.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
+import QtQml.Models 2.14
 import QtGraphicalEffects 1.13
 
 import utils 1.0
@@ -15,9 +16,9 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
+import StatusQ.Popups.Dialog 0.1
 
-StatusModal {
+StatusDialog {
     id: popup
 
     property Popup parentPopup
@@ -117,7 +118,6 @@ StatusModal {
         text = ""; // this is most likely unneeded
         isCurrentUser = popup.profileStore.pubkey === publicKey;
 
-        showFooter = !isCurrentUser;
         popup.open();
 
         if (state === Constants.profilePopupStates.openNickname) {
@@ -168,98 +168,286 @@ StatusModal {
     }
 
     width: 700
-
-    header.title: {
-        if(showVerifyIdentitySection || showVerificationPendingSection){
-            return qsTr("Verify %1's Identity").arg(userIsEnsVerified ? userName : userDisplayName)
-        }
-        return popup.isCurrentUser ? qsTr("My Profile") :
-                                     qsTr("%1's Profile").arg(userIsEnsVerified ? userName : userDisplayName)
-    }
-    header.subTitle: popup.isCurrentUser ? "" : userIsEnsVerified ? userName : Utils.getElidedCompressedPk(userPublicKey)
-    header.subTitleElide: Text.ElideMiddle
     padding: 8
 
-    headerActionButton:  StatusFlatRoundButton {
+    header: StatusDialogHeader {
-        type: StatusFlatRoundButton.Type.Secondary
+        id: dialogHeader
-        width: 32
-        height: 32
 
-        icon.width: 20
+        headline.title: {
-        icon.height: 20
+            if(showVerifyIdentitySection || showVerificationPendingSection){
-        icon.name: "qr"
+                return qsTr("Verify %1's Identity").arg(userIsEnsVerified ? userName : userDisplayName)
-        onClicked: profileView.qrCodePopup.open()
+            }
+            return popup.isCurrentUser ? qsTr("My Profile") :
+                                         qsTr("%1's Profile").arg(userIsEnsVerified ? userName : userDisplayName)
+        }
+
+        headline.subtitle: popup.isCurrentUser ? "" : userIsEnsVerified ? userName : Utils.getElidedCompressedPk(userPublicKey)
+
+        actions {
+            customButtons: ObjectModel {
+                StatusFlatRoundButton {
+                    type: StatusFlatRoundButton.Type.Secondary
+                    width: 32
+                    height: 32
+
+                    icon.width: 20
+                    icon.height: 20
+                    icon.name: "qr"
+                    onClicked: profileView.qrCodePopup.open()
+                }
+            }
+
+            closeButton.onClicked: popup.close()
+        }
     }
 
-    SharedViews.ProfileView {
+    footer: StatusDialogFooter {
-        id: profileView
+        visible: !popup.isCurrentUser
+
+        leftButtons: ObjectModel {
+            StatusButton {
+                text: qsTr("Cancel verification")
+                visible: !isVerified && isContact && isVerificationSent && showVerificationPendingSection
+                onClicked: {
+                    popup.contactsStore.cancelVerificationRequest(userPublicKey);
+                    popup.close()
+                }
+            }
+        }
+
+        rightButtons: ObjectModel {
+            StatusFlatButton {
+                text: userIsBlocked ?
+                    qsTr("Unblock User") :
+                    qsTr("Block User")
+                type: StatusBaseButton.Type.Danger
+                visible: !isAddedContact
+                onClicked: userIsBlocked ? unblockUser() : blockUser()
+            }
+
+            StatusFlatButton {
+                visible:  !showRemoveVerified && !showIdentityVerified && !showVerifyIdentitySection && !showVerificationPendingSection && !userIsBlocked && isAddedContact
+                type: StatusBaseButton.Type.Danger
+                text: qsTr('Remove Contact')
+                onClicked: {
+                    profileView.removeContactConfirmationDialog.parentPopup = popup;
+                    profileView.removeContactConfirmationDialog.open();
+                }
+            }
+
+            StatusButton {
+                text: qsTr("Send Contact Request")
+                visible: !userIsBlocked && !isAddedContact
+                onClicked: sendContactRequestModal.open()
+            }
+
+            StatusButton {
+                text: qsTr("Mark Untrustworthy")
+                visible: !showIdentityVerifiedUntrustworthy && !showIdentityVerified && !showVerifyIdentitySection && userTrustIsUnknown
+                enabled: !showVerificationPendingSection || verificationResponse !== ""
+                type: StatusBaseButton.Type.Danger
+                onClicked: {
+                    if (showVerificationPendingSection) {
+                        popup.showIdentityVerified = false;
+                        popup.showIdentityVerifiedUntrustworthy = true;
+                        popup.showVerificationPendingSection = false;
+                        popup.showVerifyIdentitySection = false;
+                        profileView.stepsListModel.setProperty(2, "stepCompleted", true);
+                        popup.contactsStore.verifiedUntrustworthy(userPublicKey);
+                    } else {
+                        popup.contactsStore.markUntrustworthy(userPublicKey);
+                        popup.close();
+                    }
+                }
+            }
+
+            StatusButton {
+                text: qsTr("Remove 'Identity Verified' status")
+                visible: isTrusted && !showIdentityVerified && !showRemoveVerified
+                type: StatusBaseButton.Type.Danger
+                onClicked: {
+                    showRemoveVerified = true
+                }
+            }
+
+            StatusButton {
+                text: qsTr("No")
+                visible: showRemoveVerified
+                type: StatusBaseButton.Type.Danger
+                onClicked: {
+                    showRemoveVerified = false
+                }
+            }
+
+            StatusButton {
+                text: qsTr("Yes")
+                visible: showRemoveVerified
+                onClicked: {
+                    popup.contactsStore.removeTrustStatus(userPublicKey);
+                    popup.close();
+                }
+            }
+
+            StatusButton {
+                text: qsTr("Remove Untrustworthy Mark")
+                visible: userIsUntrustworthy
+                onClicked: {
+                    popup.contactsStore.removeTrustStatus(userPublicKey);
+                    popup.close();
+                }
+            }
+
+            StatusButton {
+                text: qsTr("Verify Identity")
+                visible: !showIdentityVerifiedUntrustworthy && !showIdentityVerified &&
+                    !showVerifyIdentitySection && isContact  && !isVerificationSent
+                    && !hasReceivedVerificationRequest
+                onClicked: {
+                    popup.showVerifyIdentitySection = true
+                }
+            }
+
+            StatusButton {
+                text: qsTr("Verify Identity pending...")
+                visible: (!showIdentityVerifiedUntrustworthy && !showIdentityVerified && !isTrusted
+                    && isContact && isVerificationSent && !showVerificationPendingSection) ||
+                    (hasReceivedVerificationRequest && !isTrusted)
+                onClicked: {
+                    if (hasReceivedVerificationRequest) {
+                        popup.openPendingRequestPopup()
+                    } else {
+                        popup.showVerificationPendingSection = true
+                        profileView.wizardAnimation.running = true
+                    }
+                }
+            }
+
+            StatusButton {
+                text: qsTr("Send verification request")
+                visible: showVerifyIdentitySection && isContact  && !isVerificationSent
+                onClicked: {
+                    popup.contactsStore.sendVerificationRequest(userPublicKey, Utils.escapeHtml(profileView.challengeTxt.input.text));
+                    profileView.stepsListModel.setProperty(1, "stepCompleted", true);
+                    Global.displayToastMessage(qsTr("Verification request sent"),
+                                           "",
+                                           "checkmark-circle",
+                                           false,
+                                           Constants.ephemeralNotificationType.normal,
+                                           "");
+                    popup.close();
+                }
+            }
+
+            StatusButton {
+                text: qsTr("Confirm Identity")
+                visible: isContact  && isVerificationSent && !isTrusted && showVerificationPendingSection
+                enabled: verificationChallenge !== "" && verificationResponse !== ""
+                onClicked: {
+                    popup.showIdentityVerified = true;
+                    popup.showIdentityVerifiedUntrustworthy = false;
+                    popup.showVerificationPendingSection = false;
+                    popup.showVerifyIdentitySection = false;
+                    profileView.stepsListModel.setProperty(2, "stepCompleted", true);
+                    popup.contactsStore.verifiedTrusted(userPublicKey);
+                    popup.isTrusted = true
+                }
+            }
+
+            StatusButton {
+                visible: showIdentityVerified || showIdentityVerifiedUntrustworthy
+                text: qsTr("Rename")
+                onClicked: {
+                    profileView.nicknamePopup.open()
+                }
+            }
+
+            StatusButton {
+                visible: showIdentityVerified || showIdentityVerifiedUntrustworthy
+                text: qsTr("Close")
+                onClicked: {
+                    popup.close();
+                }
+            }
+        }
+    }
+
+    StatusScrollView {
+        id: scrollView
+
         anchors.fill: parent
+        padding: 0
 
-        profileStore: popup.profileStore
+        SharedViews.ProfileView {
-        contactsStore: popup.contactsStore
+            id: profileView
+
+            width: scrollView.availableWidth
+
+            profileStore: popup.profileStore
+            contactsStore: popup.contactsStore
 
 
-        userPublicKey: popup.userPublicKey
+            userPublicKey: popup.userPublicKey
-        userDisplayName: popup.userDisplayName
+            userDisplayName: popup.userDisplayName
-        userName: popup.userName
+            userName: popup.userName
-        userNickname: popup.userNickname
+            userNickname: popup.userNickname
-        userEnsName: popup.userEnsName
+            userEnsName: popup.userEnsName
-        userIcon: popup.userIcon
+            userIcon: popup.userIcon
-        userBio: popup.userBio
+            userBio: popup.userBio
-        userSocialLinks: popup.userSocialLinks
+            userSocialLinks: popup.userSocialLinks
-        userIsEnsVerified: popup.userIsEnsVerified
+            userIsEnsVerified: popup.userIsEnsVerified
-        userIsBlocked: popup.userIsBlocked
+            userIsBlocked: popup.userIsBlocked
-        isAddedContact: popup.isAddedContact
+            isAddedContact: popup.isAddedContact
-        isCurrentUser: popup.isCurrentUser
+            isCurrentUser: popup.isCurrentUser
 
-        isContact: popup.isContact
+            isContact: popup.isContact
-        isVerificationSent: popup.isVerificationSent
+            isVerificationSent: popup.isVerificationSent
-        isVerified: popup.isVerified
+            isVerified: popup.isVerified
-        isTrusted: popup.isTrusted
+            isTrusted: popup.isTrusted
-        hasReceivedVerificationRequest: popup.hasReceivedVerificationRequest
+            hasReceivedVerificationRequest: popup.hasReceivedVerificationRequest
 
-        userTrustStatus: popup.userTrustStatus
+            userTrustStatus: popup.userTrustStatus
-        outgoingVerificationStatus: popup.outgoingVerificationStatus
+            outgoingVerificationStatus: popup.outgoingVerificationStatus
-        
-        showVerifyIdentitySection: popup.showVerifyIdentitySection
-        showVerificationPendingSection: popup.showVerificationPendingSection
-        showIdentityVerified: popup.showIdentityVerified
-        showIdentityVerifiedUntrustworthy: popup.showIdentityVerifiedUntrustworthy
 
-        challenge: popup.challenge
+            showVerifyIdentitySection: popup.showVerifyIdentitySection
-        response: popup.response
+            showVerificationPendingSection: popup.showVerificationPendingSection
+            showIdentityVerified: popup.showIdentityVerified
+            showIdentityVerifiedUntrustworthy: popup.showIdentityVerifiedUntrustworthy
 
-        userIsUntrustworthy: popup.userIsUntrustworthy
+            challenge: popup.challenge
-        userTrustIsUnknown: popup.userTrustIsUnknown
+            response: popup.response
 
-        verificationChallenge: popup.verificationChallenge
+            userIsUntrustworthy: popup.userIsUntrustworthy
-        verificationResponse: popup.verificationResponse
+            userTrustIsUnknown: popup.userTrustIsUnknown
-        verificationResponseDisplayName: popup.verificationResponseDisplayName
-        verificationResponseIcon: popup.verificationResponseIcon
-        verificationRequestedAt: popup.verificationRequestedAt
-        verificationRepliedAt: popup.verificationRepliedAt
 
-        onContactUnblocked: {
+            verificationChallenge: popup.verificationChallenge
-            popup.close()
+            verificationResponse: popup.verificationResponse
-            popup.contactUnblocked(publicKey)
+            verificationResponseDisplayName: popup.verificationResponseDisplayName
-        }
+            verificationResponseIcon: popup.verificationResponseIcon
+            verificationRequestedAt: popup.verificationRequestedAt
+            verificationRepliedAt: popup.verificationRepliedAt
 
-        onContactBlocked: {
+            onContactUnblocked: {
-            popup.close()
+                popup.close()
-            popup.contactBlocked(publicKey)
+                popup.contactUnblocked(publicKey)
-        }
+            }
 
-        onContactAdded: {
+            onContactBlocked: {
-            popup.close()
+                popup.close()
-            popup.contactAdded(publicKey)
+                popup.contactBlocked(publicKey)
-        }
+            }
 
-        onContactRemoved: {
+            onContactAdded: {
-            popup.close()
+                popup.close()
-        }
+                popup.contactAdded(publicKey)
-        
+            }
-        onNicknameEdited: {
+
-            popup.close()
+            onContactRemoved: {
+                popup.close()
+            }
+
+            onNicknameEdited: {
+                popup.close()
+            }
         }
     }
 
@@ -276,173 +464,6 @@ StatusModal {
         onAccepted: popup.contactsStore.sendContactRequest(userPublicKey, message)
         onClosed: popup.close()
     }
-    
-    leftButtons:[
-        StatusButton {
-            text: qsTr("Cancel verification")
-            visible: !isVerified && isContact && isVerificationSent && showVerificationPendingSection
-            onClicked: {
-                popup.contactsStore.cancelVerificationRequest(userPublicKey);
-                popup.close()
-            }
-        }
-    ]
-
-    rightButtons: [
-        StatusFlatButton {
-            text: userIsBlocked ?
-                qsTr("Unblock User") :
-                qsTr("Block User")
-            type: StatusBaseButton.Type.Danger
-            visible: !isAddedContact
-            onClicked: userIsBlocked ? unblockUser() : blockUser()
-        },
-
-        StatusFlatButton {
-            visible:  !showRemoveVerified && !showIdentityVerified && !showVerifyIdentitySection && !showVerificationPendingSection && !userIsBlocked && isAddedContact
-            type: StatusBaseButton.Type.Danger
-            text: qsTr('Remove Contact')
-            onClicked: {
-                profileView.removeContactConfirmationDialog.parentPopup = popup;
-                profileView.removeContactConfirmationDialog.open();
-            }
-        },
-
-        StatusButton {
-            text: qsTr("Send Contact Request")
-            visible: !userIsBlocked && !isAddedContact
-            onClicked: sendContactRequestModal.open()
-        },
-
-        StatusButton {
-            text: qsTr("Mark Untrustworthy")
-            visible: !showIdentityVerifiedUntrustworthy && !showIdentityVerified && !showVerifyIdentitySection && userTrustIsUnknown
-            enabled: !showVerificationPendingSection || verificationResponse !== ""
-            type: StatusBaseButton.Type.Danger
-            onClicked: {
-                if (showVerificationPendingSection) {
-                    popup.showIdentityVerified = false;
-                    popup.showIdentityVerifiedUntrustworthy = true;
-                    popup.showVerificationPendingSection = false;
-                    popup.showVerifyIdentitySection = false;
-                    profileView.stepsListModel.setProperty(2, "stepCompleted", true);
-                    popup.contactsStore.verifiedUntrustworthy(userPublicKey);
-                } else {
-                    popup.contactsStore.markUntrustworthy(userPublicKey);
-                    popup.close();
-                }
-            }
-        },
-
-        StatusButton {
-            text: qsTr("Remove 'Identity Verified' status")
-            visible: isTrusted && !showIdentityVerified && !showRemoveVerified
-            type: StatusBaseButton.Type.Danger
-            onClicked: {
-                showRemoveVerified = true
-            }
-        },
-
-        StatusButton {
-            text: qsTr("No")
-            visible: showRemoveVerified
-            type: StatusBaseButton.Type.Danger
-            onClicked: {
-                showRemoveVerified = false
-            }
-        },
-
-        StatusButton {
-            text: qsTr("Yes")
-            visible: showRemoveVerified
-            onClicked: {
-                popup.contactsStore.removeTrustStatus(userPublicKey);
-                popup.close();
-            }
-        },
-
-        StatusButton {
-            text: qsTr("Remove Untrustworthy Mark")
-            visible: userIsUntrustworthy
-            onClicked: {
-                popup.contactsStore.removeTrustStatus(userPublicKey);
-                popup.close();
-            }
-        },
-
-        StatusButton {
-            text: qsTr("Verify Identity")
-            visible: !showIdentityVerifiedUntrustworthy && !showIdentityVerified &&
-                !showVerifyIdentitySection && isContact  && !isVerificationSent
-                && !hasReceivedVerificationRequest
-            onClicked: {
-                popup.showVerifyIdentitySection = true
-            }
-        },
-
-        StatusButton {
-            text: qsTr("Verify Identity pending...")
-            visible: (!showIdentityVerifiedUntrustworthy && !showIdentityVerified && !isTrusted
-                && isContact && isVerificationSent && !showVerificationPendingSection) ||
-                (hasReceivedVerificationRequest && !isTrusted)
-            onClicked: {
-                if (hasReceivedVerificationRequest) {
-                    popup.openPendingRequestPopup()
-                } else {
-                    popup.showVerificationPendingSection = true
-                    profileView.wizardAnimation.running = true
-                }
-            }
-        },
-
-
-        StatusButton {
-            text: qsTr("Send verification request")
-            visible: showVerifyIdentitySection && isContact  && !isVerificationSent
-            onClicked: {
-                popup.contactsStore.sendVerificationRequest(userPublicKey, Utils.escapeHtml(profileView.challengeTxt.input.text));
-                profileView.stepsListModel.setProperty(1, "stepCompleted", true);
-                Global.displayToastMessage(qsTr("Verification request sent"),
-                                       "",
-                                       "checkmark-circle",
-                                       false,
-                                       Constants.ephemeralNotificationType.normal,
-                                       "");
-                popup.close();
-            }
-        },
-
-        StatusButton {
-            text: qsTr("Confirm Identity")
-            visible: isContact  && isVerificationSent && !isTrusted && showVerificationPendingSection
-            enabled: verificationChallenge !== "" && verificationResponse !== ""
-            onClicked: {
-                popup.showIdentityVerified = true;
-                popup.showIdentityVerifiedUntrustworthy = false;
-                popup.showVerificationPendingSection = false;
-                popup.showVerifyIdentitySection = false;
-                profileView.stepsListModel.setProperty(2, "stepCompleted", true);
-                popup.contactsStore.verifiedTrusted(userPublicKey);
-                popup.isTrusted = true
-            }
-        },
-
-        StatusButton {
-            visible: showIdentityVerified || showIdentityVerifiedUntrustworthy
-            text: qsTr("Rename")
-            onClicked: {
-                profileView.nicknamePopup.open()
-            }
-        },
-
-        StatusButton {
-            visible: showIdentityVerified || showIdentityVerifiedUntrustworthy
-            text: qsTr("Close")
-            onClicked: {
-                popup.close();
-            }
-        }
-    ]
 
     Component {
         id: contactVerificationRequestPopupComponent