Added style to bubble

bzr revid: nicolas.vanhoren@openerp.com-20121130141646-695rr2zjfkniqrrx

addons/web_im/static/src/css/im.css

@@ -103,11 +103,9 @@
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
     width: 240px;
 }
-
 .openerp .oe_im_chatview .oe_im_chatview_disconnected {
     display:none;
 }
-
 .openerp .oe_im_chatview .oe_im_chatview_header {
     padding: 3px 6px 2px;
     background: #DEDEDE;
@@ -119,7 +117,6 @@
     border-bottom: 1px solid #AEB9BD;
     cursor: pointer;
 }
-
 .openerp .oe_im_chatview .oe_im_chatview_close {
     padding: 0;
     cursor: pointer;
@@ -134,12 +131,10 @@
     text-shadow: 0 1px 0 white;
     opacity: 0.2;
 }
-
 .openerp .oe_im_chatview .oe_im_chatview_content {
     overflow: auto;
     height: 287px;
 }
-
 .openerp .oe_im_chatview .oe_im_chatview_footer {
     position: relative;
     padding: 3px;
@@ -151,7 +146,6 @@
     -webkit-border-radius: 0 0 3px 3px;
     border-radius: 0 0 3px 3px;
 }
-
 .openerp .oe_im_chatview .oe_im_chatview_input {
     width: 222px;
     font-family: Lato, Helvetica, sans-serif;
@@ -166,3 +160,56 @@
     -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
     box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
 }
+.openerp .oe_im_chatview .oe_im_chatview_bubble {
+    background: white;
+    padding: 3px;
+    margin: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+}
+.openerp .oe_im_chatview .oe_im_chatview_clip {
+    position: relative;
+    float: left;
+    width: 26px;
+    height: 26px;
+    margin-right: 4px;
+    -moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.25);
+    -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.25);
+}
+.openerp .oe_im_chatview .oe_im_chatview_avatar {
+    float: left;
+    width: 26px;
+    height: auto;
+    clip: rect(0, 26px, 26px, 0);
+    max-width: 100%;
+    width: auto 9;
+    height: auto;
+    vertical-align: middle;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+}
+.openerp .oe_im_chatview .oe_im_chatview_time {
+    text-align: right;
+    line-height: 13px;
+    font-size: 11px;
+    color: #999;
+}
+.openerp .oe_im_chatview .oe_im_chatview_from {
+    margin: 0 0 2px 0;
+    line-height: 14px;
+    font-weight: bold;
+    font-size: 12px;
+    width: 154px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    color: #3A87AD;
+}
+.openerp .oe_im_chatview .oe_im_chatview_bubble_list {
+}
+.openerp .oe_im_chatview .oe_im_chatview_bubble_item {
+    margin: 0 0 2px 30px;
+    line-height: 14px;
+}

addons/web_im/static/src/js/im.js

@@ -4,6 +4,10 @@ openerp.web_im = function(instance) {
     var USERS_LIMIT = 20;
     var ERROR_DELAY = 5000;
 
+    var _t = instance.web._t,
+       _lt = instance.web._lt;
+    var QWeb = instance.web.qweb;
+
     instance.web.UserMenu.include({
         do_update: function(){
             var self = this;
@@ -207,7 +211,7 @@ openerp.web_im = function(instance) {
             this.$el.css("right", this.get("right_position"));
         },
         received_message: function(message) {
-            this.$(".oe_im_chatview_content").append($("<div>").text("Him: " + message.message));
+            this._add_bubble("Him", [message.message]);
         },
         send_message: function(e) {
             if(e && e.which !== 13) {
@@ -215,10 +219,15 @@ openerp.web_im = function(instance) {
             }
             var mes = this.$("input").val();
             this.$("input").val("");
-            this.$(".oe_im_chatview_content").append($("<div>").text("Me: " + mes));
+            this._add_bubble("Me", [mes]);
             var model = new instance.web.Model("im.message");
             model.call("post", [mes, this.user_rec.id], {context: new instance.web.CompoundContext()});
         },
+        _add_bubble: function(name, items) {
+            var date = new Date().toString(Date.CultureInfo.formatPatterns.shortDate + " " + Date.CultureInfo.formatPatterns.shortTime);
+            var bubble = QWeb.render("Conversation.bubble", {"items": items, "name": name, "time": date});
+            this.$(".oe_im_chatview_content").append($(bubble));
+        },
         destroy: function() {
             this.trigger("destroyed");
             return this._super();

addons/web_im/static/src/xml/im.xml

@@ -41,4 +41,18 @@
             </div>
         </div>
     </t>
+    <t t-name="Conversation.bubble">
+        <div class="oe_im_chatview_bubble">
+            <div class="oe_im_chatview_clip">
+                <img class="oe_im_chatview_avatar" t-att-src='_s + "/web_im/static/src/img/avatar/avatar.jpeg"'/>
+            </div>
+            <div class="oe_im_chatview_from"><t t-esc="name"/></div>
+            <div class="oe_im_chatview_bubble_list">
+                <t t-foreach="items" t-as="item">
+                    <div class="oe_im_chatview_bubble_item"><t t-esc="item"/></div>
+                </t>
+            </div>
+            <div class="oe_im_chatview_time"><t t-esc="time"/></div>
+        </div>
+    </t>
 </templates>