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('', {
@@ -687,7 +695,14 @@ var Sao = {};
}).click(function(evt) {
evt.preventDefault();
Sao.preferences();
- }).text(preferences.status_bar));
+ }).text(preferences.status_bar)
+ .prepend(jQuery('
', {
+ 'src': avatar_badge_url,
+ 'class': 'img-circle img-badge',
+ })).prepend(jQuery('
', {
+ '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);