Update and improve HAvatar code

harmonyqml/components/base/HAvatar.qml

@@ -3,25 +3,21 @@ import QtQuick.Controls 2.0
 import QtQuick.Layouts 1.4
 import "../base" as Base
 
-Item {
-    property bool invisible: false
+Rectangle {
+    property bool hidden: false
     property var name: null  // null, string or PyQtFuture
     property var imageSource: null
-    property int dimmension: 48
+    property int dimension: 48
 
     readonly property string resolvedName:
         ! name ? "?" :
         typeof(name) == "string" ? name :
         (name.value ? name.value : "?")
 
-    id: root
-    width: dimmension
-    height: invisible ? 1 : dimmension
+    width: dimension
+    height: hidden ? 1 : dimension
+    opacity: hidden ? 0 : 1
 
-    Rectangle {
-        id: letterRectangle
-        anchors.fill: parent
-        visible: ! invisible && imageSource === null
     color: resolvedName === "?" ?
            Base.HStyle.avatar.background.unknown :
            Qt.hsla(
@@ -32,22 +28,22 @@ Item {
             )
 
     HLabel {
+        z: 1
         anchors.centerIn: parent
+        visible: ! hidden
+
         text: resolvedName.charAt(0)
         color: Base.HStyle.avatar.letter
-            font.pixelSize: letterRectangle.height / 1.4
-        }
+        font.pixelSize: parent.height / 1.4
     }
 
-    Image {
-        id: avatarImage
+    HImage {
+        z: 2
         anchors.fill: parent
-        visible: ! invisible && imageSource !== null
+        visible: ! hidden && imageSource !== null
 
         Component.onCompleted: if (imageSource) {source = imageSource}
-        asynchronous: true
-        mipmap: true
         fillMode: Image.PreserveAspectCrop
-        sourceSize.width: root.dimmension
+        sourceSize.width: dimension
     }
 }

harmonyqml/components/chat/Banner.qml

@@ -21,7 +21,7 @@ Base.HGlassRectangle {
 
         Base.HAvatar {
             id: bannerAvatar
-            dimmension: banner.Layout.preferredHeight
+            dimension: banner.Layout.preferredHeight
         }
 
         Base.HLabel {

harmonyqml/components/chat/EventContent.qml

@@ -16,8 +16,8 @@ RowLayout {
     Base.HAvatar {
         id: avatar
         name: displayName
-        invisible: combine
-        dimmension: 28
+        hidden: combine
+        dimension: 28
     }
 
     Base.HLabel {

harmonyqml/components/chat/MessageContent.qml

@@ -9,7 +9,7 @@ Row {
     layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
     anchors.right: isOwn ? parent.right : undefined
 
-    Base.HAvatar { id: avatar; invisible: combine; name: displayName }
+    Base.HAvatar { id: avatar; hidden: combine; name: displayName }
 
     ColumnLayout {
         spacing: 0

harmonyqml/components/chat/RoomHeader.qml

@@ -21,7 +21,7 @@ Base.HGlassRectangle {
         Base.HAvatar {
             id: avatar
             Layout.alignment: Qt.AlignTop
-            dimmension: root.Layout.minimumHeight
+            dimension: root.Layout.minimumHeight
             name: displayName
         }
 

harmonyqml/components/chat/SendBox.qml

@@ -21,7 +21,7 @@ Base.HGlassRectangle {
         Base.HAvatar {
             id: avatar
             name: Backend.getUserDisplayName(chatPage.userId)
-            dimmension: root.Layout.minimumHeight
+            dimension: root.Layout.minimumHeight
         }
 
         ScrollView {

harmonyqml/components/sidePane/AccountDelegate.qml

@@ -12,7 +12,7 @@ ColumnLayout {
         id: row
         spacing: 0
 
-        Base.HAvatar { id: avatar; name: displayName; dimmension: 36 }
+        Base.HAvatar { id: avatar; name: displayName; dimension: 36 }
 
         ColumnLayout {
             Layout.fillWidth: true

harmonyqml/components/sidePane/RoomDelegate.qml

@@ -16,7 +16,7 @@ MouseArea {
         id: row
         spacing: 1
 
-        Base.HAvatar { id: avatar; name: displayName; dimmension: root.height }
+        Base.HAvatar { id: avatar; name: displayName; dimension: root.height }
 
         ColumnLayout {
             spacing: 0