From aa3f835c8ce4db3e9a8c4cb578d49c76efa44cb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Sun, 28 Mar 2021 19:20:37 +0200
Subject: [PATCH] Add support for avatar

issue10085
review343561002
---
 src/sao.js   | 17 ++++++++++++++++-
 src/sao.less | 17 ++++++++++++++++-
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/sao.js b/src/sao.js
index 26b7bcd8c0..573f67bd80 100644
--- a/src/sao.js
+++ b/src/sao.js
@@ -679,6 +679,14 @@ var Sao = {};
     };
 
     Sao.user_menu = function(preferences) {
+        var avatar_url = preferences.avatar_url || '';
+        if (avatar_url) {
+            avatar_url += '?s=30';
+        }
+        var avatar_badge_url = preferences.avatar_badge_url || '';
+        if (avatar_badge_url){
+            avatar_badge_url += '?s=15';
+        }
         jQuery('#user-preferences').empty();
         jQuery('#user-favorites').empty();
         jQuery('#user-preferences').append(jQuery('<a/>', {
@@ -687,7 +695,14 @@ var Sao = {};
         }).click(function(evt) {
             evt.preventDefault();
             Sao.preferences();
-        }).text(preferences.status_bar));
+        }).text(preferences.status_bar)
+            .prepend(jQuery('<img/>', {
+                'src': avatar_badge_url,
+                'class': 'img-circle img-badge',
+            })).prepend(jQuery('<img/>', {
+                'src': avatar_url,
+                'class': 'img-circle',
+            })));
         var title = Sao.i18n.gettext("Logout");
         jQuery('#user-logout > a')
             .attr('title', title)
diff --git a/src/sao.less b/src/sao.less
index 1cce554fe6..70c8792526 100644
--- a/src/sao.less
+++ b/src/sao.less
@@ -154,10 +154,25 @@ html[theme="default"] {
 }
 
 #user-preferences > a {
-    max-width: 20em;
+    max-width: 30em;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    > img {
+        margin: -5px 5px;
+        width: 30px;
+
+        &[src=''] {
+            width: 0;
+        }
+
+        &.img-badge {
+            margin-left: -15px;
+            margin-bottom: -25px;
+            width: 15px;
+        }
+    }
 }
 
 .list-group-item-variant(selected; @state-selected-bg; @state-selected-text);