From ebeb1eb7721f357b016f6e914509918b6bee5356 Mon Sep 17 00:00:00 2001
From: Nicolas Werner <nicolas.werner@hotmail.de>
Date: Sat, 7 Sep 2019 22:22:07 +0200
Subject: Implement avatars in qml timeline

---
 resources/qml/Avatar.qml       | 45 ++++++++++++++++++++++++++++++++++++++++++
 resources/qml/TimelineView.qml |  5 +++--
 resources/res.qrc              |  1 +
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 resources/qml/Avatar.qml

(limited to 'resources')

diff --git a/resources/qml/Avatar.qml b/resources/qml/Avatar.qml
new file mode 100644
index 00000000..9d7b54fe
--- /dev/null
+++ b/resources/qml/Avatar.qml
@@ -0,0 +1,45 @@
+import QtQuick 2.6
+import QtGraphicalEffects 1.0
+import Qt.labs.settings 1.0
+
+Rectangle {
+	id: avatar
+	width: 48
+	height: 48
+	radius: settings.avatar_circles ? height/2 : 3
+
+	Settings {
+		id: settings
+		category: "user"
+		property bool avatar_circles: true
+	}
+
+	property alias url: img.source
+	property string displayName
+
+	Text {
+		anchors.fill: parent
+		text: String.fromCodePoint(displayName.codePointAt(0))
+		color: colors.text
+		font.pixelSize: avatar.height/2
+		verticalAlignment: Text.AlignVCenter
+		horizontalAlignment: Text.AlignHCenter
+	}
+
+	Image {
+		id: img
+		anchors.fill: parent
+		asynchronous: true
+
+		layer.enabled: true
+		layer.effect: OpacityMask {
+			maskSource: Rectangle {
+				anchors.fill: parent
+				width: avatar.width
+				height: avatar.height
+				radius: settings.avatar_circles ? height/2 : 3
+			}
+		}
+	}
+	color: colors.dark
+}
diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml
index 5f068e57..0151686a 100644
--- a/resources/qml/TimelineView.qml
+++ b/resources/qml/TimelineView.qml
@@ -181,10 +181,11 @@ Rectangle {
 				Row {
 					height: userName.height
 					spacing: 4
-					Rectangle {
+					Avatar {
 						width: 48
 						height: 48
-						color: "green"
+						url: chat.model.avatarUrl(section.split(" ")[0]).replace("mxc://", "image://MxcImage/")
+						displayName: chat.model.displayName(section.split(" ")[0])
 					}
 
 					Text { 
diff --git a/resources/res.qrc b/resources/res.qrc
index b18835fb..6f6d480a 100644
--- a/resources/res.qrc
+++ b/resources/res.qrc
@@ -116,6 +116,7 @@
     </qresource>
     <qresource prefix="/">
         <file>qml/TimelineView.qml</file>
+        <file>qml/Avatar.qml</file>
         <file>qml/delegates/TextMessage.qml</file>
         <file>qml/delegates/NoticeMessage.qml</file>
     </qresource>
-- 
cgit 1.4.1