Fix Verification Window Sizing

Update the layouts in the device verifcation process to make sure that all possible window sizes can be handled

BUG: 485309

src/qml/EmojiItem.qml

@@ -3,36 +3,30 @@
 
 import QtQuick
 import QtQuick.Controls as QQC2
-import QtQml
+import QtQuick.Layouts
 
 import org.kde.kirigami as Kirigami
 import org.kde.neochat
 
-Column {
+ColumnLayout {
     id: root
 
-    property string emoji
+    property alias emoji: emojiLabel.text
-    property string description
+    property alias description: descriptionLabel.text
 
     QQC2.Label {
         id: emojiLabel
-        x: 0
+        Layout.fillWidth: true
-        y: 0
+        Layout.preferredWidth: Kirigami.Units.iconSizes.huge
-        width: parent.width
+        Layout.preferredHeight: Kirigami.Units.iconSizes.huge
-        height: parent.height * 0.75
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
-
-        text: root.emoji
         font.family: "emoji"
         font.pointSize: Kirigami.Theme.defaultFont.pointSize * 4
     }
     QQC2.Label {
-        x: 0
+        id: descriptionLabel
-        y: parent.height * 0.75
+        Layout.fillWidth: true
-        width: parent.width
-        height: parent.height * 0.25
-        text: root.description
         verticalAlignment: Text.AlignVCenter
         horizontalAlignment: Text.AlignHCenter
     }

src/qml/EmojiRow.qml

@@ -2,22 +2,24 @@
 // SPDX-License-Identifier: GPL-2.0-or-later
 
 import QtQuick
-import QtQml
+import QtQuick.Layouts
+
+import org.kde.kirigami as Kirigami
 
 import org.kde.neochat
 
-Row {
+RowLayout {
     id: root
 
     property alias model: repeater.model
-    anchors.horizontalCenter: parent.horizontalCenter
+
+    spacing: Kirigami.Units.largeSpacing
+
     Repeater {
         id: repeater
         delegate: EmojiItem {
             emoji: modelData.emoji
             description: modelData.description
-            width: root.height
-            height: width
         }
     }
 }

src/qml/EmojiSas.qml

@@ -3,12 +3,12 @@
 
 import QtQuick
 import QtQuick.Controls as QQC2
-import QtQml
+import QtQuick.Layouts
 
 import org.kde.kirigami as Kirigami
 import org.kde.neochat
 
-Column {
+ColumnLayout {
     id: root
 
     required property var model
@@ -16,24 +16,30 @@ Column {
     signal accept
     signal reject
 
-    visible: dialog.session.state === KeyVerificationSession.WAITINGFORVERIFICATION
-    anchors.centerIn: parent
     spacing: Kirigami.Units.largeSpacing
+
+    Item {
+        Layout.fillHeight: true
+    }
     QQC2.Label {
+        Layout.fillWidth: true
         text: i18n("Confirm the emoji below are displayed on both devices, in the same order.")
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.Wrap
     }
     EmojiRow {
-        anchors.horizontalCenter: parent.horizontalCenter
+        Layout.maximumWidth: implicitWidth
-        height: Kirigami.Units.gridUnit * 4
+        Layout.alignment: Qt.AlignHCenter
         model: root.model.slice(0, 4)
     }
     EmojiRow {
-        anchors.horizontalCenter: parent.horizontalCenter
+        Layout.maximumWidth: implicitWidth
-        height: Kirigami.Units.gridUnit * 4
+        Layout.alignment: Qt.AlignHCenter
         model: root.model.slice(4, 7)
     }
-    Row {
+    RowLayout {
-        anchors.horizontalCenter: parent.horizontalCenter
+        Layout.fillWidth: true
+        Layout.alignment: Qt.AlignHCenter
         QQC2.Button {
             anchors.bottom: parent.bottom
             text: i18n("They match")
@@ -47,4 +53,7 @@ Column {
             onClicked: root.reject()
         }
     }
+    Item {
+        Layout.fillHeight: true
+    }
 }

src/qml/KeyVerificationDialog.qml

@@ -17,55 +17,68 @@ Kirigami.Page {
 
     required property var session
 
-    Item {
+    states: [
-        anchors.fill: parent
+        State {
-        VerificationCanceled {
+            name: "cancelled"
-            visible: root.session.state === KeyVerificationSession.CANCELED
+            when: root.session.state === KeyVerificationSession.CANCELED
-            anchors.centerIn: parent
+            PropertyChanges {
-            reason: root.session.error
+                target: stateLoader
-        }
+                sourceComponent: verificationCanceled
-        EmojiSas {
+            }
-            anchors.centerIn: parent
+        },
-            visible: root.session.state === KeyVerificationSession.WAITINGFORVERIFICATION
+        State {
-            model: root.session.sasEmojis
+            name: "waitingForVerification"
-            onReject: root.session.cancelVerification(KeyVerificationSession.MISMATCHED_SAS)
+            when: root.session.state === KeyVerificationSession.WAITINGFORVERIFICATION
-            onAccept: root.session.sendMac()
+            PropertyChanges {
-        }
+                target: stateLoader
-        Message {
+                sourceComponent: emojiSas
-            visible: root.session.state === KeyVerificationSession.WAITINGFORREADY
+            }
-            anchors.centerIn: parent
+        },
-            icon: "security-medium-symbolic"
+        State {
-            text: i18n("Waiting for device to accept verification.")
+            name: "waitingForReady"
-        }
+            when: root.session.state === KeyVerificationSession.WAITINGFORREADY
-        Message {
+            PropertyChanges {
-            visible: root.session.state === KeyVerificationSession.INCOMING
+                target: stateLoader
-            anchors.centerIn: parent
+                sourceComponent: message
-            icon: "security-medium-symbolic"
+            }
-            text: i18n("Incoming key verification request from device **%1**", root.session.remoteDeviceId)
+        },
-        }
+        State {
-        Message {
+            name: "incoming"
-            visible: root.session.state === KeyVerificationSession.WAITINGFORMAC
+            when: root.session.state === KeyVerificationSession.INCOMING
-            anchors.centerIn: parent
+            PropertyChanges {
-            icon: "security-medium-symbolic"
+                target: stateLoader
-            text: i18n("Waiting for other party to verify.")
+                sourceComponent: message
-        }
+            }
-        Delegates.RoundedItemDelegate {
+        },
-            id: emojiVerification
+        State {
-            text: i18n("Emoji Verification")
+            name: "waitingForMac"
-            visible: root.session.state === KeyVerificationSession.READY
+            when: root.session.state === KeyVerificationSession.WAITINGFORMAC
-            contentItem: Delegates.SubtitleContentItem {
+            PropertyChanges {
-                subtitle: i18n("Compare a set of emoji on both devices")
+                target: stateLoader
-                itemDelegate: emojiVerification
+                sourceComponent: message
+            }
+        },
+        State {
+            name: "ready"
+            when: root.session.state === KeyVerificationSession.READY
+            PropertyChanges {
+                target: stateLoader
+                sourceComponent: emojiVerificationComponent
+            }
+        },
+        State {
+            name: "done"
+            when: root.session.state === KeyVerificationSession.DONE
+            PropertyChanges {
+                target: stateLoader
+                sourceComponent: message
             }
-            onClicked: root.session.sendStartSas()
-            anchors.centerIn: parent
-        }
-        Message {
-            visible: root.session.state === KeyVerificationSession.DONE
-            anchors.centerIn: parent
-            text: i18n("Successfully verified device **%1**", root.session.remoteDeviceId)
-            icon: "security-high"
         }
+    ]
+
+    Loader {
+        id: stateLoader
+        anchors.fill: parent
     }
 
     footer: QQC2.ToolBar {
@@ -89,4 +102,65 @@ Kirigami.Page {
             }
         }
     }
+
+    Component {
+        id: verificationCanceled
+        VerificationCanceled {
+            reason: root.session.error
+        }
+    }
+
+    Component {
+        id: emojiSas
+        EmojiSas {
+            model: root.session.sasEmojis
+            onReject: root.session.cancelVerification(KeyVerificationSession.MISMATCHED_SAS)
+            onAccept: root.session.sendMac()
+        }
+    }
+
+    Component {
+        id: message
+        Message {
+            icon: {
+                switch (root.session.state) {
+                case KeyVerificationSession.WAITINGFORREADY:
+                case KeyVerificationSession.INCOMING:
+                case KeyVerificationSession.WAITINGFORMAC:
+                    return "security-medium-symbolic";
+                case KeyVerificationSession.DONE:
+                    return "security-high";
+                default:
+                    return "";
+                }
+            }
+            text: {
+                switch (root.session.state) {
+                case KeyVerificationSession.WAITINGFORREADY:
+                    return i18n("Waiting for device to accept verification.");
+                case KeyVerificationSession.INCOMING:
+                    return i18n("Incoming key verification request from device **%1**", root.session.remoteDeviceId);
+                case KeyVerificationSession.WAITINGFORMAC:
+                    return i18n("Waiting for other party to verify.");
+                case KeyVerificationSession.DONE:
+                    return i18n("Successfully verified device **%1**", root.session.remoteDeviceId)
+                default:
+                    return "";
+                }
+            }
+        }
+    }
+
+    Component {
+        id: emojiVerificationComponent
+        Delegates.RoundedItemDelegate {
+            id: emojiVerification
+            text: i18n("Emoji Verification")
+            contentItem: Delegates.SubtitleContentItem {
+                subtitle: i18n("Compare a set of emoji on both devices")
+                itemDelegate: emojiVerification
+            }
+            onClicked: root.session.sendStartSas()
+        }
+    }
 }

src/qml/Message.qml

@@ -3,27 +3,36 @@
 
 import QtQuick
 import QtQuick.Controls as QQC2
-import QtQml
+import QtQuick.Layouts
 
 import org.kde.kirigami as Kirigami
 import org.kde.neochat
 
-Column {
+ColumnLayout {
     id: root
 
     required property string icon
     required property string text
 
-    anchors.centerIn: parent
+    anchors.fill: parent
+
+    Item {
+        Layout.fillHeight: true
+    }
     Kirigami.Icon {
-        width: Kirigami.Units.iconSizes.enormous
+        Layout.fillWidth: true
-        height: width
+        Layout.preferredWidth: Kirigami.Units.iconSizes.enormous
-        anchors.horizontalCenter: parent.horizontalCenter
+        Layout.preferredHeight: Kirigami.Units.iconSizes.enormous
         source: root.icon
     }
     QQC2.Label {
+        Layout.fillWidth: true
         text: root.text
         textFormat: Text.MarkdownText
         horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.Wrap
+    }
+    Item {
+        Layout.fillHeight: true
     }
 }

src/qml/VerificationCanceled.qml

@@ -11,7 +11,6 @@ Message {
 
     required property int reason
 
-    anchors.centerIn: parent
     icon: "security-low"
     text: {
         switch (root.reason) {