From ef34ed7c2049aab6fdcb02c0ec4f2714f2acea36 Mon Sep 17 00:00:00 2001 From: James Graham Date: Sat, 13 Apr 2024 18:51:06 +0000 Subject: [PATCH] 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 | 24 ++--- src/qml/EmojiRow.qml | 12 ++- src/qml/EmojiSas.qml | 29 ++++-- src/qml/KeyVerificationDialog.qml | 168 +++++++++++++++++++++--------- src/qml/Message.qml | 21 ++-- src/qml/VerificationCanceled.qml | 1 - 6 files changed, 171 insertions(+), 84 deletions(-) diff --git a/src/qml/EmojiItem.qml b/src/qml/EmojiItem.qml index 3da5ba119..c0fe9a850 100644 --- a/src/qml/EmojiItem.qml +++ b/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 string description + property alias emoji: emojiLabel.text + property alias description: descriptionLabel.text QQC2.Label { id: emojiLabel - x: 0 - y: 0 - width: parent.width - height: parent.height * 0.75 + Layout.fillWidth: true + Layout.preferredWidth: Kirigami.Units.iconSizes.huge + Layout.preferredHeight: Kirigami.Units.iconSizes.huge verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter - - text: root.emoji font.family: "emoji" font.pointSize: Kirigami.Theme.defaultFont.pointSize * 4 } QQC2.Label { - x: 0 - y: parent.height * 0.75 - width: parent.width - height: parent.height * 0.25 - text: root.description + id: descriptionLabel + Layout.fillWidth: true verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } diff --git a/src/qml/EmojiRow.qml b/src/qml/EmojiRow.qml index 1db703da4..28ee2b620 100644 --- a/src/qml/EmojiRow.qml +++ b/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 } } } diff --git a/src/qml/EmojiSas.qml b/src/qml/EmojiSas.qml index 4df36cec7..16270c0a1 100644 --- a/src/qml/EmojiSas.qml +++ b/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 - height: Kirigami.Units.gridUnit * 4 + Layout.maximumWidth: implicitWidth + Layout.alignment: Qt.AlignHCenter model: root.model.slice(0, 4) } EmojiRow { - anchors.horizontalCenter: parent.horizontalCenter - height: Kirigami.Units.gridUnit * 4 + Layout.maximumWidth: implicitWidth + Layout.alignment: Qt.AlignHCenter model: root.model.slice(4, 7) } - Row { - anchors.horizontalCenter: parent.horizontalCenter + RowLayout { + 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 + } } diff --git a/src/qml/KeyVerificationDialog.qml b/src/qml/KeyVerificationDialog.qml index 75ee31d98..550919291 100644 --- a/src/qml/KeyVerificationDialog.qml +++ b/src/qml/KeyVerificationDialog.qml @@ -17,55 +17,68 @@ Kirigami.Page { required property var session - Item { - anchors.fill: parent - VerificationCanceled { - visible: root.session.state === KeyVerificationSession.CANCELED - anchors.centerIn: parent - reason: root.session.error - } - EmojiSas { - anchors.centerIn: parent - visible: root.session.state === KeyVerificationSession.WAITINGFORVERIFICATION - model: root.session.sasEmojis - onReject: root.session.cancelVerification(KeyVerificationSession.MISMATCHED_SAS) - onAccept: root.session.sendMac() - } - Message { - visible: root.session.state === KeyVerificationSession.WAITINGFORREADY - anchors.centerIn: parent - icon: "security-medium-symbolic" - text: i18n("Waiting for device to accept verification.") - } - Message { - visible: root.session.state === KeyVerificationSession.INCOMING - anchors.centerIn: parent - icon: "security-medium-symbolic" - text: i18n("Incoming key verification request from device **%1**", root.session.remoteDeviceId) - } - Message { - visible: root.session.state === KeyVerificationSession.WAITINGFORMAC - anchors.centerIn: parent - icon: "security-medium-symbolic" - text: i18n("Waiting for other party to verify.") - } - Delegates.RoundedItemDelegate { - id: emojiVerification - text: i18n("Emoji Verification") - visible: root.session.state === KeyVerificationSession.READY - contentItem: Delegates.SubtitleContentItem { - subtitle: i18n("Compare a set of emoji on both devices") - itemDelegate: emojiVerification + states: [ + State { + name: "cancelled" + when: root.session.state === KeyVerificationSession.CANCELED + PropertyChanges { + target: stateLoader + sourceComponent: verificationCanceled + } + }, + State { + name: "waitingForVerification" + when: root.session.state === KeyVerificationSession.WAITINGFORVERIFICATION + PropertyChanges { + target: stateLoader + sourceComponent: emojiSas + } + }, + State { + name: "waitingForReady" + when: root.session.state === KeyVerificationSession.WAITINGFORREADY + PropertyChanges { + target: stateLoader + sourceComponent: message + } + }, + State { + name: "incoming" + when: root.session.state === KeyVerificationSession.INCOMING + PropertyChanges { + target: stateLoader + sourceComponent: message + } + }, + State { + name: "waitingForMac" + when: root.session.state === KeyVerificationSession.WAITINGFORMAC + PropertyChanges { + target: stateLoader + 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() + } + } } diff --git a/src/qml/Message.qml b/src/qml/Message.qml index 1fdaf0c30..0bce4f214 100644 --- a/src/qml/Message.qml +++ b/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 - height: width - anchors.horizontalCenter: parent.horizontalCenter + Layout.fillWidth: true + Layout.preferredWidth: Kirigami.Units.iconSizes.enormous + 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 } } diff --git a/src/qml/VerificationCanceled.qml b/src/qml/VerificationCanceled.qml index a0f5e3384..8dc3a3243 100644 --- a/src/qml/VerificationCanceled.qml +++ b/src/qml/VerificationCanceled.qml @@ -11,7 +11,6 @@ Message { required property int reason - anchors.centerIn: parent icon: "security-low" text: { switch (root.reason) {