[IMP] mail: make chat windows somehow usable in mobile

addons/mail/static/src/js/chat_window.js

@@ -3,6 +3,7 @@ odoo.define('mail.ChatWindow', function (require) {
 
 var ChatThread = require('mail.ChatThread');
 
+var config = require('web.config');
 var core = require('web.core');
 var Widget = require('web.Widget');
 
@@ -107,8 +108,10 @@ return Widget.extend({
         this.trigger("close_chat_session");
     },
     on_click_fold: function () {
-        this.toggle_fold();
-        this.trigger("fold_channel", this.channel_id, this.folded);
+        if (config.device.size_class !== config.device.SIZES.XS) {
+            this.toggle_fold();
+            this.trigger("fold_channel", this.channel_id, this.folded);
+        }
     },
 });
 

addons/mail/static/src/js/window_manager.js

@@ -4,6 +4,7 @@ odoo.define('mail.window_manager', function (require) {
 var chat_manager = require('mail.chat_manager');
 var ExtendedChatWindow = require('mail.ExtendedChatWindow');
 
+var config = require('web.config');
 var core = require('web.core');
 var utils = require('web.utils');
 var web_client = require('web.web_client');
@@ -162,6 +163,10 @@ function toggle_fold_chat (channel) {
 }
 
 function compute_available_slots (nb_windows) {
+    if (config.device.size_class === config.device.SIZES.XS) {
+        display_state.nb_slots = 1; // one chat window full screen in mobile
+        return;
+    }
     var width = window.innerWidth;
     var nb_slots = Math.floor(width/CHAT_WINDOW_WIDTH);
     var space_left = width - (Math.min(nb_slots, nb_windows)*CHAT_WINDOW_WIDTH);

addons/mail/static/src/less/chat_window.less

@@ -16,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 {
@@ -26,6 +30,13 @@
         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);
@@ -78,6 +89,10 @@
     background-color: @odoo-brand-primary;
     cursor: pointer;
 
+    @media (max-width: @screen-xs-max) {
+        display: none;
+    }
+
     .o_chat_window_dropdown_toggler {
         padding: 5px;
 

addons/mail/static/src/less/client_action.less

@@ -282,6 +282,15 @@
     .o_mail_navbar_dropdown {
         width: 350px;
         padding: 0;
+        @media (max-width: @screen-xs-max) {
+            background-color: white!important;
+            max-height: none!important;
+            position: fixed!important;
+            top: @navbar-height;
+            right: 0;
+            bottom: 0;
+            left: 0;
+        }
 
         .o_spinner {
             .o-flex-display();
@@ -330,6 +339,10 @@
             min-height: 50px;
             overflow-y: auto;
 
+            @media (max-width: @screen-xs-max) {
+                max-height: none;
+            }
+
             .o_mail_channel_preview {
                 .o-flex-display();
                 height: 50px;