[IMP] mail: put chat windows in a dropdown in case of overflow

Former algorithm to display chat windows was pretty basic: each window was
positionned 5 pixels to the left of the previous one, starting from the bottom
right corner of the screen. Thus, when there were too many chat windows to fit
in the screen, they overflowed to the left.

This rev. handles this case by hidding overflowing chat windows and making them
available in a dropdown positionned 5 pixels to the left of the last visible
chat window.

1 files changed, 43 insertions, 1 deletions

diff --git a/addons/mail/static/src/less/chat_window.less b/addons/mail/static/src/less/chat_window.less
index ca2e8ca74f1..bd9a2452113 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%;
@@ -28,11 +29,13 @@
         .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%);
             }
@@ -67,3 +70,42 @@
         }
     }
 }
+
+.o_chat_window_dropdown {
+    width: auto;
+    height: 28px;
+    color: white;
+    background-color: @odoo-brand-primary;
+    cursor: pointer;
+
+    .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;
+            }
+        }
+    }
+}