Add link to profile in notifications

customize.dist/src/less2/include/notifications.less

@@ -8,6 +8,7 @@
     @notif-height: 50px;
     .cp-notifications-container {
         max-width: 300px;
+        width: 300px;
         display: flex;
         flex-flow: column;
         & hr {
@@ -16,6 +17,14 @@
         .cp-notification {
             min-height: @notif-height;
             display: flex;
+            .cp-avatar {
+                .avatar_main(30px);
+                padding: 0 5px;
+                cursor: pointer;
+                &:hover {
+                    background-color: rgba(0,0,0,0.1);
+                }
+            }
             .cp-notification-content {
                 flex: 1;
                 align-items: stretch;

www/common/sframe-common-mailbox.js

@@ -1,12 +1,13 @@
 define([
     'jquery',
     '/common/common-util.js',
+    '/common/common-hash.js',
     '/common/common-interface.js',
     '/common/common-ui-elements.js',
     '/common/notifications.js',
     '/common/hyperscript.js',
     '/customize/messages.js',
-], function ($, Util, UI, UIElements, Notifications, h, Messages) {
+], function ($, Util, Hash, UI, UIElements, Notifications, h, Messages) {
     var Mailbox = {};
 
     Mailbox.create = function (Common) {
@@ -53,9 +54,28 @@ define([
         };
         var createElement = mailbox.createElement = function (data) {
             var notif;
+            var avatar;
+            var type = Util.find(data, ['content', 'msg', 'type']);
+            var userData = ['FRIEND_REQUEST'].indexOf(type) !== -1 ? Util.find(data, ['content', 'msg', 'content'])
+                                : Util.find(data, ['content', 'msg', 'content', 'user']);
+            if (userData && typeof(userData) === "object" && userData.profile) {
+                avatar = h('span.cp-avatar');
+                Common.displayAvatar($(avatar), userData.avatar, userData.displayName || userData.name);
+                $(avatar).click(function (e) {
+                    e.stopPropagation();
+                    Common.openURL(Hash.hashToHref(userData.profile, 'profile'));
+                });
+            } else {
+            console.warn(data);
+                
+            }
             notif = h('div.cp-notification', {
                 'data-hash': data.content.hash
-            }, [h('div.cp-notification-content', h('p', formatData(data)))]);
+            }, [
+                avatar,
+                h('div.cp-notification-content',
+                    h('p', formatData(data)))
+            ]);
 
             if (typeof(data.content.getFormatText) === "function") {
                 $(notif).find('.cp-notification-content p').html(data.content.getFormatText());

www/notifications/app-notifications.less

@@ -1,5 +1,6 @@
 @import (reference) '../../customize/src/less2/include/framework.less';
 @import (reference) '../../customize/src/less2/include/sidebar-layout.less';
+@import (reference) '../../customize/src/less2/include/avatar.less';
 
 &.cp-app-notifications {
 
@@ -86,6 +87,14 @@
                         display: block;
                     }
                 }
+                .cp-avatar {
+                    .avatar_main(48px);
+                    padding: 0 10px;
+                    cursor: pointer;
+                    &:hover {
+                        background-color: rgba(0,0,0,0.1);
+                    }
+                }
                 &.cp-app-notification-archived {
                     background-color: #f1f1f1;
                 }