1 files changed, 82 insertions, 4 deletions

diff --git a/addons/mail/static/src/less/chat_window.less b/addons/mail/static/src/less/chat_window.less
index ca2e8ca74f1..a4024c93dc1 100644
--- a/addons/mail/static/src/less/chat_window.less
+++ b/addons/mail/static/src/less/chat_window.less
@@ -1,10 +1,11 @@
 @o-chat-window-bg: white;
+@o-chat-window-width: 300px;
 
 .o_chat_window {
     .o-flex-display();
     .o-flex-flow(column, nowrap);
     position: fixed;
-    width: 300px;
+    width: @o-chat-window-width;
     max-width: 100%;
     height: 400px;
     max-height: 100%;
@@ -15,7 +16,11 @@
     z-index: 2;
 
     @media (max-width: @screen-xs-max) {
-        display:none;
+        width: 100%;
+        height: 100%!important;
+        &.o_folded {
+            display: none;
+        }
     }
 
     .o_chat_header {
@@ -25,26 +30,35 @@
         background-color: @odoo-brand-primary;
         padding: 5px;
 
+        @media (max-width: @screen-xs-max) {
+            height: @navbar-height;
+            .o_chat_title, .o_chat_window_close {
+                font-size: 22px;
+            }
+        }
+
         .o_chat_title {
             cursor: pointer;
             .o-flex(1, 1, auto);
+            .o-text-overflow();
         }
 
         .o_chat_window_close {
             color: white;
             padding: 3px;
+            margin-left: 5px;
             &:hover {
                 background-color: darken(@odoo-brand-primary, 10%);
             }
         }
     }
 
-    .o_chat_content {
+    .o_mail_thread {
         .o-flex(1, 1, auto);
         overflow: auto;
         padding: 5px;
 
-        .o_mail_thread .o_thread_date_separator {
+        .o_thread_date_separator {
             margin-top: 0px;
             margin-bottom: 15px;
             border-color: lightgray;
@@ -67,3 +81,67 @@
         }
     }
 }
+
+.o_chat_window_dropdown {
+    width: auto;
+    height: 28px;
+    color: white;
+    background-color: @odoo-brand-primary;
+    cursor: pointer;
+
+    @media (max-width: @screen-xs-max) {
+        display: none;
+    }
+
+    .o_chat_window_dropdown_toggler {
+        padding: 5px;
+
+        .o_total_unread_counter {
+            .o-position-absolute(-10px, 0, auto, auto);
+            background-color: @odoo-brand-optional;
+            padding: 0 2px;
+            font-size: smaller;
+        }
+    }
+    &.open .o_chat_window_dropdown_toggler .o_total_unread_counter {
+        display: none;
+    }
+
+    > ul {
+        max-width: @o-chat-window-width;
+        padding: 0;
+
+        > li.o_chat_header {
+            font-size: 12px;
+            padding: 3px 5px;
+            &~li.o_chat_header {
+                border-top: 1px solid white;
+            }
+            &:hover {
+                background-color: darken(@odoo-brand-primary, 10%);
+                color: white;
+            }
+        }
+    }
+}
+
+// FIXME: move this to its own file in master
+.o_chat_window.o_thread_less {
+    .o_chat_search_input {
+        .o-flex-display();
+        padding: 5px;
+        > span {
+            .o-flex(0, 0, auto);
+        }
+        > input {
+            margin-left: 5px;
+            .o-flex(1, 1, 100%);
+        }
+    }
+    .o_mail_thread {
+        background-color: lightgray;
+    }
+    .o_chat_input {
+        display: none;
+    }
+}