Initial work on rendering VCard info in chat box

converse.js

@@ -1207,6 +1207,7 @@
             events: {
                 'click .close-chatbox-button': 'close',
                 'click .toggle-chatbox-button': 'minimize',
+                'click .view-vcard-button': 'renderVCard',
                 'keypress textarea.chat-textarea': 'keyPressed',
                 'click .toggle-smiley': 'toggleEmoticonMenu',
                 'click .toggle-smiley ul li': 'insertEmoticon',
@@ -1270,6 +1271,33 @@
                 return this.showStatusMessage();
             },
 
+            renderVCard: function () {
+                var $chat_body = this.$el.find('.chat-body');
+                if (this.$el.find('.vcard-info').length) {
+                    return this.returnToChat();
+                }
+                $chat_body.children().addClass('hidden');
+                $chat_body.append(converse.templates.vcard(
+                    _.extend(this.model.toJSON(), {
+                        label_return: __('Return to chat')
+                    })
+                ));
+                $chat_body.find('input[type=button]').on('click', this.returnToChat.bind(this));
+                return this;
+            },
+
+            returnToChat: function (ev) {
+                if (ev && ev.preventDefault) { ev.preventDefault(); }
+                var $chat_body = this.$el.find('.chat-body');
+                this.$el.find('.vcard-info').hide(
+                    function () {
+                        $(this).remove();
+                        $chat_body.children().removeClass('hidden');
+                    }
+                );
+                return this;
+            },
+
             setWidth: function () {
                 // If a custom width is applied (due to drag-resizing),
                 // then we need to set the width of the .chatbox element as well.
@@ -2903,7 +2931,7 @@
                 this.toggleOccupants(null, true);
                 return this;
             },
-			
+
             toggleOccupants: function (ev, preserve_state) {
                 if (ev) {
                     ev.preventDefault();

css/converse.css

@@ -1251,6 +1251,7 @@
       margin: 0;
       width: 100%; } }
   #conversejs .chatbox .box-flyout {
+    background-color: white;
     box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
     height: 450px;
     min-height: 225px;

main.js

@@ -151,7 +151,8 @@ require.config({
         "status_option":            "src/templates/status_option",
         "toggle_chats":             "src/templates/toggle_chats",
         "toolbar":                  "src/templates/toolbar",
-        "trimmed_chat":             "src/templates/trimmed_chat"
+        "trimmed_chat":             "src/templates/trimmed_chat",
+        "vcard":                    "src/templates/vcard"
     },
 
     map: {

sass/_chatbox.scss

@@ -62,6 +62,7 @@
             width: $mobile-chat-width;
         }
         .box-flyout {
+            background-color: white;
             box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
             height: $chat-height;
             min-height: $chat-height/2;

src/templates.js

@@ -49,7 +49,8 @@ define("converse-templates", [
     "tpl!status_option",
     "tpl!toggle_chats",
     "tpl!toolbar",
-    "tpl!trimmed_chat"
+    "tpl!trimmed_chat",
+    "tpl!vcard",
 ], function () {
     return {
         action:                 arguments[0],
@@ -102,6 +103,7 @@ define("converse-templates", [
         status_option:          arguments[47],
         toggle_chats:           arguments[48],
         toolbar:                arguments[49],
-        trimmed_chat:           arguments[50]
+        trimmed_chat:           arguments[50],
+        vcard:                  arguments[51]
     };
 });

src/templates/chatbox.html

@@ -5,7 +5,7 @@
     <div class="chat-head chat-head-chatbox">
         <a class="chatbox-btn close-chatbox-button icon-close" title="{{info_close}}"></a>
         <a class="chatbox-btn toggle-chatbox-button icon-minus" title="{{info_minimize}}"></a>
-        <a class="chatbox-btn toggle-chatbox-button icon-eye" title="{{info_view}}"></a>
+        <a class="chatbox-btn view-vcard-button icon-eye" title="{{info_view}}"></a>
         <div class="chat-title">
             {[ if (url) { ]}
                 <a href="{{url}}" target="_blank" class="user">

src/templates/vcard.html

+<form class="pure-form converse-form vcard-info">
+    <fieldset>
+        <legend>The VCard info gets rendered here</legend>
+        <label>Full name:</label>
+        {{fullname}}
+        <label>URL:</label>
+        {{url}}
+    </fieldset>
+    <fieldset>
+        <input type="button" class="pure-button button-cancel" value="{{label_return}}"/>
+    </fieldset>
+</form>