Use an overlay sheet for user detail dialog

imports/NeoChat/Component/Timeline/MessageDelegate.qml

@@ -14,6 +14,7 @@ import org.kde.kirigami 2.13 as Kirigami
 import org.kde.neochat 0.1
 import NeoChat.Setting 0.1
 import NeoChat.Component 2.0
+import NeoChat.Dialog 2.0
 
 RowLayout {
     default property alias innerObject : column.children
@@ -48,6 +49,17 @@ RowLayout {
         name: author.displayName
         source: author.avatarMediaId ? "image://mxc/" + author.avatarMediaId : ""
         color: author.color
+
+        Component {
+            id: userDetailDialog
+
+            UserDetailDialog {}
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: userDetailDialog.createObject(QQC2.ApplicationWindow.overlay, {"room": currentRoom, "user": author.object, "displayName": author.displayName, "avatarMediaId": author.avatarMediaId, "avatarUrl": author.avatarUrl}).open()
+        }
     }
 
     Item {

imports/NeoChat/Component/Timeline/StateDelegate.qml

@@ -31,11 +31,8 @@ RowLayout {
             UserDetailDialog {}
         }
 
-        RippleEffect {
+        MouseArea {
             anchors.fill: parent
-
-            circular: true
-
             onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author.object, "displayName": author.displayName, "avatarMediaId": author.avatarMediaId, "avatarUrl": author.avatarUrl}).open()
         }
     }

imports/NeoChat/Component/Timeline/VideoDelegate.qml

@@ -63,7 +63,7 @@ RowLayout {
             UserDetailDialog {}
         }
 
-        RippleEffect {
+        MouseArea {
             anchors.fill: parent
 
             circular: true

imports/NeoChat/Dialog/AccountDetailDialog.qml

@@ -9,7 +9,7 @@ import NeoChat.Effect 2.0
 import org.kde.neochat 0.1
 import NeoChat.Setting 0.1
 
-Dialog {
+Kirigami.OverlaySheet {
     anchors.centerIn: parent
 
     width: 480

imports/NeoChat/Dialog/UserDetailDialog.qml

@@ -1,5 +1,11 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Black Hat <bhat@encom.eu.org>
+ * SPDX-FileCopyrightText: 2020 Carl Schwan <carl@carlschwan.eu>
+ *
+ * SPDX-LicenseIdentifier: GPL-3.0-only
+ */
 import QtQuick 2.12
-import QtQuick.Controls 2.12
+import QtQuick.Controls 2.12 as QQC2
 import QtQuick.Layouts 1.12
 import org.kde.kirigami 2.13 as Kirigami
 
@@ -7,7 +13,9 @@ import NeoChat.Component 2.0
 import NeoChat.Effect 2.0
 import NeoChat.Setting 0.1
 
-Dialog {
+Kirigami.OverlaySheet {
+    id: root
+
     property var room
     property var user
 
@@ -15,32 +23,37 @@ Dialog {
     property string avatarMediaId: user.avatarMediaId
     property string avatarUrl: user.avatarUrl
 
-    anchors.centerIn: parent
+    parent: applicationWindow().overlay
-    width: 360
 
-    id: root
+    leftPadding: 0
+    rightPadding: 0
+    topPadding: 0
 
-    modal: true
+    header: Kirigami.Heading {
+        text: i18nc("Account detail dialog", "Account detail - %1", displayName)
+    }
 
     contentItem: ColumnLayout {
+        spacing: 0
         RowLayout {
             Layout.fillWidth: true
-
+            Layout.leftMargin: Kirigami.Units.largeSpacing
-            spacing: 16
+            Layout.rightMargin: Kirigami.Units.largeSpacing
+            Layout.topMargin: Kirigami.Units.smallSpacing
+            Layout.bottomMargin: Kirigami.Units.smallSpacing
+            spacing: Kirigami.Units.largeSpacing
 
             Kirigami.Avatar {
-                Layout.preferredWidth: 72
+                Layout.preferredWidth: Kirigami.Units.iconSizes.huge
-                Layout.preferredHeight: 72
+                Layout.preferredHeight: Kirigami.Units.iconSizes.huge
 
                 name: displayName
                 source: avatarMediaId ? "image://mxc/" + avatarMediaId : ""
 
-                RippleEffect {
+                MouseArea {
                     anchors.fill: parent
 
-                    circular: true
+                    onClicked: {
-
-                    onPrimaryClicked: {
                         if (avatarMediaId) {
                             fullScreenImage.createObject(parent, {"filename": displayName, "localPath": room.urlToMxcUrl(avatarUrl)}).showFullScreen()
                         }
@@ -51,110 +64,53 @@ Dialog {
             ColumnLayout {
                 Layout.fillWidth: true
 
-                Label {
+                Kirigami.Heading {
+                    level: 1
                     Layout.fillWidth: true
-
-                    font.pixelSize: 18
                     font.bold: true
 
                     elide: Text.ElideRight
                     wrapMode: Text.NoWrap
                     text: displayName
-                    color: MPalette.foreground
                 }
 
-                Label {
+                QQC2.Label {
                     Layout.fillWidth: true
 
-                    text: "Online"
+                    text: i18n("Online")
-                    color: MPalette.lighter
+                    color: Kirigami.Theme.disabledTextColor
                 }
-            }
+                Kirigami.Heading {
-        }
+                    level: 5
-
-        MenuSeparator {
-            Layout.fillWidth: true
-        }
-
-        RowLayout {
-            Layout.fillWidth: true
-
-            spacing: 8
-
-            ColumnLayout {
-                Layout.fillWidth: true
-
-                Label {
-                    Layout.fillWidth: true
-
-                    elide: Text.ElideRight
-                    wrapMode: Text.NoWrap
                     text: user.id
-                    color: MPalette.accent
-                }
-
-                Label {
-                    Layout.fillWidth: true
-
-                    wrapMode: Label.Wrap
-                    text: "User ID"
-                    color: MPalette.lighter
                 }
             }
         }
 
-        MenuSeparator {
+        QQC2.MenuSeparator {}
-            Layout.fillWidth: true
-        }
 
-        Control {
+        Kirigami.BasicListItem {
-            Layout.fillWidth: true
+            action: Kirigami.Action {
-
+                text: room.connection.isIgnored(user) ? i18n("Unignore this user") : i18n("Ignore this user")
-            contentItem: RowLayout {
+                icon.name: "im-invisible-user"
-                Label {
+                onTriggered: {
-                    Layout.fillWidth: true
-
-                    wrapMode: Label.Wrap
-                    text: room.connection.isIgnored(user) ? "Unignore this user" : "Ignore this user"
-
-                    color: MPalette.accent
-                }
-            }
-
-            background: RippleEffect {
-                onPrimaryClicked: {
                     root.close()
                     room.connection.isIgnored(user) ? room.connection.removeFromIgnoredUsers(user) : room.connection.addToIgnoredUsers(user)
                 }
             }
         }
-
+        /*Kirigami.BasicListItem {
-        Control {
+            action: Kirigami.Action {
-            Layout.fillWidth: true
+                text: i18n("Kick this user")
-
+                icon.name: "im-kick-user"
-            contentItem: RowLayout {
+                onTriggered: room.kickMember(user.id)
-                Label {
-                    Layout.fillWidth: true
-
-                    wrapMode: Label.Wrap
-                    text: "Kick this user"
-
-                    color: MPalette.accent
-                }
             }
+        }*/
+        Component {
+            id: fullScreenImage
 
-            background: RippleEffect {
+            FullScreenImage {}
-                onPrimaryClicked: room.kickMember(user.id)
-            }
         }
     }
-
-    Component {
-        id: fullScreenImage
-
-        FullScreenImage {}
-    }
-
-    onClosed: destroy()
 }