Made the users nice

bzr revid: nicolas.vanhoren@openerp.com-20121127172248-l737z0vebm9c3y0g

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

@@ -6,49 +6,87 @@
     border-left: 1px solid #AEB9BD;
 }
 
+/* button */
+
 .openerp .oe_topbar_imbutton {
     cursor: pointer;
 }
 
 /* search stuff */
 .openerp .oe_im_frame_header {
-  background: #dedede;
-  background: -moz-linear-gradient(#fcfcfc, #dedede);
-  background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
-  border-bottom: 1px solid border-color !important;
-  padding: 5px;
+    position: relative;
+    background: #dedede;
+    background: -moz-linear-gradient(#fcfcfc, #dedede);
+    background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#dedede));
+    border-bottom: 1px solid border-color !important;
+    padding: 5px;
 }
 .openerp .oe_im_frame_header .oe_im_searchbox {
-  width: 168px;
-  padding: 1px 21px 1px 19px;
-  font-size: 13px;
-  -moz-border-radius: 13px;
-  -webkit-border-radius: 13px;
-  border-radius: 13px;
+    width: 168px;
+    padding: 1px 21px 1px 19px;
+    font-size: 13px;
+    -moz-border-radius: 13px;
+    -webkit-border-radius: 13px;
+    border-radius: 13px;
 }
 .openerp .oe_im_frame_header .oe_im_search_icon {
-  position: absolute;
-  color: #888;
-  top: 2px;
-  left: 9px;
-  font-size: 28px;
-  font-family: "entypoRegular" !important;
-  font-weight: 300 !important;
+    position: absolute;
+    color: #888;
+    top: 2px;
+    left: 9px;
+    font-size: 28px;
+    font-family: "entypoRegular" !important;
+    font-weight: 300 !important;
 }
 .openerp .oe_im_frame_header .oe_im_search_clear {
-  display: none;
-  position: absolute;
-  right: 11px;
-  top: 4px;
-  font-size: 26px;
-  color: #b6b6b6;
-  cursor: pointer;
+    display: none;
+    position: absolute;
+    right: 11px;
+    top: 4px;
+    font-size: 26px;
+    color: #b6b6b6;
+    cursor: pointer;
 }
 .openerp .oe_im_frame_header .oe_im_search_clear:hover {
-  color: #888;
+    color: #888;
 }
 
+/* users */
 
+.openerp .oe_im_users {
+    padding-bottom: 38px;
+}
+.openerp .oe_im_user {
+    padding: 2px 6px;
+    cursor: pointer;
+    font-size: 13px;
+    margin-bottom: 3px;
+}
+.openerp .oe_im_user:hover {
+  background: lightGrey;
+}
+.openerp .oe_im_user_clip {
+    display: inline-block;
+    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_user_avatar {
+    width: 26px;
+    height: auto;
+}
+.openerp .oe_im_user_name {
+    width: 162px;
+    line-height: 26px;
+    padding-right: 15px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    position: relative;
+}
 
 .openerp .oe_im_conversation {
     position: fixed;

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

@@ -20,7 +20,10 @@
     </t>
     <t t-name="ImUser">
         <div class="oe_im_user">
-            <t t-esc="widget.user_rec.name"/>
+            <span class="oe_im_user_clip">
+                <img t-att-src='_s + "/web_im/static/src/img/avatar/avatar.jpeg"' class="oe_im_user_avatar"/>
+            </span>
+            <span class="oe_im_user_name"><t t-esc="widget.user_rec.name"/></span>
         </div>
     </t>
     <t t-name="Conversation">