Remove ImageItem, Paintable and use unified image provider.

imports/Spectral/Panel/RoomDrawer.qml

@@ -7,8 +7,6 @@ import Spectral.Component 2.0
 
 import Spectral 0.1
 
-import "qrc:/js/util.js" as Util
-
 Drawer {
     property var room
 
@@ -20,13 +18,13 @@ Drawer {
         anchors.fill: parent
         anchors.margins: 32
 
-        ImageItem {
+        Avatar {
             Layout.preferredWidth: 96
             Layout.preferredHeight: 96
             Layout.alignment: Qt.AlignHCenter
 
             hint: room ? room.displayName : "No name"
-            source: room ? room.paintable : null
+            source: room ? room.avatarUrl : null
         }
 
         Label {
@@ -117,11 +115,11 @@ Drawer {
                     anchors.margins: 8
                     spacing: 12
 
-                    ImageItem {
+                    Avatar {
                         Layout.preferredWidth: height
                         Layout.fillHeight: true
 
-                        source: paintable
+                        source: avatar
                         hint: name
                     }
 

imports/Spectral/Panel/RoomHeader.qml

@@ -5,9 +5,10 @@ import QtQuick.Controls.Material 2.2
 
 import Spectral 0.1
 import Spectral.Effect 2.0
+import Spectral.Component 2.0
 
 Control {
-    property alias paintable: headerImage.source
+    property alias avatar: headerImage.source
     property alias topic: headerTopicLabel.text
     property bool atTop: false
     signal clicked()
@@ -31,13 +32,13 @@ Control {
 
         spacing: 12
 
-        ImageItem {
+        Avatar {
             Layout.preferredWidth: height
             Layout.fillHeight: true
 
             id: headerImage
 
-            source: currentRoom.paintable
+            source: currentRoom.avatarUrl
             hint: currentRoom ? currentRoom.displayName : "No name"
         }
 

imports/Spectral/Panel/RoomListPanel.qml

@@ -110,13 +110,13 @@ Rectangle {
                     contentItem: ColumnLayout {
                         spacing: 4
 
-                        ImageItem {
+                        Avatar {
                             Layout.preferredWidth: 200
                             Layout.preferredHeight: 200
                             Layout.margins: 12
                             Layout.alignment: Qt.AlignHCenter
 
-                            source: root.user ? root.user.paintable : null
+                            source: root.user ? root.user.avatarUrl : null
                             hint: root.user ? root.user.displayName : "?"
                         }
 
@@ -646,14 +646,14 @@ Rectangle {
                     background: Item {}
                 }
 
-                ImageItem {
+                Avatar {
                     Layout.preferredWidth: height
                     Layout.fillHeight: true
                     Layout.alignment: Qt.AlignRight
 
                     visible: !searchField.active
 
-                    source: root.user ? root.user.paintable : null
+                    source: root.user ? root.user.avatarUrl : null
                     hint: root.user ? root.user.displayName : "?"
 
                     MouseArea {
@@ -765,13 +765,11 @@ Rectangle {
 
                     spacing: 12
 
-                    ImageItem {
-                        id: imageItem
-
+                    Avatar {
                         Layout.preferredWidth: height
                         Layout.fillHeight: true
 
-                        source: paintable
+                        source: avatar
                         hint: name || "No Name"
                     }
 

imports/Spectral/Panel/RoomPanel.qml

@@ -14,7 +14,6 @@ import Spectral.Setting 0.1
 import SortFilterProxyModel 0.2
 
 import "qrc:/js/md.js" as Markdown
-import "qrc:/js/util.js" as Util
 
 Item {
     property var currentRoom: null
@@ -63,7 +62,7 @@ Item {
 
             id: roomHeader
 
-            paintable: currentRoom ? currentRoom.paintable : null
+            avatar: currentRoom ? currentRoom.avatarUrl : ""
             topic: currentRoom ? (currentRoom.topic).replace(/(\r\n\t|\n|\r\t)/gm,"") : ""
             atTop: messageListView.atYBeginning
 
@@ -295,11 +294,11 @@ Item {
                             anchors.margins: 8
                             spacing: 12
 
-                            ImageItem {
+                            Avatar {
                                 Layout.preferredWidth: height
                                 Layout.fillHeight: true
 
-                                source: modelData.paintable
+                                source: modelData.avatar
                                 hint: modelData.displayName
                             }
 

imports/Spectral/Panel/RoomPanelInput.qml

@@ -50,11 +50,11 @@ Control {
 
             spacing: 8
 
-            ImageItem {
+            Avatar {
                 Layout.preferredWidth: 32
                 Layout.preferredHeight: 32
 
-                source: replyUser ? replyUser.paintable : null
+                source: replyUser ? replyUser.avatarUrl : ""
                 hint: replyUser ? replyUser.displayName : "No name"
             }
 
@@ -125,11 +125,11 @@ Control {
                         verticalAlignment: Text.AlignVCenter
                         horizontalAlignment: Text.AlignHCenter
                     }
-                    ImageItem {
+                    Avatar {
                         width: 20
                         height: 20
                         visible: !isEmoji
-                        source: modelData.paintable || null
+                        source: modelData.avatarUrl || null
                     }
                     Label {
                         height: parent.height