Add avatars in the user list

customize.dist/src/less/toolbar.less

@@ -104,6 +104,43 @@ body .userlist-drawer {
             background: rgba(0,0,0,0.1);
             margin: 2px 0;
             font-size: 16px;
+            display: inline-flex;
+            align-items: center;
+            &.clickable {
+                cursor: pointer;
+                &:hover {
+                    background-color: rgba(0,0,0,0.3);
+                }
+            }
+            .default, media-tag {
+                display: inline-flex;
+                width: 50px;
+                height: 50px;
+                justify-content: center;
+                align-items: center;
+                margin-right: 5px;
+                border-radius: 10px / 6px;
+                overflow: hidden;
+                border: 1px solid black;
+                box-sizing: content-box;
+            }
+            .default {
+                .unselectable();
+                background: white;
+                color: black;
+                font-size: 40px;
+            }
+            media-tag {
+                max-height: 50px;
+                max-width: 50px;
+                img {
+                    min-width: 100%;
+                    min-height: 100%;
+                    max-width: none;
+                    max-height: none !important; // To override 'media-tag img' in slide.less
+                    flex-shrink: 0;
+                }
+            }
         }
     }
 }
@@ -850,8 +887,10 @@ body .cryptpad-toolbar {
     }
 }
 .cryptpad-toolbar-rightside {
-    height: 32px;
+    min-height: 32px;
+    overflow: hidden;
     &:empty {
+        min-height: 0;
         height: 0;
     }
     text-align: right;

customize.dist/translations/messages.fr.js

@@ -240,6 +240,16 @@ define(function () {
     out.canvas_opacityLabel = "opacité: {0}";
     out.canvas_widthLabel = "taille: {0}";
 
+    // Profile
+    out.profile_urlPlaceholder = 'URL';
+    out.profile_avatar = "Avatar";
+    out.profile_upload = " Importer un nouvel avatar";
+    out.profile_error = "Erreur lors de la création du profil : {0}";
+    out.profile_register = "Vous devez vous inscrire pour pouvoir créer un profil !";
+    out.profile_create = "Créer un profil";
+    out.profile_description = "Description";
+    out.profile_fieldSaved = 'Nouvelle valeur enregistrée: {0}';
+
     // File manager
 
     out.fm_rootName = "Documents";

customize.dist/translations/messages.js

@@ -242,6 +242,15 @@ define(function () {
     out.canvas_opacityLabel = "opacity: {0}";
     out.canvas_widthLabel = "Width: {0}";
 
+    // Profile
+    out.profile_urlPlaceholder = 'URL';
+    out.profile_avatar = "Avatar";
+    out.profile_upload = " Upload a new avatar";
+    out.profile_error = "Error while creating your profile: {0}";
+    out.profile_register = "You have to sign up to create a profile!";
+    out.profile_create = "Create a profile";
+    out.profile_description = "Description";
+    out.profile_fieldSaved = 'New value saved: {0}';
 
     // File manager
 

www/common/common-userlist.js

@@ -51,6 +51,8 @@ define(function () {
             myData[exp.myNetfluxId] = {
                 name: exp.myUserName,
                 uid: Cryptpad.getUid(),
+                avatar: Cryptpad.getAvatarUrl(),
+                profile: Cryptpad.getProfileUrl()
             };
             addToUserData(myData);
             Cryptpad.setAttribute('username', exp.myUserName, function (err) {
@@ -78,6 +80,8 @@ define(function () {
                     myData[exp.myNetfluxId] = {
                         name: "",
                         uid: Cryptpad.getUid(),
+                        avatar: Cryptpad.getAvatarUrl(),
+                        profile: Cryptpad.getProfileUrl()
                     };
                     addToUserData(myData);
                     onLocal();

www/common/cryptpad-common.js

@@ -146,6 +146,16 @@ define([
         }
         return;
     };
+    common.getProfileUrl = function () {
+        if (store && store.getProfile()) {
+            return store.getProfile().view;
+        }
+    };
+    common.getAvatarUrl = function () {
+        if (store && store.getProfile()) {
+            return store.getProfile().avatar;
+        }
+    };
 
     var feedback = common.feedback = function (action, force) {
         if (force !== true) {
@@ -1168,10 +1178,16 @@ define([
         'image/jpg',
         'image/gif',
     ];
-    common.displayAvatar = function ($container, href) {
+    common.displayAvatar = function ($container, href, name, cb) {
         var MutationObserver = window.MutationObserver;
-        $container.html('');
+        var displayDefault = function () {
-        if (href) {
+            var text = name.trim().length ? name.trim().slice(0,1) : '?';
+            var $avatar = $('<span>', {'class': 'default'}).text(text);
+            $container.append($avatar);
+            if (cb) { cb(); }
+        };
+
+        if (!href) { return void displayDefault(); }
         var parsed = common.parsePadUrl(href);
         var secret = common.getSecrets('file', parsed.hash);
         if (secret.keys && secret.channel) {
@@ -1179,9 +1195,12 @@ define([
             var hexFileName = common.base64ToHex(secret.channel);
             var src = common.getBlobPathFromHex(hexFileName);
             common.getFileSize(href, function (e, data) {
-                    if (e) { return void console.error(e); }
+                if (e) {
-                    if (typeof data !== "number") { return; }
+                    displayDefault();
-                    if (common.bytesToMegabytes(data) > 0.5) { return; }
+                    return void console.error(e);
+                }
+                if (typeof data !== "number") { return void displayDefault(); }
+                if (common.bytesToMegabytes(data) > 0.5) { return void displayDefault(); }
                 var $img = $('<media-tag>').appendTo($container);
                 $img.attr('src', src);
                 $img.attr('data-crypto-key', 'cryptpad:' + cryptKey);
@@ -1195,8 +1214,7 @@ define([
                                 if (mutation.addedNodes.length > 1 ||
                                     mutation.addedNodes[0].nodeName !== 'IMG') {
                                     $img.remove();
-                                        return;
+                                    return void displayDefault();
-                                        //TODO display default avatar
                                 }
                                 var $image = $img.find('img');
                                 var onLoad = function () {
@@ -1205,10 +1223,12 @@ define([
                                     if (w>h) {
                                         $image.css('max-height', '100%');
                                         $img.css('flex-direction', 'row');
+                                        if (cb) { cb($img); }
                                         return;
                                     }
                                     $image.css('max-width', '100%');
                                     $img.css('flex-direction', 'column');
+                                    if (cb) { cb($img); }
                                 };
                                 if ($image[0].complete) { onLoad(); }
                                 $image.on('load', onLoad);
@@ -1223,7 +1243,6 @@ define([
                 });
             });
         }
-        }
     };
 
     // Create a button with a dropdown menu

www/common/fsStore.js

@@ -211,6 +211,10 @@ define([
                 if (typeof(n) !== "string") { return; }
                 Cryptpad.changeDisplayName(n);
             });
+            proxy.on('change', ['profile'], function () {
+                // Trigger userlist update when the avatar has changed
+                Cryptpad.changeDisplayName(proxy[Cryptpad.displayNameKey]);
+            });
             proxy.on('change', [tokenKey], function () {
                 console.log('wut');
                 var localToken = tryParsing(localStorage.getItem(tokenKey));

www/common/toolbar2.js

@@ -149,6 +149,7 @@ define([
             return $.inArray(i, b) > -1;
         });
     };
+    var avatars = {};
     var updateUserList = function (toolbar, config) {
         // Make sure the elements are displayed
         var $userButtons = toolbar.userlist;
@@ -189,7 +190,24 @@ define([
         // Editors
         editUsersNames.forEach(function (data) {
             var name = data.name || Messages.anonymous;
-            var $span = $('<span>', {'title': name}).text(name);
+            var $span = $('<span>', {'title': name});
+            if (data.profile) {
+                $span.addClass('clickable');
+                $span.click(function () {
+                    window.open('/profile/#' + data.profile);
+                });
+            }
+            if (data.avatar && avatars[data.avatar]) {
+                $span.append(avatars[data.avatar]);
+                $span.append(name);
+            } else {
+                Cryptpad.displayAvatar($span, data.avatar, name, function ($img) {
+                    if (data.avatar && $img) {
+                        avatars[data.avatar] = $img[0].outerHTML;
+                    }
+                    $span.append(name);
+                });
+            }
             $span.data('uid', data.uid);
             $editUsersList.append($span);
         });
@@ -197,9 +215,9 @@ define([
 
         // Viewers
         if (numberOfViewUsers > 0) {
-            var viewText = '<span class="viewer">';
+            var viewText = '<div class="viewer">';
             var viewerText = numberOfViewUsers !== 1 ? Messages.viewers : Messages.viewer;
-            viewText += numberOfViewUsers + ' ' + viewerText + '</span>';
+            viewText += numberOfViewUsers + ' ' + viewerText + '</div>';
             $editUsers.append(viewText);
         }
 

www/profile/main.js

@@ -105,7 +105,7 @@ define([
                     if (err) { return void console.error(err); }
                     Cryptpad.whenRealtimeSyncs(realtime, function () {
                         lastVal = newVal;
-                        Cryptpad.log('TODO: '+name+' saved');
+                        Cryptpad.log(Messages._getKey('profile_fieldSaved', [newVal]));
                         editing = false;
                     });
                 });
@@ -196,7 +196,7 @@ define([
             cb();
         };
         var rt = APP.lm.realtime;
-        var placeholder = "URL"; //XXX
+        var placeholder = Messages.profile_urlPlaceholder;
         createEditableInput($block, LINK_ID, placeholder, getValue, setValue, rt);
     };
 
@@ -209,7 +209,7 @@ define([
             if (!APP.lm.proxy.avatar) {
                 $('<img>', {
                     src: '/customize/images/avatar.png',
-                    title: 'Avatar', // XXX
+                    title: Messages.profile_avatar,
                     alt: 'Avatar'
                 }).appendTo($span);
                 return;
@@ -218,21 +218,20 @@ define([
 
             if (APP.readOnly) { return; }
 
-            var $delButton = $('<button>', {'class': 'delete btn btn-danger fa fa-times'}); //XXX
+            var $delButton = $('<button>', {
+                'class': 'delete btn btn-danger fa fa-times',
+                title: Messages.fc_delete
+            });
             $span.append($delButton);
             $delButton.click(function () {
-                console.log('clicked');
                 var oldChanId = Cryptpad.hrefToHexChannelId(APP.lm.proxy.avatar);
                 Cryptpad.unpinPads([oldChanId], function (e) {
                     if (e) { Cryptpad.log(e); }
-                    console.log('unpinned');
                     delete APP.lm.proxy.avatar;
                     delete Cryptpad.getProxy().profile.avatar;
                     Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
-                        console.log('synced1');
                         var driveRt = Cryptpad.getStore().getProxy().info.realtime;
                         Cryptpad.whenRealtimeSyncs(driveRt, function () {
-                            console.log('synced2');
                             displayAvatar();
                         });
                     });
@@ -258,6 +257,7 @@ define([
                         Cryptpad.whenRealtimeSyncs(APP.lm.realtime, function () {
                             var driveRt = Cryptpad.getStore().getProxy().info.realtime;
                             Cryptpad.whenRealtimeSyncs(driveRt, function () {
+                                Cryptpad.changeDisplayName();
                                 displayAvatar();
                             });
                         });
@@ -285,7 +285,7 @@ define([
             accept: ".gif,.jpg,.jpeg,.png"
         };
         var $upButton = Cryptpad.createButton('upload', false, data);
-        $upButton.text(" Upload a new avatar");
+        $upButton.text(Messages.profile_upload);
         $upButton.prepend($('<span>', {'class': 'fa fa-upload'}));
         $block.append($upButton);
     };
@@ -300,6 +300,7 @@ define([
             $div.html(val);
             return;
         }
+        $('<h3>').text(Messages.profile_description).insertBefore($block);
 
         var $ok = $('<span>', {'class': 'ok fa fa-check', title: Messages.saved}).appendTo($block);
         var $spinner = $('<span>', {'class': 'spin fa fa-spinner fa-pulse'}).appendTo($block);
@@ -388,17 +389,18 @@ define([
                     if (e === 'E_OVER_LIMIT') {
                         Cryptpad.alert(Messages.pinLimitNotPinned, null, true);
                     }
-                    return void Cryptpad.log('Error while creating your profile: ' + e); // XXX
+                    return void Cryptpad.log(Messages._getKey('profile_error', [e]));
                 }
                 obj.profile.edit = Cryptpad.getEditHashFromKeys(channel, secret.keys);
                 obj.profile.view = Cryptpad.getViewHashFromKeys(channel, secret.keys);
                 obj.profile.name = APP.rt.proxy[Cryptpad.displayNameKey] || '';
+                Cryptpad.changeDisplayName();
                 andThen(obj.profile.edit);
             });
         };
 
-        if (!Cryptpad.isLoggedIn()) { // XXX
+        if (!Cryptpad.isLoggedIn()) {
-            var $p = $('<p>').text('TODO: You have to register to create a profile');
+            var $p = $('<p>').text(Messages.error_register);
             var $a = $('<a>', {
                 href: '/register/'
             });
@@ -411,7 +413,7 @@ define([
         }
         var $create = $('<div>', {id: CREATE_ID});
         var $button = $('<button>', {'class': 'btn btn-success'});
-        $button.text('TODO: create a profile?').click(todo).appendTo($create); // XXX
+        $button.text(Messages.profile_create).click(todo).appendTo($create);
         APP.$container.append($create);
     };