feat(ui): introduce `ChannelIcon` component

This component renders channel identicons based on the chat type
and channel name and will render a user identicon in case of a one-on-one
chat.

ui/app/AppLayouts/Chat/ChatColumn/TopBar.qml

@@ -5,6 +5,7 @@ import QtQuick.Layouts 1.3
 import Qt.labs.platform 1.1
 import "../../../../shared"
 import "../../../../imports"
+import "../components"
 
 Rectangle {
     property string channelNameStr: "#" + chatsModel.activeChannel
@@ -16,37 +17,12 @@ Rectangle {
     border.color: Theme.grey
     border.width: 1
 
-    // TODO this should be the Identicon if it's a private chat
-    Rectangle {
-        id: channelIcon
-        width: 36
-        height: 36
-        anchors.left: parent.left
-        anchors.leftMargin: Theme.padding
-        anchors.top: parent.top
-        anchors.topMargin: Theme.smallPadding
-        color: {
-            if (!chatsModel.activeChannel) {
-                return Theme.transparent
-            }
-            const color = chatsModel.getChannelColor(chatsModel.activeChannel)
-            if (!color) {
-                return Theme.transparent
-            }
-            return color
-        }
-        radius: 50
 
-        Text {
+    ChannelIcon {
-            id: channelIconText
+      id: channelIcon
-            color: "white"
+      channelName: chatsModel.activeChannel
-            opacity: 0.7
+      /* TODO(pascal): expose chatType from active channel to set it here */
-            text: chatTopBarContent.channelNameStr.substring(1, 2).toUpperCase()
+      channelType: Constants.chatTypeOneToOne
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            font.weight: Font.Bold
-            font.pixelSize: 18
-        }
     }
 
     TextEdit {
@@ -111,4 +87,4 @@ Rectangle {
             }
         }
     }
-}
+}

ui/app/AppLayouts/Chat/ContactsColumn/Channel.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3
 import Qt.labs.platform 1.1
 import "../../../../shared"
 import "../../../../imports"
+import "../components"
 
 Rectangle {
     id: wrapper
@@ -29,72 +30,14 @@ Rectangle {
         }
     }
 
-    Rectangle {
+    ChannelIcon {
       id: contactImage
-      width: 40
       height: 40
-      anchors.left: parent.left
+      width: 40
-      anchors.leftMargin: Theme.padding
+      topMargin: 12
-      anchors.top: parent.top
+      bottomMargin: 12
-      anchors.topMargin: 12
+      channelName: name
-      anchors.bottom: parent.bottom
+      channelType: chatType
-      anchors.bottomMargin: 12
-      radius: 50
-
-      Loader {
-        sourceComponent: chatType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon
-        anchors.fill: parent
-      }
-
-      Component {
-        id: letterIdenticon
-        Rectangle {
-          width: 40
-          height: 40
-          radius: 50
-          color: {
-              const color = chatsModel.getChannelColor(name)
-              if (!color) {
-                  return Theme.transparent
-              }
-              return color
-          }
-
-          Text {
-            text: {
-              if(chatType == Constants.chatTypeOneToOne){
-                return name;
-              } else {
-                return (name.charAt(0) == "#" ? name.charAt(1) : name.charAt(0)).toUpperCase();
-              }
-            }
-            opacity: 0.7
-            font.weight: Font.Bold
-            font.pixelSize: 21
-            color: "white"
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-          }
-        }
-      }
-
-      Component {
-        id: imageIdenticon
-        Rectangle {
-          width: 40
-          height: 40
-          radius: 50
-          border.color: "#10000000"
-          border.width: 1
-          color: Theme.transparent
-          Image {
-              width: 40
-              height: 40
-              fillMode: Image.PreserveAspectFit
-              source: identicon
-          }
-        }
-      }
     }
 
     Text {

ui/app/AppLayouts/Chat/components/ChannelIcon.qml

@@ -0,0 +1,80 @@
+import QtQuick 2.3
+import QtQuick.Controls 2.3
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+import "../../../../imports"
+import "../../../../shared"
+
+Rectangle {
+  property int topMargin: Theme.smallPadding
+  property int bottomMargin: Theme.smallPadding
+  property string channelName
+  property int channelType
+  property string channelIdenticon
+  id: contactImage
+  width: width ? width : 36
+  height: height ? height: 36
+  anchors.left: parent.left
+  anchors.leftMargin: Theme.padding
+  anchors.top: parent.top
+  anchors.topMargin: topMargin
+  anchors.bottom: parent.bottom
+  anchors.bottomMargin: bottomMargin
+  radius: 50
+
+  Loader {
+    sourceComponent: channelType == Constants.chatTypeOneToOne ? imageIdenticon : letterIdenticon
+    anchors.fill: parent
+  }
+
+  Component {
+    id: letterIdenticon
+    Rectangle {
+      width: contactImage.width ? contactImage.width : 36
+      height: contactImage.height ? contactImage.height: 36
+      radius: 50
+      color: {
+          const color = chatsModel.getChannelColor(channelName)
+          if (!color) {
+              return Theme.transparent
+          }
+          return color
+      }
+
+      Text {
+        text: {
+          if (channelType == Constants.chatTypeOneToOne) {
+            return channelName;
+          } else {
+            return (channelName.charAt(0) == "#" ? channelName.charAt(1) : channelName.charAt(0)).toUpperCase();
+          }
+        }
+        opacity: 0.7
+        font.weight: Font.Bold
+        font.pixelSize: 21
+        color: "white"
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.verticalCenter: parent.verticalCenter
+      }
+    }
+  }
+
+  Component {
+    id: imageIdenticon
+    Rectangle {
+      width: contactImage.width ? contactImage.width : 40
+      height: contactImage.height ? contactImage.height : 40
+      radius: 50
+      border.color: "#10000000"
+      border.width: 1
+      color: Theme.transparent
+      Image {
+          width: contactImage.width ? contactImage.width : 40
+          height: contactImage.height ? contactImage.height : 40
+          fillMode: Image.PreserveAspectFit
+          source: channelIdenticon
+      }
+    }
+  }
+}
+

ui/app/AppLayouts/Chat/components/qmldir

@@ -1,3 +1,4 @@
 SuggestedChannel 1.0 SuggestedChannel.qml
 PublicChatPopup 1.0 PublicChatPopup.qml
-PrivateChatPopup 1.0 PrivateChatPopup.qml
+PrivateChatPopup 1.0 PrivateChatPopup.qml
+ChannelIcon 1.0 ChannelIcon.qml