[IMP] im_livechat: style of chat and kanban view of livechat channels

- restyle the search field of livechat, more space between contacts, etc.
- kanban view should fit the style of new kanban views
- new images for status

6 files changed, 52 insertions, 49 deletions

diff --git a/addons/im_chat/static/src/css/im_chat_backend.css b/addons/im_chat/static/src/css/im_chat_backend.css
index d9f7a70b955..d01577eb56a 100644
--- a/addons/im_chat/static/src/css/im_chat_backend.css
+++ b/addons/im_chat/static/src/css/im_chat_backend.css
@@ -1,10 +1,12 @@
-
 .oe_im {
     position: fixed;
-    background-color: #E8EBEF;
-    width: 220px;
+    background-color: #eaeaea;
+    width: 250px;
     border-left: 1px solid #AEB9BD;
     z-index: 500;
+    -webkit-box-shadow: -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
+    -moz-box-shadow:    -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
+    box-shadow:         -2px 0px 5px 0px rgba(50, 50, 50, 0.25);
 }
 
 @media print {
@@ -24,25 +26,26 @@
 /* search stuff */
 .oe_im_frame_header {
     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;
+    padding: 16px;
 }
 .oe_im_frame_header .oe_im_searchbox {
-    width: 168px;
+    width: 200px;
     padding: 1px 21px 1px 19px;
     font-size: 13px;
-    -moz-border-radius: 13px;
-    -webkit-border-radius: 13px;
-    border-radius: 13px;
+    border: none;
+    border-bottom: 1px solid #c6c6c6;
+    background: none;
+    margin-left: 20px;
+    height: 38px;
+}
+.oe_im_frame_header .oe_im_searchbox:focus {
+    outline: none;
 }
 .oe_im_frame_header .oe_im_search_icon {
     position: absolute;
     color: #888;
-    top: 9px;
-    left: 10px;
+    top: 28px;
+    left: 8px;
     font-size: 16px;    
     font-weight: 300 !important;
 }
@@ -68,10 +71,10 @@
 }
 .oe_im_user {
     position: relative;
-    padding: 2px 6px;
+    padding: 2px 8px;
     cursor: pointer;
     font-size: 13px;
-    margin-bottom: 3px;
+    margin-bottom: 10px;
 }
 .oe_im_user:hover {
   background: lightGrey;
@@ -108,4 +111,4 @@
     height: 11px;
     vertical-align: middle;
     border: 0;
-}
\ No newline at end of file
+}
diff --git a/addons/im_chat/static/src/css/im_chat_common.css b/addons/im_chat/static/src/css/im_chat_common.css
index 1ee017e00e6..1ad2981eb41 100644
--- a/addons/im_chat/static/src/css/im_chat_common.css
+++ b/addons/im_chat/static/src/css/im_chat_common.css
@@ -6,7 +6,6 @@
   color: #4c4c4c;
   font-size: 13px;
   background: white;
-  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
 }
 
 /* button */
@@ -39,16 +38,23 @@
     overflow: hidden;
     margin-bottom: 5px;
     margin-right: 6px;
-    background: rgba(60, 60, 60, 0.8);
-    -moz-border-radius: 3px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    -moz-box-shadow: 0 0 3px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.3);
-    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
-    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
+    background-color: #fff;
+    border: 1px solid #DEDEDE;
     width: 240px;
     z-index:500;
 }
+@media screen and (max-width:360px) {
+    .oe_im_chatview {
+        width: 100%;
+        margin-right: 0;
+    }
+    .oe_im_chatview .oe_im_chatview_content {
+        width: 100% !important;
+    }
+    .oe_im_chatview .oe_im_chatview_input {
+        width: 100% !important;
+    }
+}
 .oe_im_chatview .oe_im_chatview_disconnected {
     display:none;
     z-index: 100;
diff --git a/addons/im_chat/static/src/img/green.png b/addons/im_chat/static/src/img/green.png
index 01fb373c251..0700a5ef71b 100644
--- a/addons/im_chat/static/src/img/green.png
+++ b/addons/im_chat/static/src/img/green.png
diff --git a/addons/im_chat/static/src/img/yellow.png b/addons/im_chat/static/src/img/yellow.png
index 4ee90117570..726570e518f 100644
--- a/addons/im_chat/static/src/img/yellow.png
+++ b/addons/im_chat/static/src/img/yellow.png
diff --git a/addons/im_chat/static/src/xml/im_chat.xml b/addons/im_chat/static/src/xml/im_chat.xml
index 80447cc38d0..eb479863b3e 100644
--- a/addons/im_chat/static/src/xml/im_chat.xml
+++ b/addons/im_chat/static/src/xml/im_chat.xml
@@ -96,7 +96,7 @@
 <t t-name="im_chat.ImTopButton">
     <li t-att-title='_t("Display Instant Messaging")'>
         <a href="#">
-              <i id="oe_topbar_imbutton_icon" class="fa fa-comments-o"/>
+              <i id="oe_topbar_imbutton_icon" class="fa fa-comments"/>
         </a>
     </li>
 </t>
diff --git a/addons/im_livechat/views/im_livechat_channel_views.xml b/addons/im_livechat/views/im_livechat_channel_views.xml
index 90fd6e012fd..02f2a889133 100644
--- a/addons/im_livechat/views/im_livechat_channel_views.xml
+++ b/addons/im_livechat/views/im_livechat_channel_views.xml
@@ -32,30 +32,24 @@
                     <field name="nbr_session"/>
                     <templates>
                         <t t-name="kanban-box">
-                            <div class="oe_kanban_card oe_kanban_global_click">
-                                <div class="oe_module_vignette row">
-                                    <div class="col-md-4">
-                                        <div class="oe_module_icon">
-                                            <img t-att-src="kanban_image('im_livechat.channel', 'image_medium', record.id.value)" class="img-responsive"/>
-                                        </div>
+                            <div class="o_kanban_two_column oe_kanban_global_click">
+                                <div class="o_kanban_image">
+                                    <img t-att-src="kanban_image('im_livechat.channel', 'image_medium', record.id.value)" class="img-responsive"/>
+                                </div>
+                                <div class="oe_kanban_details">
+                                    <strong><field name="name"/></strong>
+                                    <div>
+                                        <p>
+                                            <i class="fa fa-user"></i>
+                                            <t t-esc="(record.user_ids.raw_value || []).length"/> Operators
+                                            <br/>
+                                            <i class="fa fa-comments"></i>
+                                            <t t-esc="record.nbr_session.raw_value"/> Sessions
+                                        </p>
                                     </div>
-                                    <div class="col-md-7">
-                                        <h3><field name="name"/></h3>
-                                        <div>
-                                            <p>
-                                                <i class="fa fa-user">
-                                                    <t t-esc="(record.user_ids.raw_value || []).length"/> Operators
-                                                </i>
-                                                <br/>
-                                                <i class="fa fa-comments">
-                                                    <t t-esc="record.nbr_session.raw_value"/> Sessions
-                                                </i>
-                                            </p>
-                                            <div style="margin-top:5px;">
-                                                <button t-if="record.are_you_inside.raw_value" name="action_quit" type="object" class="btn btn-default btn-xs">Quit</button>
-                                                <button t-if="! record.are_you_inside.raw_value" name="action_join" type="object" class="btn btn-info btn-xs">Join</button>
-                                            </div>
-                                        </div>
+                                    <div class="o_kanban_button">
+                                        <button t-if="record.are_you_inside.raw_value" name="action_quit" type="object" class="btn btn-sm btn-primary">Quit</button>
+                                        <button t-if="!record.are_you_inside.raw_value" name="action_join" type="object" class="btn btn-sm btn-primary">Join</button>
                                     </div>
                                 </div>
                             </div>