Add a button to refresh a contact's vcard

css/converse.css

@@ -7005,7 +7005,7 @@ body.reset {
     color: #fff; }
     #conversejs .btn .fa {
       color: #fff;
-      padding-right: 0.5em; }
+      margin-right: 0.5em; }
   #conversejs .no-text-select {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -7299,6 +7299,8 @@ body.reset {
   #conversejs .chat-head.chat-head-chatbox {
     background-color: #3AA569; }
   #conversejs .chat-head .avatar {
+    height: 36px;
+    width: 36px;
     margin-right: 0.5em; }
   #conversejs .chat-head .chatbox-buttons {
     flex-direction: row-reverse;

css/inverse.css

@@ -7005,7 +7005,7 @@ body.reset {
     color: #fff; }
     #conversejs .btn .fa {
       color: #fff;
-      padding-right: 0.5em; }
+      margin-right: 0.5em; }
   #conversejs .no-text-select {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -7350,6 +7350,8 @@ body {
   #conversejs .chat-head.chat-head-chatbox {
     background-color: #3AA569; }
   #conversejs .chat-head .avatar {
+    height: 36px;
+    width: 36px;
     margin-right: 0.5em; }
   #conversejs .chat-head .chatbox-buttons {
     flex-direction: row-reverse;

sass/_chatbox.scss

@@ -48,6 +48,8 @@
         }
 
         .avatar {
+            height: 36px;
+            width: 36px;
             margin-right: 0.5em;
         }
 

sass/_core.scss

@@ -252,7 +252,7 @@ body.reset {
         color: #fff;
         .fa {
             color: #fff;
-            padding-right: 0.5em;
+            margin-right: 0.5em;
         }
     }
 

src/converse-chatview.js

@@ -237,7 +237,8 @@
             _converse.UserDetailsModal = _converse.BootstrapModal.extend({
 
                 events: { 
-                    'click button.remove-contact': 'removeContact'
+                    'click button.remove-contact': 'removeContact',
+                    'click button.refresh-contact': 'refreshContact'
                 },
 
                 initialize () {
@@ -260,6 +261,7 @@
                         'label_jid': __('Jabber ID'),
                         'label_nickname': __('Nickname'),
                         'label_remove': __('Remove as contact'),
+                        'label_refresh': __('Refresh'),
                         'label_role': __('Role'),
                         'label_url': __('URL')
                     }));
@@ -276,6 +278,15 @@
                     }
                 },
 
+                refreshContact (ev) {
+                    if (ev && ev.preventDefault) { ev.preventDefault(); }
+                    const refresh_icon = this.el.querySelector('.fa-refresh');
+                    u.addClass('fa-spin', refresh_icon);
+                    _converse.api.vcard.update(this.model.contact.vcard, true)
+                        .then(() => u.removeClass('fa-spin', refresh_icon))
+                        .catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
+                },
+
                 removeContact (ev) {
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
                     if (!_converse.allow_contact_removal) { return; }

src/templates/user_details_modal.html

@@ -30,8 +30,9 @@
             </div>
             <div class="modal-footer">
                 {[ if (o.allow_contact_removal && o.is_roster_contact) { ]}
-                    <button type="button" class="btn btn-danger remove-contact" data-dismiss="modal"><i class="fa fa-trash"> </i>{{{o.label_remove}}}</button>
+                    <button type="button" class="btn btn-danger remove-contact"><i class="fa fa-trash"> </i>{{{o.label_remove}}}</button>
                 {[ } ]}
+                <button type="button" class="btn btn-info refresh-contact"><i class="fa fa-refresh"> </i>{{{o.label_refresh}}}</button>
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">{{{o.label_close}}}</button>
             </div>
         </div>