Show QR codes in UserDetailDialog

.kde-ci.yml

@@ -16,6 +16,7 @@ Dependencies:
     'frameworks/kcolorscheme': '@latest-kf6'
     'libraries/kquickimageeditor': '@latest-kf6'
     'frameworks/sonnet': '@latest-kf6'
+    'frameworks/prison': '@latest-kf6'
     'libraries/kirigami-addons': '@latest-kf6'
     'third-party/libquotient': '@latest'
     'third-party/qtkeychain': '@latest'

CMakeLists.txt

@@ -119,6 +119,7 @@ ecm_find_qmlmodule(org.kde.kquickimageeditor 1.0)
 ecm_find_qmlmodule(org.kde.kitemmodels 1.0)
 ecm_find_qmlmodule(org.kde.quickcharts 1.0)
 ecm_find_qmlmodule(QtLocation)
+ecm_find_qmlmodule(org.kde.prison)
 
 find_package(KQuickImageEditor COMPONENTS)
 set_package_properties(KQuickImageEditor PROPERTIES

src/CMakeLists.txt

@@ -287,6 +287,7 @@ qt_add_qml_module(neochat URI org.kde.neochat NO_PLUGIN
         qml/RemoveChildDialog.qml
         qml/SelectParentDialog.qml
         qml/Security.qml
+        qml/QrCodeMaximizeComponent.qml
     RESOURCES
         qml/confetti.png
         qml/glowdot.png

src/qml/QrCodeMaximizeComponent.qml

@@ -0,0 +1,50 @@
+// SPDX-FileCopyrightText: 2023 Tobias Fella <tobias.fella@kde.org>
+// SPDX-License-Identifier: LGPL-2.0-or-later
+
+import QtQuick
+import QtQuick.Controls as QQC2
+import QtQuick.Layouts
+
+import org.kde.kirigamiaddons.labs.components as Components
+import org.kde.kirigami as Kirigami
+import org.kde.prison
+
+Components.AbstractMaximizeComponent {
+    id: root
+
+    required property string text
+    required property color avatarColor
+    required property string avatarSource
+
+    Shortcut {
+        sequences: [StandardKey.Cancel]
+        onActivated: root.close()
+    }
+
+    leading: Components.Avatar {
+        id: userAvatar
+        implicitWidth: Kirigami.Units.iconSizes.medium
+        implicitHeight: Kirigami.Units.iconSizes.medium
+
+        name: root.title
+        source: root.avatarSource
+        color: root.avatarColor
+    }
+
+    content: Item {
+        Keys.onEscapePressed: root.close()
+        Barcode {
+            barcodeType: Barcode.QRCode
+            content: root.text
+            height: Math.min(parent.height, Kirigami.Units.gridUnit * 20)
+            width: height
+            anchors.centerIn: parent
+        }
+        MouseArea {
+            id: closeArea
+            anchors.fill: parent
+            acceptedButtons: Qt.LeftButton
+            onClicked: root.close()
+        }
+    }
+}

src/qml/UserDetailDialog.qml

@@ -3,11 +3,13 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import QtQuick
+import QtQuick.Controls as QQC2
 import QtQuick.Layouts
 
 import org.kde.kirigami as Kirigami
 import org.kde.kirigamiaddons.components as KirigamiComponents
 import org.kde.kirigamiaddons.formcard as FormCard
+import org.kde.prison
 
 import org.kde.neochat
 
@@ -40,6 +42,7 @@ Kirigami.Dialog {
             spacing: Kirigami.Units.largeSpacing
 
             KirigamiComponents.Avatar {
+                id: avatar
                 Layout.preferredWidth: Kirigami.Units.iconSizes.huge
                 Layout.preferredHeight: Kirigami.Units.iconSizes.huge
 
@@ -67,6 +70,31 @@ Kirigami.Dialog {
                     text: root.user.id
                 }
             }
+            QQC2.AbstractButton {
+                Layout.minimumHeight: avatar.height * 0.75
+                Layout.maximumHeight: avatar.height * 1.5
+                contentItem: Barcode {
+                    id: barcode
+                    barcodeType: Barcode.QRCode
+                    content: "https://matrix.to/#/" + root.user.id
+                }
+
+                onClicked: {
+                    let map = qrMaximizeComponent.createObject(parent, {
+                        text: barcode.content,
+                        title: root.user.displayName,
+                        subtitle: root.user.id,
+                        avatarColor: root.user.color,
+                        avatarSource: root.user.avatarSource,
+                    });
+                    root.close()
+                    map.open()
+                }
+
+                QQC2.ToolTip.visible: hovered
+                QQC2.ToolTip.text: barcode.content
+                QQC2.ToolTip.delay: Kirigami.Units.toolTipDelay
+            }
         }
 
         Kirigami.Separator {
@@ -206,5 +234,9 @@ Kirigami.Dialog {
             }
         }
     }
+    Component {
+        id: qrMaximizeComponent
+        QrCodeMaximizeComponent {}
+    }
 }