Click on user icon to open user detail dialog.

imports/Spectral/Component/Timeline/FileDelegate.qml

@@ -11,6 +11,7 @@ import Spectral.Setting 0.1
 import Spectral.Component 2.0
 import Spectral.Dialog 2.0
 import Spectral.Font 0.1
+import Spectral.Effect 2.0
 
 ColumnLayout {
     readonly property bool avatarVisible: !sentByMe && (aboveAuthor !== author || aboveSection !== section || aboveEventType === "state" || aboveEventType === "emote" || aboveEventType === "other")
@@ -53,6 +54,20 @@ ColumnLayout {
             visible: avatarVisible
             hint: author.displayName
             source: author.avatarMediaId
+
+            Component {
+                id: userDetailDialog
+
+                UserDetailDialog {}
+            }
+
+            RippleEffect {
+                anchors.fill: parent
+
+                circular: true
+
+                onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
+            }
         }
 
         Label {

imports/Spectral/Component/Timeline/ImageDelegate.qml

@@ -54,6 +54,20 @@ ColumnLayout {
             visible: avatarVisible
             hint: author.displayName
             source: author.avatarMediaId
+
+            Component {
+                id: userDetailDialog
+
+                UserDetailDialog {}
+            }
+
+            RippleEffect {
+                anchors.fill: parent
+
+                circular: true
+
+                onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
+            }
         }
 
         Label {

imports/Spectral/Component/Timeline/MessageDelegate.qml

@@ -50,6 +50,20 @@ ColumnLayout {
             visible: avatarVisible
             hint: author.displayName
             source: author.avatarMediaId
+
+            Component {
+                id: userDetailDialog
+
+                UserDetailDialog {}
+            }
+
+            RippleEffect {
+                anchors.fill: parent
+
+                circular: true
+
+                onClicked: userDetailDialog.createObject(ApplicationWindow.overlay, {"room": currentRoom, "user": author}).open()
+            }
         }
 
         Label {

imports/Spectral/Dialog/UserDetailDialog.qml

@@ -39,7 +39,9 @@ Dialog {
 
                     font.pixelSize: 18
                     font.bold: true
-                    wrapMode: Label.Wrap
+
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
                     text: user ? user.displayName : "No Name"
                     color: MPalette.foreground
                 }
@@ -47,7 +49,6 @@ Dialog {
                 Label {
                     Layout.fillWidth: true
 
-                    wrapMode: Label.Wrap
                     text: "Online"
                     color: MPalette.lighter
                 }
@@ -78,7 +79,8 @@ Dialog {
                 Label {
                     Layout.fillWidth: true
 
-                    wrapMode: Label.Wrap
+                    elide: Text.ElideRight
+                    wrapMode: Text.NoWrap
                     text: user ? user.id : "No ID"
                     color: MPalette.accent
                 }
@@ -122,8 +124,8 @@ Dialog {
 
             background: RippleEffect {
                 onPrimaryClicked: {
-                    room.connection.isIgnored(user) ? room.connection.removeFromIgnoredUsers(user) : room.connection.addToIgnoredUsers(user)
                     root.close()
+                    room.connection.isIgnored(user) ? room.connection.removeFromIgnoredUsers(user) : room.connection.addToIgnoredUsers(user)
                 }
             }
         }