Show own avatar

css/converse.css

@@ -4993,6 +4993,8 @@ body.reset {
     display: block;
     text-align: center;
     width: 100%; }
+  #conversejs .avatar {
+    border-radius: 25%; }
   #conversejs .activated {
     display: block !important; }
   #conversejs .pure-form-message {
@@ -5127,7 +5129,6 @@ body.reset {
   #converse-embedded-chat .chat-head .avatar,
   #conversejs .chat-head .avatar {
     margin-right: 0.5em;
-    border-radius: 25%;
     float: left; }
   #converse-embedded-chat .chat-head .chatbox-buttons,
   #conversejs .chat-head .chatbox-buttons {

css/inverse.css

@@ -4993,6 +4993,8 @@ body.reset {
     display: block;
     text-align: center;
     width: 100%; }
+  #conversejs .avatar {
+    border-radius: 25%; }
   #conversejs .activated {
     display: block !important; }
   #conversejs .pure-form-message {
@@ -5183,7 +5185,6 @@ body {
   #converse-embedded-chat .chat-head .avatar,
   #conversejs .chat-head .avatar {
     margin-right: 0.5em;
-    border-radius: 25%;
     float: left; }
   #converse-embedded-chat .chat-head .chatbox-buttons,
   #conversejs .chat-head .chatbox-buttons {

sass/_chatbox.scss

@@ -33,7 +33,6 @@
 
         .avatar {
             margin-right: 0.5em;
-            border-radius: 25%;
             float: left;
         }
 

sass/_core.scss

@@ -245,12 +245,18 @@ body.reset {
         width: 100%;
     }
 
+    .avatar {
+        border-radius: 25%;
+    }
+
     .activated {
         display: block !important;
     }
+
     .pure-form-message {
         padding: 0.5em 0;
     }
+
     .button-primary {
         color: white;
         background-color: $primary-color;

src/converse-profile.js

@@ -46,9 +46,7 @@
                 },
 
                 initialize () {
-                    this.model.on("change:status", this.render, this);
-                    this.model.on("change:status_message", this.render, this);
-                    this.model.on("update-status-ui", this.render, this);
+                    this.model.on("change", this.render, this);
                 },
 
                 toHTML () {

src/converse-vcard.js

@@ -158,7 +158,7 @@
                 }
             });
 
-            _converse.on('chatBoxInitialized', function (chatbox) {
+            _converse.on('chatBoxInitialized', (chatbox) => {
                 if (!_converse.use_vcards || chatbox.model.get('type') === 'headline') {
                     return;
                 }
@@ -183,17 +183,15 @@
 
             _converse.on('statusInitialized', function fetchOwnVCard () {
                 if (_.isNil(_converse.xmppstatus.get('fullname'))) {
-                    _converse.api.disco.supports(Strophe.NS.VCARD, _converse.domain).then(
-                        (result) => {
+                    _converse.api.disco.supports(Strophe.NS.VCARD, _converse.domain)
+                        .then((result) => {
                             if (result.supported) {
-                                _converse.api.vcard.get(_converse.bare_jid).then((vcard) => {
-                                    _converse.xmppstatus.save({'fullname': vcard.fullname || ''});
-                                });
-                            }
-                        }
-                    ).catch((msg) => {
-                        _converse.log(msg, Strophe.LogLevel.FATAL);
-                    });
+                                _converse.api.vcard.get(_converse.bare_jid)
+                                    .then((vcard) => {
+                                        _converse.xmppstatus.save(vcard);
+                                    });
+                            }})
+                        .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
                 }
             });
 

src/templates/profile_view.html

 <div class="userinfo">
 <div class="d-flex">
-    <canvas height="20" width="20" class="avatar align-self-center"></canvas>
+    <img alt="User Avatar" class="avatar align-self-center" height="40px" width="40px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
     <span class="username w-100 align-self-center">{{{o.fullname}}}</span>
-    <a class="chatbox-btn fa fa-vcard align-self-center" title="{{{o.title_your_profile}}}" data-toggle="modal" data-target="#userProfileModal"></a>
+    <!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="{{{o.title_your_profile}}}" data-toggle="modal" data-target="#userProfileModal"></a> -->
     <a class="chatbox-btn fa fa-cog align-self-center" title="{{{o.title_change_status}}}" data-toggle="modal" data-target="#settingsModal"></a>
 </div>
 <div class="d-flex xmpp-status">