Add HUserAvatar and HRoomAvatar components

src/qml/Base/HAvatar.qml

@@ -3,7 +3,7 @@ import "../Base"
 import "../utils.js" as Utils
 
 Rectangle {
-    property var name: null
+    property string name: ""
     property var imageUrl: null
     property int dimension: theme.avatar.size
     property bool hidden: false

src/qml/Base/HRoomAvatar.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.7
+
+HAvatar {
+    property string roomId: ""
+
+    readonly property var roomInfo: rooms.getWhere({"roomId": roomId}, 1)[0]
+    readonly property var dname: roomInfo.displayName
+    name: dname[0] == "#" && dname.length > 1 ? dname.substring(1) : dname
+    imageUrl: roomInfo.avatarUrl
+}

src/qml/Base/HStatusAvatar.qml

@@ -1,11 +0,0 @@
-import QtQuick 2.7
-
-HAvatar {
-    HImage {
-        id: status
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        source: "../../icons/status.svg"
-        sourceSize.width: 12
-    }
-}

src/qml/Base/HUserAvatar.qml

@@ -0,0 +1,17 @@
+import QtQuick 2.7
+
+HAvatar {
+    property string userId: ""
+
+    readonly property var userInfo: userId ? users.getUser(userId) : ({})
+    name: userInfo.displayName || userId.substring(1)  // no leading @
+    imageUrl: userInfo.avatarUrl
+
+    //HImage {
+        //id: status
+        //anchors.right: parent.right
+        //anchors.bottom: parent.bottom
+        //source: "../../icons/status.svg"
+        //sourceSize.width: 12
+    //}
+}

src/qml/Chat/Banners/Banner.qml

@@ -17,7 +17,7 @@ HRectangle {
         id: bannerRow
         anchors.fill: parent
 
-        HAvatar {
+        HUserAvatar {
             id: bannerAvatar
             dimension: banner.Layout.preferredHeight
         }

src/qml/Chat/Banners/InviteBanner.qml

@@ -10,9 +10,7 @@ Banner {
 
     color: theme.chat.inviteBanner.background
 
-    avatar.name: inviterId ? (inviterInfo.displayName ||
+    avatar.userId: inviterId
-                              Utils.stripUserId(inviterId)) : ""
-    avatar.imageUrl: inviterId ? inviterInfo.avatarUrl : ""
 
     labelText: qsTr("%1 invited you to join the room.").arg(
         inviterId ?

src/qml/Chat/Banners/LeftBanner.qml

@@ -1,6 +1,5 @@
 import QtQuick 2.7
 import "../../Base"
-import "../../utils.js" as Utils
 
 Banner {
     property string userId: ""
@@ -9,7 +8,7 @@ Banner {
     color: theme.chat.leftBanner.background
 
     // TODO: avatar func auto
-    avatar.name: userInfo.displayName || Utils.stripUserId(userId)
+    avatar.userId: userId
     avatar.imageUrl: users.getUser(userId).avatarUrl
     labelText: qsTr("You are not part of this room anymore.")
 

src/qml/Chat/RoomHeader.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.7
 import QtQuick.Layouts 1.3
 import "../Base"
-import "../utils.js" as Utils
 
 HRectangle {
     property string displayName: ""
@@ -21,9 +20,9 @@ HRectangle {
         spacing: 8
         anchors.fill: parent
 
-        HAvatar {
+        HRoomAvatar {
             id: avatar
-            name: Utils.stripRoomName(displayName)
+            roomId: chatPage.roomId
             dimension: roomHeader.height
             Layout.alignment: Qt.AlignTop
         }

src/qml/Chat/RoomSidePane/MemberDelegate.qml

@@ -1,32 +1,31 @@
 import QtQuick 2.7
 import QtQuick.Layouts 1.3
 import "../../Base"
-import "../utils.js" as Utils
 
 MouseArea {
     id: memberDelegate
     width: memberList.width
     height: childrenRect.height
 
-    property var member: Backend.users.get(userId)
+    property var memberInfo: Backend.users.get(model.userId)
 
     HRowLayout {
         width: parent.width
         spacing: memberList.spacing
 
-        HAvatar {
+        HUserAvatar {
-            id: memberAvatar
+            id: avatar
-            name: member.displayName || Utils.stripUserId(member.userId)
+            userId: memberInfo.userId
         }
 
         HColumnLayout {
             Layout.fillWidth: true
             Layout.maximumWidth:
-                parent.width - parent.totalSpacing - memberAvatar.width
+                parent.width - parent.totalSpacing - avatar.width
 
             HLabel {
                 id: memberName
-                text: member.displayName.value
+                text: memberInfo.displayName || model.userId
                 elide: Text.ElideRight
                 maximumLineCount: 1
                 verticalAlignment: Qt.AlignVCenter

src/qml/Chat/SendBox.qml

@@ -1,7 +1,6 @@
 import QtQuick 2.7
 import QtQuick.Layouts 1.3
 import "../Base"
-import "../utils.js" as Utils
 
 HRectangle {
     function setFocus() { textArea.forceActiveFocus() }
@@ -17,10 +16,9 @@ HRectangle {
     HRowLayout {
         anchors.fill: parent
 
-        HAvatar {
+        HUserAvatar {
             id: avatar
-            name: chatPage.senderInfo.displayName ||
+            userId: chatPage.userId
-                  Utils.stripUserId(chatPage.userId)
             dimension: sendBox.Layout.minimumHeight
         }
 

src/qml/Chat/Timeline/EventContent.qml

@@ -8,10 +8,10 @@ Row {
     spacing: standardSpacing / 2
     layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
 
-    HAvatar {
+    HUserAvatar {
         id: avatar
         hidden: combine
-        name: senderInfo.displayName || Utils.stripUserId(model.senderId)
+        userId: model.senderId
         dimension: model.showNameLine ? 48 : 28
         visible: ! isOwn
     }

src/qml/SidePane/AccountDelegate.qml

@@ -1,17 +1,15 @@
 import QtQuick 2.7
 import QtQuick.Layouts 1.3
 import "../Base"
-import "../utils.js" as Utils
 
 Column {
     id: accountDelegate
     width: parent.width
 
     // Avoid binding loop by using Component.onCompleted
-    property var user: null
+    property var userInfo: null
-    Component.onCompleted: user = users.getUser(userId)
+    Component.onCompleted: userInfo = users.getUser(model.userId)
 
-    property string roomCategoriesListUserId: userId
     property bool expanded: true
 
     HRowLayout {
@@ -19,9 +17,9 @@ Column {
         height: childrenRect.height
         id: row
 
-        HAvatar {
+        HUserAvatar {
             id: avatar
-            name: user.displayName || Utils.stripUserId(user.userId)
+            Component.onCompleted: userId = model.userId
         }
 
         HColumnLayout {
@@ -30,7 +28,7 @@ Column {
 
             HLabel {
                 id: accountLabel
-                text: user.displayName || user.userId
+                text: userInfo.displayName || model.userId
                 elide: HLabel.ElideRight
                 maximumLineCount: 1
                 Layout.fillWidth: true
@@ -40,7 +38,7 @@ Column {
 
             HTextField {
                 id: statusEdit
-                text: user.statusMessage
+                text: userInfo.statusMessage
                 placeholderText: qsTr("Set status message")
                 font.pixelSize: theme.fontSize.small
                 background: null
@@ -51,7 +49,7 @@ Column {
                 Layout.fillWidth: true
 
                 onEditingFinished: {
-                    //Backend.setStatusMessage(userId, text)
+                    //Backend.setStatusMessage(model.userId, text)  TODO
                     pageStack.forceActiveFocus()
                 }
             }
@@ -71,7 +69,7 @@ Column {
         height: childrenRect.height * (accountDelegate.expanded ? 1 : 0)
         clip: heightAnimation.running
 
-        userId: roomCategoriesListUserId
+        userId: userInfo.userId
 
         Behavior on height {
             HNumberAnimation { id: heightAnimation }

src/qml/SidePane/RoomDelegate.qml

@@ -15,9 +15,9 @@ MouseArea {
         width: parent.width
         spacing: sidePane.collapsed ? 0 : sidePane.normalSpacing
 
-        HAvatar {
+        HRoomAvatar {
             id: roomAvatar
-            name: Utils.stripRoomName(model.displayName)
+            roomId: model.roomId
         }
 
         HColumnLayout {

src/qml/utils.js

@@ -12,18 +12,6 @@ function arrayToModelItem(keys_name, array) {
 }
 
 
-function stripUserId(user_id) {
-    // Remove leading @
-    return user_id.substring(1)
-}
-
-
-function stripRoomName(name) {
-    // Remove leading # (aliases)
-    return name[0] == "#" && name.length > 1 ? name.substring(1) : name
-}
-
-
 function hueFrom(string) {
     // Calculate and return a unique hue between 0 and 1 for the string
     var hue = 0
@@ -55,7 +43,8 @@ function nameColor(name) {
 
 
 function coloredNameHtml(name, alt_id) {
-    return "<font color='" + nameColor(name || stripUserId(alt_id)) + "'>" +
+    // substring: remove leading @
+    return "<font color='" + nameColor(name || alt_id.substring(1)) + "'>" +
            escapeHtml(name || alt_id) +
            "</font>"
 }