Show an indicator in the timeline for mods and admins

3 files changed, 55 insertions, 33 deletions

diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml
index af3a3371..5768a7a6 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -100,6 +100,7 @@ Item {
             required property string url
             required property string userId
             required property string userName
+            required property int userPowerlevel
 
             ListView.delayRemove: true
             anchors.horizontalCenter: parent ? parent.horizontalCenter : undefined
@@ -119,6 +120,7 @@ Item {
                 property date timestamp: wrapper.timestamp
                 property string userId: wrapper.userId
                 property string userName: wrapper.userName
+                property int userPowerlevel: wrapper.userPowerlevel
 
                 active: previousMessageUserId !== userId || previousMessageDay !== day || previousMessageIsStateEvent !== isStateEvent
                 //asynchronous: true
@@ -625,6 +627,13 @@ Item {
                             target: Presence
                         }
                     }
+
+                    PowerlevelIndicator {
+                        Layout.alignment: Qt.AlignVCenter
+                        powerlevel: userPowerlevel
+                        permissions: room ? room.permissions : null
+                        visible: isAdmin || isModerator
+                    }
                 }
             }
         }
diff --git a/resources/qml/components/PowerlevelIndicator.qml b/resources/qml/components/PowerlevelIndicator.qml
new file mode 100644
index 00000000..4b826284
--- /dev/null
+++ b/resources/qml/components/PowerlevelIndicator.qml
@@ -0,0 +1,42 @@
+// SPDX-FileCopyrightText: Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Controls
+import im.nheko
+
+Image {
+    required property int powerlevel
+    required property var permissions
+
+    readonly property bool isAdmin: permissions ? permissions.changeLevel(MtxEvent.PowerLevels) <= powerlevel : false
+    readonly property bool isModerator: permissions ? permissions.redactLevel() <= powerlevel : false
+    readonly property bool isDefault: permissions ? permissions.defaultLevel() <= powerlevel : false
+
+    readonly property string sourceUrl: {
+        if (isAdmin)
+             return "image://colorimage/:/icons/icons/ui/ribbon_star.svg?";
+        else if (isModerator)
+            return "image://colorimage/:/icons/icons/ui/ribbon.svg?";
+        else
+            return "image://colorimage/:/icons/icons/ui/person.svg?";
+    }
+
+    sourceSize.width: 16
+    sourceSize.height: 16
+    source: sourceUrl + (ma.hovered ? palette.highlight : palette.buttonText)
+    ToolTip.visible: ma.hovered
+    ToolTip.text: {
+        if (isAdmin)
+            return qsTr("Administrator: %1").arg(powerlevel);
+        else if (isModerator)
+            return qsTr("Moderator: %1").arg(powerlevel);
+        else
+            return qsTr("User: %1").arg(powerlevel);
+    }
+
+    HoverHandler {
+        id: ma
+    }
+}
diff --git a/resources/qml/dialogs/RoomMembers.qml b/resources/qml/dialogs/RoomMembers.qml
index bbf1605d..64f21381 100644
--- a/resources/qml/dialogs/RoomMembers.qml
+++ b/resources/qml/dialogs/RoomMembers.qml
@@ -4,6 +4,7 @@
 
 import ".."
 import "../ui"
+import "../components"
 import QtQuick 2.12
 import QtQuick.Controls 2.12
 import QtQuick.Layouts 1.12
@@ -159,39 +160,9 @@ ApplicationWindow {
 
                         }
 
-                        Image {
-                            property bool isAdmin: room.permissions.changeLevel(MtxEvent.PowerLevels) <= model.powerlevel
-                            property bool isModerator: room.permissions.redactLevel() <= model.powerlevel
-                            //property bool isDefault: room.permissions.defaultLevel() <= model.powerlevel
-
-                            property string sourceUrl: {
-                                if (isAdmin)
-                                return "image://colorimage/:/icons/icons/ui/ribbon_star.svg?";
-                                else if (isModerator)
-                                return "image://colorimage/:/icons/icons/ui/ribbon.svg?";
-                                else
-                                return "image://colorimage/:/icons/icons/ui/person.svg?";
-                            }
-
-                            Layout.preferredWidth: 16
-                            Layout.preferredHeight: 16
-                            sourceSize.width: width
-                            sourceSize.height: height
-                            source: sourceUrl + (ma.hovered ? palette.highlight : palette.buttonText)
-                            ToolTip.visible: ma.hovered
-                            ToolTip.text: {
-                                if (isAdmin)
-                                return qsTr("Administrator: %1").arg(model.powerlevel);
-                                else if (isModerator)
-                                return qsTr("Moderator: %1").arg(model.powerlevel);
-                                else
-                                return qsTr("User: %1").arg(model.powerlevel);
-                            }
-
-                            HoverHandler {
-                                id: ma
-                            }
-
+                        PowerlevelIndicator {
+                            powerlevel: model.powerlevel
+                            permissions: room.permissions
                         }
 
                         EncryptionIndicator {