fix: contact ID verification and community intro sizing issues

- port to StatusDialog
- fix binding loops
- fix `timestamp` to be a double rather than a `string`

Fixes #9563

storybook/pages/CommunityIntroDialogPage.qml

@@ -70,7 +70,7 @@ Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
 
             Label {
                 Layout.fillWidth: true
-                text: "Nadialogme"
+                text: "Community name"
                 font.weight: Font.Bold
             }
 

ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml

@@ -132,6 +132,7 @@ Button {
             text: root.text
             color: d.textColor
             verticalAlignment: Text.AlignVCenter
+            elide: Text.ElideRight
         }
     }
 

ui/imports/shared/popups/CommunityIntroDialog.qml

@@ -23,26 +23,6 @@ StatusDialog {
     signal joined
     signal cancelMembershipRequest
 
-    QtObject {
-        id: d
-
-        readonly property int maxWidth: 640
-        readonly property int minWidth: 300
-        readonly property int maxHeight: 640
-
-        function getHorizontalPaddings() {
-            return root.leftPadding + root.rightPadding
-        }
-
-        function getVerticalPaddings() {
-            return  root.topPadding + root.bottomPadding
-        }
-
-        function getMaxMinWidth() {
-            return Math.max(introText.implicitWidth, d.minWidth - d.getHorizontalPaddings())
-        }
-    }
-
     title: qsTr("Welcome to %1").arg(name)
 
     footer: StatusDialogFooter {
@@ -55,6 +35,7 @@ StatusDialog {
                 type: root.isInvitationPending ? StatusBaseButton.Type.Danger
                                                : StatusBaseButton.Type.Normal
                 enabled: checkBox.checked || root.isInvitationPending
+                textFillWidth: true
                 onClicked: {
                     if (root.isInvitationPending) {
                         root.cancelMembershipRequest()
@@ -68,20 +49,16 @@ StatusDialog {
         }
     }
 
-    implicitWidth: Math.min(d.getMaxMinWidth(), d.maxWidth - d.getHorizontalPaddings())
-    implicitHeight: Math.min(columnContent.height + footer.height + header.height + d.getVerticalPaddings(), d.maxHeight)
-
-    StatusScrollView {
-        anchors.fill: parent
-        contentHeight: columnContent.height
-        contentWidth: columnContent.width
+    contentItem: StatusScrollView {
         padding: 0
+        implicitWidth: 640 // by design
+        implicitHeight: columnContent.childrenRect.height
 
         ColumnLayout {
             id: columnContent
 
             spacing: 24
-            width: Math.max(root.width - d.getHorizontalPaddings(), d.minWidth - d.getHorizontalPaddings())
+            width: root.availableWidth
 
             StatusRoundedImage {
                 id: roundImage

ui/imports/shared/popups/ContactVerificationRequestPopup.qml

@@ -1,18 +1,19 @@
 import QtQuick 2.14
 import QtQuick.Controls 2.14
 import QtQuick.Layouts 1.14
+import QtQml.Models 2.14
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
-import StatusQ.Popups 0.1
+import StatusQ.Popups.Dialog 0.1
 
 import shared.controls 1.0
 import shared.views.chat 1.0
 
 import utils 1.0
 
-StatusModal {
+StatusDialog {
     id: root
 
     property var contactsStore
@@ -58,27 +59,25 @@ StatusModal {
         property string senderIcon: ""
         property string challengeText: ""
         property string responseText: ""
-        property string messageTimestamp: ""
-        property string responseTimestamp: ""
+        property double messageTimestamp
+        property double responseTimestamp
     }
 
-    anchors.centerIn: parent
-    header.title: qsTr("%1 is asking you to verify your identity").arg(d.senderDisplayName)
+    title: qsTr("%1 is asking you to verify your identity").arg(d.senderDisplayName)
 
-    onOpened: {
+    onAboutToShow: {
         root.updateVerificationDetails()
         verificationResponse.input.edit.forceActiveFocus(Qt.MouseFocusReason)
     }
 
     contentItem: StatusScrollView {
         padding: 0
-        contentWidth: 480
+        implicitWidth: 560
+        implicitHeight: contentColumn.childrenRect.height
 
         ColumnLayout {
             id: contentColumn
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.margins: Style.current.bigPadding
+            width: root.availableWidth
             spacing: Style.current.padding
 
             StatusBaseText {
@@ -89,7 +88,6 @@ StatusModal {
                         .arg(d.senderDisplayName).arg(d.senderDisplayName)
                 font.pixelSize: 15
                 Layout.fillWidth: true
-                Layout.topMargin: Style.current.padding
             }
 
             SimplifiedMessageView {
@@ -144,7 +142,8 @@ StatusModal {
         }
     }
 
-    rightButtons: [
+    footer: StatusDialogFooter {
+        rightButtons: ObjectModel {
             StatusButton {
                 visible: !d.responseText
                 text: qsTr("Refuse Verification")
@@ -152,7 +151,7 @@ StatusModal {
                     root.verificationRefused(d.senderPublicKey)
                     root.close();
                 }
-        },
+            }
             StatusButton {
                 text: qsTr("Send Answer")
                 visible: !d.responseText
@@ -162,18 +161,19 @@ StatusModal {
                     d.responseText = verificationResponse.text
                     d.responseTimestamp = Date.now()
                 }
-        },
+            }
             StatusFlatButton {
                 visible: d.responseText
                 text: qsTr("Change answer")
                 onClicked: {
                     d.responseText = ""
                 }
-        },
+            }
             StatusButton {
                 visible: d.responseText
                 text: qsTr("Close")
                 onClicked: root.close()
             }
-    ]
+        }
+    }
 }

ui/imports/shared/popups/OutgoingContactVerificationRequestPopup.qml

@@ -67,12 +67,12 @@ StatusDialog {
 
     contentItem: StatusScrollView {
         padding: 0
-        contentWidth: 480
+        implicitWidth: 560
+        implicitHeight: layout.childrenRect.height
 
         ColumnLayout {
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.margins: Style.current.bigPadding
+            id: layout
+            width: root.availableWidth
             spacing: Style.current.padding
 
             SimplifiedMessageView {
@@ -104,7 +104,7 @@ StatusDialog {
 
             StatusBaseText {
                 id: waitingForText
-                visible: !root.verificationResponse
+                visible: !responseMessage.visible
                 text: qsTr("Waiting for %1's response...").arg(root.verificationResponseDisplayName)
                 font.pixelSize: Style.current.additionalTextSize
                 horizontalAlignment : Text.AlignHCenter

ui/imports/shared/views/ProfileDialogView.qml

@@ -68,7 +68,8 @@ Pane {
             outgoingVerificationStatus !== Constants.verificationStatus.unverified &&
             outgoingVerificationStatus !== Constants.verificationStatus.verified &&
             outgoingVerificationStatus !== Constants.verificationStatus.trusted
-        readonly property bool isVerificationRequestReceived: incomingVerificationStatus === Constants.verificationStatus.verifying
+        readonly property bool isVerificationRequestReceived: incomingVerificationStatus === Constants.verificationStatus.verifying ||
+                                                              incomingVerificationStatus === Constants.verificationStatus.verified
 
         readonly property bool isTrusted: outgoingVerificationStatus === Constants.verificationStatus.trusted ||
                                           incomingVerificationStatus === Constants.verificationStatus.trusted

ui/imports/shared/views/chat/MessageContextMenuView.qml

@@ -84,7 +84,8 @@ StatusMenu {
         if (!root.selectedUserPublicKey || root.isMe || !root.isContact) {
             return false
         }
-        return contactDetails.incomingVerificationStatus === Constants.verificationStatus.verifying
+        return contactDetails.incomingVerificationStatus === Constants.verificationStatus.verifying ||
+                contactDetails.incomingVerificationStatus === Constants.verificationStatus.verified
     }
     readonly property bool isVerificationRequestSent: {
         if (!root.selectedUserPublicKey || root.isMe || !root.isContact) {

ui/imports/shared/views/chat/SimplifiedMessageView.qml

@@ -18,12 +18,7 @@ RowLayout {
     property Component messageSubheaderComponent: null
     property Component messageBadgeComponent: null
 
-    property StatusMessageDetails messageDetails: StatusMessageDetails {
-        sender.profileImage {
-            width: 40
-            height: 40
-        }
-    }
+    property StatusMessageDetails messageDetails: StatusMessageDetails {}
 
     signal openProfilePopup()