[MERGE] im_livechat, mail: new Discuss mobile UI

- Brand new UI for Discuss client action (with tabs for for
  Discuss client action (with tabs for Inbox, chats,
  channels...)
- In mobile, conversations always open in Chat Windows
- Chat window UI improved (both mobile and desktop)
- Channels preview (used in the systray menu, and now in the mobile
  UI of Discuss) improved
- Other minor less tweaks

Task #31446
PR #16995

6 files changed, 155 insertions, 65 deletions

diff --git a/addons/mail/static/src/xml/chat_window.xml b/addons/mail/static/src/xml/chat_window.xml
index a9117c76bd6..525898dabd8 100644
--- a/addons/mail/static/src/xml/chat_window.xml
+++ b/addons/mail/static/src/xml/chat_window.xml
@@ -41,12 +41,15 @@
     </t>
 
     <t t-name="mail.ChatWindowHeaderContent">
+        <span t-if="widget.isMobile">
+            <a href="#" class="o_chat_window_close fa fa-1x fa-arrow-left mr4"/>
+        </span>
         <span class="o_chat_title">
             <t t-if="status" t-call="mail.chat.UserStatus"/>
             <t t-esc="title"/>
             <span t-if="unread_counter"> (<t t-esc="unread_counter"/>)</span>
         </span>
-        <span class="o_chat_window_buttons">
+        <span t-if="!widget.isMobile" class="o_chat_window_buttons">
             <a href="#" class="o_chat_window_close fa fa-close"/>
         </span>
     </t>
diff --git a/addons/mail/static/src/xml/client_action.xml b/addons/mail/static/src/xml/client_action.xml
index b4539dd7bb7..e27b70e40e5 100644
--- a/addons/mail/static/src/xml/client_action.xml
+++ b/addons/mail/static/src/xml/client_action.xml
@@ -17,13 +17,13 @@
     </t>
     <t t-name="mail.chat.Sidebar">
         <div class="o_mail_chat_sidebar">
-            <div t-attf-class="o_mail_chat_title_main o_mail_chat_channel_item #{(active_channel_id == 'channel_inbox') ? 'o_active': ''}"
+            <div t-attf-class="o_mail_chat_title_main o_mail_chat_channel_item #{(active_channel_id === 'channel_inbox') ? 'o_active': ''}"
                  data-channel-id="channel_inbox">
                 <span class="o_channel_name"><i class="fa fa-inbox mr8"/>Inbox</span>
                 <t t-set="counter" t-value="needaction_counter"/>
                 <t t-call="mail.chat.SidebarNeedaction"/>
             </div>
-            <div t-attf-class="o_mail_chat_title_main o_mail_chat_title_starred o_mail_chat_channel_item #{(active_channel_id == 'channel_starred') ? 'o_active': ''}"
+            <div t-attf-class="o_mail_chat_title_main o_mail_chat_title_starred o_mail_chat_channel_item #{(active_channel_id === 'channel_starred') ? 'o_active': ''}"
                  data-channel-id="channel_starred">
                 <span class="o_channel_name"><i class="fa fa-star-o mr8"/>Starred</span>
                 <t t-set="counter" t-value="starred_counter"/>
@@ -130,12 +130,13 @@
     <!-- Buttons of the Control Panel -->
     <t t-name="mail.chat.ControlButtons">
         <div>
-            <button type="button" class="btn btn-primary btn-sm o_mail_toggle_channels visible-xs-inline" title="Toggle Channels">Channels</button>
-            <button type="button" class="btn btn-primary btn-sm o_mail_chat_button_invite" title="Invite people">Invite</button>
-            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_mark_read hidden-xs" title="Mark all as read">Mark all read</button>
-            <button type="button" class="btn btn-primary btn-sm o_mail_chat_button_unstar_all" title="Unstar all messages">Unstar all</button>
-            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_unsubscribe" title="Unsubscribe from channel">Unsubscribe</button>
-            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_settings" title="Open channel settings">Settings</button>
+            <button type="button" class="btn btn-primary btn-sm o_mail_chat_button_invite hidden-xs" title="Invite people">Invite</button>
+            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_mark_read" title="Mark all as read">Mark all read</button>
+            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_unstar_all" title="Unstar all messages">Unstar all</button>
+            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_unsubscribe hidden-xs" title="Unsubscribe from channel">Unsubscribe</button>
+            <button type="button" class="btn btn-default btn-sm o_mail_chat_button_dm visible-xs" title="New Message">New Message</button>
+            <button t-if="!disable_add_channel" type="button" class="btn btn-default btn-sm o_mail_chat_button_public o_mail_chat_button_private visible-xs" title="New Channel">New Channel</button>
+            <button t-if="debug" type="button" class="btn btn-default btn-sm o_mail_chat_button_settings" title="Open channel settings">Settings</button>
         </div>
     </t>
 
@@ -143,4 +144,85 @@
     <div t-name="mail.PartnerInviteDialog">
         <input type="text" class="o_input o_mail_chat_partner_invite_input" id="mail_search_partners"/>
     </div>
+
+
+    <!-- Mobile templates -->
+    <t t-name="mail.client_action_mobile">
+        <div class="o_mail_chat">
+            <div class="o_mail_chat_mobile_control_panel"/>
+            <div class="o_mail_chat_mobile_inbox_buttons">
+               <button type="button" class="btn btn-primary btn-sm visible-xs-inline o_channel_inbox_item" title="Inbox" data-type="channel_inbox">
+                    Inbox
+                </button><button type="button" class="btn btn-default btn-sm visible-xs-inline o_channel_inbox_item" title="Starred" data-type="channel_starred">
+                    Starred
+                </button>
+            </div>
+            <div class="o_mail_chat_content"/>
+            <div class="o_mail_mobile_tabs">
+                <div class="o_mail_mobile_tab" data-type="channel_inbox">
+                    <span class="fa fa-inbox"/>
+                    <span class="o_tab_title">Inbox</span>
+                </div>
+                <div class="o_mail_mobile_tab" data-type="dm">
+                    <span class="fa fa-user"/>
+                    <span class="o_tab_title">Chat</span>
+                </div>
+                <div class="o_mail_mobile_tab" data-type="public">
+                    <span class="fa fa-users"/>
+                    <span class="o_tab_title">Channels</span>
+                </div>
+                <div class="o_mail_mobile_tab" data-type="private">
+                    <span class="fa fa-eye-slash"/>
+                    <span class="o_tab_title">Private Channels</span>
+                </div>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="mail.chat.MobileTabPane">
+        <div class="o_mail_chat_tab_pane" t-att-data-type="type">
+            <div t-if="!disable_add_channel" class="o_mail_add_channel" t-att-data-type="type">
+                <span t-if="type == 'private' || type == 'public'">#</span>
+                <t t-set="input_placeholder" t-if="type == 'private' || type == 'public'">Add a channel</t>
+                <t t-set="input_placeholder" t-if="type == 'dm'">Open chat</t>
+                <input type="text" t-attf-placeholder="#{input_placeholder}"/>
+            </div>
+            <t t-foreach="channels" t-as="channel">
+                <t t-call="mail.chat.ChannelPreview"/>
+            </t>
+        </div>
+    </t>
+
+    <!-- The ChannelPreview template is used by the client action in mobile, and by the systray menu -->
+    <t t-name="mail.chat.ChannelPreview">
+        <div t-attf-class="o_mail_channel_preview #{channel.unread_counter ? 'o_channel_unread' : ''}"
+             t-att-data-channel_id="channel.id" t-att-data-res_id="channel.res_id" t-att-data-res_model="channel.model">
+            <div class="o_mail_channel_image">
+                <img class="o_mail_channel_image" t-att-src="channel.image_src"/>
+                <i t-if="channel.status === 'online'" class="o_mail_user_status o_user_online fa fa-circle" title="Online"/>
+                <i t-if="channel.status === 'away'" class="o_mail_user_status o_user_idle fa fa-circle" title="Idle"/>
+            </div>
+            <div class="o_channel_info">
+                <div class="o_channel_title">
+                    <span class="o_channel_name">
+                        <t t-esc="channel.name"/>
+                    </span>
+                    <span class="o_channel_counter">
+                        <t t-if="channel.unread_counter">&amp;nbsp;(<t t-esc="channel.unread_counter"/>)</t>
+                    </span>
+                    <span class="o_last_message_date"> <t t-esc="channel.last_message_date"/> </span>
+                </div>
+                <div t-if="channel.last_message" class="o_last_message_preview">
+                    <t t-if="channel.last_message.is_author">
+                        <span class="fa fa-mail-reply"/> You:
+                    </t>
+                    <t t-else="">
+                        <t t-esc="channel.last_message.displayed_author"/>:
+                    </t>
+                    <t t-raw="channel.last_message_preview"/>
+                </div>
+            </div>
+        </div>
+    </t>
+
 </templates>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 68c2730707e..a7b2e7cb02f 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -13,13 +13,14 @@
                     <div class="o_chatter_composer_tools">
                         <button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
                         <button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
+                        <button t-if="widget.options.isMobile" tabindex="3" class="btn btn-sm btn-icon fa fa-paper-plane-o o_composer_button_send" type="button"/>
                     </div>
                 </div>
              </div>
              <div class="o_composer_attachments_list"/>
          </div>
          <div class="o_composer_send">
-             <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
+             <button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send hidden-xs" type="button"><t t-esc="widget.options.send_text"/></button>
          </div>
          <span class="hide">
             <t t-call="HiddenInputFile">
diff --git a/addons/mail/static/src/xml/extended_chat_window.xml b/addons/mail/static/src/xml/extended_chat_window.xml
index 5548688d462..3e183d99bd2 100644
--- a/addons/mail/static/src/xml/extended_chat_window.xml
+++ b/addons/mail/static/src/xml/extended_chat_window.xml
@@ -11,9 +11,8 @@
     </t>
 
     <t t-extend="mail.ChatWindowHeaderContent">
-        <t t-jquery=".o_chat_window_close" t-operation="before">
-            <a href="#" class="o_chat_window_expand fa fa-expand" title="
-            Open in Discuss"/>
+        <t t-jquery=".o_chat_window_buttons" t-operation="prepend">
+            <a href="#" class="o_chat_window_expand fa fa-expand" title="Open in Discuss"/>
         </t>
     </t>
 
diff --git a/addons/mail/static/src/xml/systray.xml b/addons/mail/static/src/xml/systray.xml
index 8e7e9b161d4..653faa4dc6d 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -7,15 +7,36 @@
                 <i class="fa fa-comments"/> <span class="o_notification_counter badge"/>
             </a>
             <ul class="o_mail_navbar_dropdown dropdown-menu" role="menu">
-                <li class="o_mail_navbar_dropdown_top">
+                <li t-if="widget.isMobile">
+                    <div class="o_mail_navbar_mobile_header">
+                        <button type="button" class="btn btn-default btn-sm o_new_message"> New message </button>
+                    </div>
+                </li>
+                <li t-if="!widget.isMobile" class="o_mail_navbar_dropdown_top">
                     <div>
-                        <button type="button" class="btn btn-sm o_filter_button o_selected"> All </button>
+                        <button type="button" class="btn btn-sm o_filter_button active"> All </button>
                         <button type="button" class="btn btn-sm o_filter_button" data-filter='chat'> Chat </button>
                         <button type="button" class="btn btn-sm o_filter_button" data-filter='channels'> Channels </button>
                     </div>
                     <button type="button" class="btn btn-sm o_new_message"> New message </button>
                 </li>
                 <li class="o_mail_navbar_dropdown_channels"/>
+                <li t-if="widget.isMobile">
+                    <div class="o_mail_mobile_tabs">
+                        <div class="o_mail_mobile_tab o_filter_button active">
+                            <span class="fa fa-envelope"/>
+                            <span class="o_tab_title">All</span>
+                        </div>
+                        <div class="o_mail_mobile_tab o_filter_button" data-filter='chat'>
+                            <span class="fa fa-user"/>
+                            <span class="o_tab_title">Chat</span>
+                        </div>
+                        <div class="o_mail_mobile_tab o_filter_button" data-filter='channels'>
+                            <span class="fa fa-users"/>
+                            <span class="o_tab_title">Channels</span>
+                        </div>
+                    </div>
+                </li>
             </ul>
         </li>
     </t>
@@ -27,26 +48,7 @@
             </li>
         </t>
         <t t-foreach="channels" t-as="channel">
-            <div t-attf-class="o_mail_channel_preview #{channel.unread_counter ? 'o_channel_unread' : ''}"
-                 t-att-data-channel_id="channel.id" t-att-data-res_id="channel.res_id" t-att-data-res_model="channel.model">
-                <img class="o_channel_image" t-att-src="channel.image_src"/>
-                <div class="o_channel_info">
-                    <div class="o_channel_title">
-                        <span class="o_channel_name">
-                            <t t-if="channel.status" t-call="mail.chat.UserStatus">
-                                <t t-set="status" t-value="channel.status"/>
-                            </t>
-                            <t t-esc="channel.name"/>
-                            <t t-if="channel.unread_counter">(<t t-esc="channel.unread_counter"/>)</t>
-                        </span>
-                        <span class="o_last_message_date"> <t t-esc="channel.last_message_date"/> </span>
-                    </div>
-                    <div class="o_last_message_preview">
-                        <t t-esc="channel.last_message.displayed_author"/>:
-                        <t t-raw="channel.last_message_preview"/>
-                    </div>
-                </div>
-            </div>
+            <t t-call="mail.chat.ChannelPreview"/>
         </t>
     </t>
 
@@ -58,7 +60,9 @@
         </t>
         <t t-foreach="activities" t-as="activity">
             <div class="o_mail_channel_preview" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='my'>
-                <img class="o_channel_image" t-att-src="activity.icon"/>
+                <div class="o_mail_channel_image">
+                    <img t-att-src="activity.icon"/>
+                </div>
                 <div class="o_channel_info">
                     <div class="o_channel_title">
                         <span class="o_channel_name">
@@ -70,8 +74,8 @@
                         <span t-if="!activity.overdue_count" class="o_no_activity mr16">0 Late </span>
                         <button t-if="activity.today_count" type="button" class="btn btn-link o_activity_filter_button mr16" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='today'> <t t-esc="activity.today_count"/> Today </button>
                         <span t-if="!activity.today_count" class="o_no_activity mr16">0 Today </span>
-                        <button t-if="activity.planned_count" type="button" class="btn btn-link o_activity_filter_button pull-right mr16" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='upcoming_all'> <t t-esc="activity.planned_count"/> Future </button>
-                        <span t-if="!activity.planned_count" class="o_no_activity pull-right mr16">0 Future</span>
+                        <button t-if="activity.planned_count" type="button" class="btn btn-link o_activity_filter_button pull-right" t-att-data-res_model="activity.model" t-att-data-model_name="activity.name" data-filter='upcoming_all'> <t t-esc="activity.planned_count"/> Future </button>
+                        <span t-if="!activity.planned_count" class="o_no_activity pull-right">0 Future</span>
                     </div>
                 </div>
             </div>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
index 8237658e99e..89f0921a6cc 100644
--- a/addons/mail/static/src/xml/thread.xml
+++ b/addons/mail/static/src/xml/thread.xml
@@ -3,10 +3,10 @@
 
     <t t-name="mail.ChatThread">
         <t t-if="messages.length">
-            <t t-if="options.display_load_more &amp;&amp; options.display_order == ORDER.ASC"
+            <t t-if="options.display_load_more and options.display_order == ORDER.ASC"
                t-call="mail.ChatThread.LoadMore"/>
             <t t-call="mail.ChatThread.Content"/>
-            <t t-if="options.display_load_more &amp;&amp; options.display_order == ORDER.DESC"
+            <t t-if="options.display_load_more and options.display_order == ORDER.DESC"
                t-call="mail.ChatThread.LoadMore"/>
         </t>
         <t t-if="options.display_empty_channel">
@@ -133,23 +133,23 @@
     <t t-name="mail.ChatThread.Message">
         <div t-att-class="'o_thread_message' + (message.expanded ? ' o_message_expanded '  : ' ') + (message.is_selected ? 'o_thread_selected_message' : '')" t-att-data-message-id="message.id">
             <div t-if="options.display_avatar" class="o_thread_message_sidebar">
-                <t t-if="!message.mailto &amp;&amp; message.author_id[0]">
-                    <img t-if="message.avatar_src &amp;&amp; message.display_author"
+                <t t-if="!message.mailto and message.author_id[0]">
+                    <img t-if="message.avatar_src and message.display_author"
                         t-att-src="message.avatar_src"
                         data-oe-model="res.partner"
                         t-att-data-oe-id="message.author_redirect ? message.author_id[0] : ''"
                         t-attf-class="o_thread_message_avatar img-circle #{message.author_redirect ? 'o_mail_redirect' : ''}"/>
                 </t>
                 <t t-if="message.mailto || !message.author_id[0]">
-                    <img t-if="message.avatar_src &amp;&amp; message.display_author"
+                    <img t-if="message.avatar_src and message.display_author"
                         t-att-src="message.avatar_src"
                         class="o_thread_message_avatar img-circle"/>
                 </t>
                 <span t-if="!message.display_author" t-att-title="message.date" class="o_thread_message_side_date">
                     <t t-esc="message.date.format('hh:mm')"/>
                 </span>
-                <i t-if="!message.display_author &amp;&amp; options.display_stars &amp;&amp; message.message_type != 'notification'"
-                    t-att-class="'fa o_thread_message_star ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
+                <i t-if="!message.display_author and options.display_stars and message.message_type != 'notification'"
+                    t-att-class="'fa o_thread_message_star o_thread_icon ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
                     t-att-data-message-id="message.id" title="Mark as Todo"/>
             </div>
             <div t-att-class="'o_thread_message_core' + (message.is_note ? ' o_mail_note' : '')">
@@ -163,23 +163,23 @@
                             <t t-esc="message.mailto"/>
                         </a>
                     </strong>
-                    <strong t-if="!message.mailto &amp;&amp; message.author_id[0]"
+                    <strong t-if="!message.mailto and message.author_id[0]"
                             data-oe-model="res.partner" t-att-data-oe-id="message.author_redirect ? message.author_id[0] : ''"
-                            t-attf-class="#{message.author_redirect ? 'o_mail_redirect' : ''}">
+                            t-attf-class="o_thread_author #{message.author_redirect ? 'o_mail_redirect' : ''}">
                         <t t-esc="message.displayed_author"/>
                     </strong>
-                    <strong t-if="!message.mailto &amp;&amp; !message.author_id[0]">
+                    <strong t-if="!message.mailto and !message.author_id[0]" class="o_thread_author">
                         <t t-esc="message.displayed_author"/>
                     </strong>
 
                     - <small class="o_mail_timestamp" t-att-title="message.date"><t t-esc="message.hour"/></small>
-                    <t t-if="message.model &amp;&amp; (message.model != 'mail.channel') &amp;&amp; options.display_document_link">
-                        on <a t-att-href="message.url" t-att-data-oe-model="message.model" t-att-data-oe-id="message.res_id"><t t-esc="message.record_name"/></a>
+                    <t t-if="message.model and (message.model != 'mail.channel') and options.display_document_link">
+                        <a t-att-href="message.url" t-att-data-oe-model="message.model" t-att-data-oe-id="message.res_id" class="o_document_link">on <t t-esc="message.record_name"/></a>
                     </t>
-                    <t t-if="message.origin_id &amp;&amp; (message.origin_id !== options.channel_id)">
+                    <t t-if="message.origin_id and (message.origin_id !== options.channel_id)">
                         (from <a t-att-data-oe-id="message.origin_id" href="#">#<t t-esc="message.origin_name"/></a>)
                     </t>
-                    <span t-if="options.display_email_icon &amp;&amp; message.customer_email_data &amp;&amp; message.customer_email_data.length" class="o_thread_tooltip_container">
+                    <span t-if="options.display_email_icon and message.customer_email_data and message.customer_email_data.length" class="o_thread_tooltip_container">
                         <i t-att-class="'o_thread_tooltip o_thread_message_email o_thread_message_email_' + message.customer_email_status + ' fa fa-envelope-o'"/>
                         <span class="o_thread_tooltip_content">
                             <t t-foreach="message.customer_email_data" t-as="customer">
@@ -206,19 +206,21 @@
                            t-att-data-message-id="message.id" title="Mark as Read"/>
                     </span>
                 </p>
-                <t t-if="message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0">
-                    <t t-if="message.subtype_description">
-                        <p t-esc="message.subtype_description"/>
+                <div class="o_thread_message_content">
+                    <t t-if="message.tracking_value_ids and message.tracking_value_ids.length &gt; 0">
+                        <t t-if="message.subtype_description">
+                            <p><t t-esc="message.subtype_description"/></p>
+                        </t>
+                        <t t-call="mail.ChatThread.MessageTracking"/>
                     </t>
-                    <t t-call="mail.ChatThread.MessageTracking"/>
-                </t>
-                <p t-if="options.display_subject &amp;&amp; message.display_subject" class="o_mail_subject">Subject: <t t-esc="message.subject"/></p>
-                <t t-if="!(message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0)">
-                    <t t-raw="message.body"/>
-                </t>
-                <t t-foreach="message.attachment_ids" t-as="attachment">
-                    <t t-call="mail.Attachment"/>
-                </t>
+                    <p t-if="options.display_subject and message.display_subject" class="o_mail_subject">Subject: <t t-esc="message.subject"/></p>
+                    <t t-if="!(message.tracking_value_ids and message.tracking_value_ids.length &gt; 0)">
+                        <t t-raw="message.body"/>
+                    </t>
+                     <t t-foreach="message.attachment_ids" t-as="attachment">
+                         <t t-call="mail.Attachment"/>
+                     </t>
+                </div>
             </div>
         </div>
         <t t-if="options.messages_separator_position == message.id">
@@ -329,5 +331,4 @@
             <button class="btn btn-sm btn-link">-------- Show older messages --------</button>
         </div>
     </t>
-
 </templates>