Implement avatars in qml timeline
3 files changed, 49 insertions, 2 deletions
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>
|
