Add user avatars in talk notifications in activity list

Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>

src/gui/tray/ActivityItemContent.qml

@@ -29,6 +29,7 @@ RowLayout {
         Layout.preferredHeight: model.thumbnail.isMimeTypeIcon ? Style.trayListItemIconSize * 0.9 : Style.trayListItemIconSize
         readonly property int imageWidth: width * (1 - Style.thumbnailImageSizeReduction)
         readonly property int imageHeight: height * (1 - Style.thumbnailImageSizeReduction)
+        readonly property int thumbnailRadius: model.thumbnail.isUserAvatar ? width / 2 : 3
 
         Loader {
             id: thumbnailImageLoader
@@ -57,7 +58,7 @@ RowLayout {
                 Rectangle {
                     id: mask
                     color: "white"
-                    radius: 3
+                    radius: thumbnailItem.thumbnailRadius
                     anchors.fill: thumbnailImage
                     visible: false
                     width: thumbnailImage.paintedWidth
@@ -81,11 +82,13 @@ RowLayout {
             readonly property int negativeLeftMargin: -((width / 2) +
                                                         ((width - paintedWidth) / 2) +
                                                         ((thumbnailImageLoader.width - thumbnailItem.imageWidth) / 2) +
-                                                        (thumbnailImageLoader.width - thumbnailImageLoader.item.paintedWidth) / 2)
+                                                        ((thumbnailImageLoader.width - thumbnailImageLoader.item.paintedWidth) / 2) +
+                                                        (thumbnailItem.thumbnailRadius / 4))
             readonly property int negativeTopMargin: -((height / 2) +
                                                        ((height - paintedHeight) / 2) +
                                                        ((thumbnailImageLoader.height - thumbnailItem.imageHeight) / 4) +
-                                                       ((thumbnailImageLoader.height - thumbnailImageLoader.item.paintedHeight) / 4))
+                                                       ((thumbnailImageLoader.height - thumbnailImageLoader.item.paintedHeight) / 4) +
+                                                       (thumbnailItem.thumbnailRadius / 4))
             anchors.verticalCenter: if(model.thumbnail === undefined) parent.verticalCenter
             anchors.left: model.thumbnail === undefined ? parent.left : thumbnailImageLoader.right
             anchors.leftMargin: if(model.thumbnail !== undefined) negativeLeftMargin

src/gui/tray/activitylistmodel.cpp

@@ -197,14 +197,22 @@ QVariant ActivityListModel::data(const QModelIndex &index, int role) const
                {QStringLiteral("view"), preview._view},
                {QStringLiteral("isMimeTypeIcon"), preview._isMimeTypeIcon},
                {QStringLiteral("filename"), preview._filename},
+               {QStringLiteral("isUserAvatar"), false},
         });
     };
 
+    const auto generateAvatarThumbnailMap = [](const QString &avatarThumbnailUrl) {
+        return QVariantMap {
+            {QStringLiteral("source"), avatarThumbnailUrl},
+            {QStringLiteral("isMimeTypeIcon"), false},
+            {QStringLiteral("isUserAvatar"), true},
+        };
+    };
+
     const auto generateIconPath = [&]() {
         auto colorIconPath = role == DarkIconRole ? QStringLiteral("qrc:///client/theme/white/") : QStringLiteral("qrc:///client/theme/black/");
-        if (a._type == Activity::NotificationType) {
+        if (a._type == Activity::NotificationType && !a._talkNotificationData.userAvatar.isEmpty()) {
-            colorIconPath.append("bell.svg");
+            return QStringLiteral("qrc:///client/theme/colored/talk-bordered.svg");
-            return colorIconPath;
         } else if (a._type == Activity::SyncResultType) {
             colorIconPath.append("state-error.svg");
             return colorIconPath;
@@ -325,6 +333,10 @@ QVariant ActivityListModel::data(const QModelIndex &index, int role) const
     case IsCurrentUserFileActivityRole:
         return a._isCurrentUserFileActivity;
     case ThumbnailRole: {
+        if (a._type == Activity::NotificationType && !a._talkNotificationData.userAvatar.isEmpty()) {
+            return generateAvatarThumbnailMap(a._talkNotificationData.userAvatar);
+        }
+
         if(a._previews.empty()) {
             return {};
         }

theme.qrc.in

@@ -218,6 +218,7 @@
         <file>theme/colored/add-bordered.svg</file>
         <file>theme/colored/delete.svg</file>
         <file>theme/colored/delete-bordered.svg</file>
+        <file>theme/colored/talk-bordered.svg</file>
         <file>theme/colored/@APPLICATION_ICON_NAME@-icon.svg</file>
         <file>theme/add.svg</file>
         <file>theme/share.svg</file>

theme/colored/talk-bordered.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="16"
+   width="16"
+   version="1.1"
+   viewBox="0 0 16 16"
+   id="svg4"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <path
+     fill="#ffffff"
+     d="M 7.9992,0.999 A 6.9993,6.9994 0 0 0 1,7.9986 6.9993,6.9994 0 0 0 7.9992,14.998 6.9993,6.9994 0 0 0 11.63,13.974 c 0.86024,0.34184 2.7871,1.356 3.2457,0.91794 0.47922,-0.45765 -0.56261,-2.6116 -0.81238,-3.412 a 6.9993,6.9994 0 0 0 0.935,-3.4814 6.9993,6.9994 0 0 0 -6.9991,-6.9993 z M 8,3.6601 A 4.34,4.3401 0 0 1 12.34,8.0002 4.34,4.3401 0 0 1 8,12.34 4.34,4.3401 0 0 1 3.66,8.0002 4.34,4.3401 0 0 1 8,3.6601 Z"
+     id="path2-8"
+     style="stroke:#ffffff;stroke-opacity:1;stroke-width:2;stroke-miterlimit:4;stroke-dasharray:none;paint-order:normal" />
+  <path
+     fill="#000000"
+     d="M 7.9992,0.999 A 6.9993,6.9994 0 0 0 1,7.9985999 6.9993,6.9994 0 0 0 7.9992,14.998 6.9993,6.9994 0 0 0 11.63,13.974 c 0.86024,0.34184 2.7871,1.356 3.2457,0.91794 0.47922,-0.45765 -0.56261,-2.6116 -0.81238,-3.412 A 6.9993,6.9994 0 0 0 14.99832,7.9985399 6.9993,6.9994 0 0 0 7.99922,0.99924 Z M 8,3.6601 A 4.34,4.3401 0 0 1 12.34,8.0001999 4.34,4.3401 0 0 1 8,12.34 4.34,4.3401 0 0 1 3.66,8.0001999 4.34,4.3401 0 0 1 8,3.6601 Z"
+     id="path886" />
+</svg>