Avatar in the user admin button

customize.dist/src/less/mixins.less

@@ -37,3 +37,64 @@
     background: linear-gradient(@start, @end); /* Standard syntax */
 }
 
+.avatar (@width) {
+    &.avatar {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    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: @width;
+        height: @width;
+        justify-content: center;
+        align-items: center;
+        margin-right: 5px;
+        border-radius: @width / 30px;
+        overflow: hidden;
+        box-sizing: content-box;
+    }
+    .default {
+        .unselectable();
+        background: white;
+        color: black;
+        font-size: 40px;
+    }
+    .right-col {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        display: flex;
+        flex-flow: column;
+        .friend {
+            padding: 0;
+        }
+    }
+    .name {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    media-tag {
+        min-height: @width;
+        min-width: @width;
+        max-height: @width;
+        max-width: @width;
+        img {
+            min-width: 100%;
+            min-height: 100%;
+            max-width: none;
+            max-height: none; // To override 'media-tag img' in slide.less
+        }
+    }
+    }
+}

customize.dist/src/less/toolbar.less

@@ -106,56 +106,12 @@ body .userlist-drawer {
         margin: 10px 0;
         margin-bottom: 20px;
         &>span {
-            overflow: hidden;
-            text-overflow: ellipsis;
             padding: 5px;
-            background: rgba(0,0,0,0.1);
             margin: 2px 0;
-            font-size: 16px;
+            background: rgba(0,0,0,0.1);
-            display: inline-flex;
+            .avatar(50px);
-            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;
-            }
-            .name {
-                flex: 1;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            media-tag {
-                min-height: 50px;
-                min-width: 50px;
-                max-height: 50px;
-                max-width: 50px;
-                img {
-                    min-width: 100%;
-                    min-height: 100%;
-                    max-width: none;
-                    max-height: none; // To override 'media-tag img' in slide.less
-                    flex-shrink: 0;
-                }
             }
         }
     }
@@ -856,6 +812,10 @@ body .cryptpad-toolbar {
                     cursor: default;
                     font-size: 32px;
                 }
+                &.avatar {
+                    .avatar(64px);
+                    border: 0;
+                }
             }
         }
         .cryptpad-backup {

www/common/cryptpad-common.js

@@ -1307,29 +1307,33 @@ define([
                             }
                             var $image = $img.find('img');
                             var onLoad = function () {
-                                var w = $image.width();
+                                var img = new Image();
-                                var h = $image.height();
+                                img.src = $image.attr('src');
+                                img.onload = function () {
+                                    var w = img.width;
+                                    var h = img.height;
                                     if (w>h) {
                                         $image.css('max-height', '100%');
-                                    $img.css('flex-direction', 'row');
+                                        $img.css('flex-direction', 'column');
                                         if (cb) { cb($img); }
                                         return;
                                     }
                                     $image.css('max-width', '100%');
-                                $img.css('flex-direction', 'column');
+                                    $img.css('flex-direction', 'row');
                                     if (cb) { cb($img); }
                                 };
+                            };
                             if ($image[0].complete) { onLoad(); }
                             $image.on('load', onLoad);
                         }
                     });
+                });
                 observer.observe($img[0], {
                     attributes: false,
                     childList: true,
                     characterData: false
                 });
             });
-            });
         }
     };
 
@@ -1622,7 +1626,11 @@ define([
             var $avatar = $userAdmin.find('.buttonTitle');
             var url = getStore() ? getStore().getProfile().avatar : undefined;
             $avatar.html('');
-            common.displayAvatar($avatar, url, accountName, function ($img) {});
+            common.displayAvatar($avatar, url, accountName, function ($img) {
+                if ($img) {
+                    $userAdmin.find('button').addClass('avatar');
+                }
+            });
         }
 
         $userAdmin.find('a.logout').click(function () {

www/common/toolbar2.js

@@ -207,7 +207,7 @@ define([
         editUsersNames.forEach(function (data) {
             var name = data.name || Messages.anonymous;
             var $name = $('<span>', {'class': 'name'}).text(name);
-            var $span = $('<span>', {'title': name});
+            var $span = $('<span>', {'title': name, 'class': 'avatar'});
             if (data.profile) {
                 $span.addClass('clickable');
                 $span.click(function () {