[IMP] mail: make the interface usable in mobile mode

The sidebar can be make visible by clicking on a button 'Channels' in
the control panel.

addons/mail/static/src/js/client_action.js

@@ -165,6 +165,9 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
         this.$buttons.find('button').css({display:"inline-block"});
         this.$buttons.on('click', '.o_mail_chat_button_invite', this.on_click_button_invite);
         this.$buttons.on('click', '.o_mail_chat_button_detach', this.on_click_button_detach);
+        this.$buttons.on('click', '.o_mail_toggle_channels', function () {
+            self.$('.o_mail_chat_sidebar').slideToggle(200);
+        });
 
         this.thread.on('redirect', this, this.on_redirect);
         this.thread.on('redirect_to_channel', this, function (channel_id) {
@@ -295,10 +298,12 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
         var new_channel_scrolltop = this.channels_scrolltop[channel.id];
         this.channel = channel;
         this.set("title", channel.name);
-        this.$buttons.toggle(channel.type !== "static");
+        this.$buttons
+            .find('.o_mail_chat_button_detach')
+            .toggle(channel.type !== "static");
         this.$buttons
             .find('.o_mail_chat_button_invite')
-            .toggle(channel.type !== "dm");
+            .toggle(channel.type !== "dm" && channel.type !== 'static');
 
         this.update_cp();
         this.action.context.active_id = channel.id;
@@ -318,6 +323,10 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
             if (!config.device.touch) {
                 self.composer.focus();
             }
+            if (config.device.size_class === config.device.SIZES.XS) {
+                self.$('.o_mail_chat_sidebar').hide();
+            }
+
             self.action_manager.do_push_state({
                 action: self.action.id,
                 active_id: self.channel.id,

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

@@ -6,8 +6,9 @@
     height: 100%;
 
     @media (max-width: @screen-xs-max) {
-        position: static;
         height: auto;
+        flex-direction: column;
+
     }
 
     .o-flex-display();
@@ -18,6 +19,11 @@
         overflow: auto;
         padding: 8px 0;
 
+        @media (max-width: @screen-xs-max) {
+            flex: none;
+            display: none;
+        }
+
         .o_mail_sidebar_title {
             .o-webclient-padding(@top: 5px, @bottom: 5px);
             .o-flex-display();
@@ -56,9 +62,6 @@
         height: 100%;
         .o-flex-display();
         .o-flex-flow(column, nowrap);
-        @media (max-width: @screen-xs-max) {
-            height: auto;
-        }
 
         .o_mail_thread {
             .o-flex(1, 0, 0);

addons/mail/static/src/xml/client_action.xml

@@ -83,8 +83,9 @@
     <!-- Buttons of the Control Panel -->
     <t t-name="mail.chat.ControlButtons">
         <div>
-            <button type="button" class="btn btn-primary btn-sm o_mail_chat_button_invite" t-att-title='_t("Invite people")'>Invite</button>
-            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_detach" t-att-title='_t("Detach the conversation")'>Detach</button>
+            <button type="button" class="btn btn-primary btn-sm o_mail_toggle_channels visible-xs-inline" t-att-title='_t("Toggle Channels")'>Channels</button>
+            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_invite" t-att-title='_t("Invite people")'>Invite</button>
+            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_detach hidden-xs" t-att-title='_t("Detach the conversation")'>Detach</button>
         </div>
     </t>