[IMP] mail: improve Discuss UI for mobile devices

- Brand new UI 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

6 files changed, 148 insertions, 38 deletions

diff --git a/addons/mail/static/src/xml/chat_window.xml b/addons/mail/static/src/xml/chat_window.xml
index a9117c76bd6..b8e22e99249 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="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="!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..7435914f139 100644
--- a/addons/mail/static/src/xml/client_action.xml
+++ b/addons/mail/static/src/xml/client_action.xml
@@ -6,7 +6,7 @@
         <div class="o_mail_chat">
             <div class="o_mail_chat_sidebar"/>
             <div class="o_mail_chat_content">
-                <t t-if="widget.notification_bar">
+                <t t-if="widget.notification_bar &amp;&amp; !widget.isMobile">
                     <div class="o_mail_annoying_notification_bar">
                         <span class="o_mail_request_permission">Odoo needs your permission to <a href="#"> enable desktop notifications</a>.</span>
                         <span class="fa fa-close"></span>
@@ -129,13 +129,14 @@
 
     <!-- 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>
+        <div class="o_mail_chat_buttons">
             <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_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" 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-default btn-sm o_mail_chat_button_dm o_hidden 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 o_hidden 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,87 @@
     <div t-name="mail.PartnerInviteDialog">
         <input type="text" class="o_input o_mail_chat_partner_invite_input" id="mail_search_partners"/>
     </div>
+
+    <t t-name="mail.chat.MobileInboxStarredButtons">
+       <div class="o_mail_chat_inbox_starred_button">
+           <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>
+    </t>
+
+    <t t-name="mail.chat.MobileControlPanel">
+        <div class="o_mail_chat_mobile_control_panel"/>
+    </t>
+
+    <t t-name="mail.chat.MobileTabs">
+        <div class="o_mail_chat_mobile_tabs">
+            <div class="o_mail_chat_mobile_tab" data-channel-id="channel_inbox" data-type="channel_inbox">
+                <span class="fa fa-envelope"/>
+                <span class="o_tab_title">Inbox</span>
+            </div>
+            <div class="o_mail_chat_mobile_tab" data-type="dm">
+                <span class="fa fa-comments"/>
+                <span class="o_tab_title">Chat</span>
+            </div>
+            <div class="o_mail_chat_mobile_tab" data-type="public">
+                <span class="fa fa-users"/>
+                <span class="o_tab_title">Channels</span>
+            </div>
+            <div class="o_mail_chat_mobile_tab" data-type="private">
+                <span class="fa fa-lock"/>
+                <span class="o_tab_title">Private&amp;nbsp;Channels</span>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="mail.chat.MobileTabPanes">
+        <t t-foreach="channels" t-as="item">
+            <div class="o_mail_chat_tab_pane" t-att-data-type="item.type">
+                <div t-if="!disable_add_channel" class="o_mail_add_channel o_mail_mobile_add_channel" t-att-data-type="type">
+                    <span t-if="type == 'private' || type == 'public'">#</span>
+                    <t t-set="input_placeholder" t-if="type == 'private' || '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="item.channels" t-as="channel">
+                    <t t-call="mail.chat.MobileTabPaneItems">
+                        <t t-set="type" t-value="item.type"/>
+                    </t>
+                </t>
+            </div>
+        </t>
+    </t>
+
+    <t t-name="mail.chat.MobileTabPaneItems">
+        <div class="o_mail_tab_pane_item" t-att-data-channel-id="channel.id">
+            <div class="item_avatar_status">
+                <img t-if="type == 'dm'" t-att-src="'/web/image/res.partner/'+ channel.direct_partner_id+'/image_small'"/>
+                <img t-if="type != 'dm'" t-att-src="'/web/image/mail.channel/'+ channel.id+'/image_small'"/>
+                <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"/>
+                <i t-if="channel.status == 'offline'" class="o_mail_user_status fa fa-circle" title="Offline"/>
+            </div>
+            <t t-set="is_author" t-value="channel.last_message &amp;&amp; channel.last_message.author_id[0] == partner_id"/>
+            <t t-set="is_unread" t-value="channel.last_message &amp;&amp; channel.last_seen_message_id &lt; channel.last_message.id &amp;&amp; !is_author"/>
+            <div class="chat_user_detail">
+                <h2 t-attf-class="#{is_unread ? 'unread' : ''}"><t t-esc="channel.name"/><small class="o_message_timestamp" t-attf-title="#{channel.last_message ? channel.last_message.date : ''}"><t t-if="channel.last_message" t-esc="moment(channel.last_message.date).fromNow()"/></small></h2>
+                <p t-attf-class="#{is_unread ? 'unread' : ''}">
+                    <t t-if="channel.last_message">
+                        <span t-if="is_author" class="fa fa-mail-reply"/>
+                        <t t-if="channel.last_message" t-raw="get_message_body_preview(channel.last_message.body)"/>
+                        <t t-if="channel.last_message.body == ''">
+                            <t t-if="channel.last_message.attachment_ids.length != 0">
+                                <t t-esc="channel.last_message.attachment_ids.length"/> attachment(s)
+                            </t>
+                            <t t-if="channel.last_message.tracking_value_ids and channel.last_message.tracking_value_ids.length &gt; 0">
+                                <t t-if="channel.last_message.subtype_description">
+                                    <strong><t t-esc="channel.last_message.record_name"/></strong>
+                                    : <t t-esc="channel.last_message.subtype_description"/>
+                                </t>
+                            </t>
+                        </t>
+                    </t>
+                </p>
+            </div>
+        </div>
+    </t>
 </templates>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
index 68c2730707e..9305728ebfe 100644
--- a/addons/mail/static/src/xml/composer.xml
+++ b/addons/mail/static/src/xml/composer.xml
@@ -13,6 +13,7 @@
                     <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 o_composer_mobile_button" type="button"/>
                     </div>
                 </div>
              </div>
diff --git a/addons/mail/static/src/xml/extended_chat_window.xml b/addons/mail/static/src/xml/extended_chat_window.xml
index 5548688d462..865bb7c2968 100644
--- a/addons/mail/static/src/xml/extended_chat_window.xml
+++ b/addons/mail/static/src/xml/extended_chat_window.xml
@@ -12,7 +12,7 @@
 
     <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="
+            <a t-if="!isMobile" 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..ebc65ecfe2f 100644
--- a/addons/mail/static/src/xml/systray.xml
+++ b/addons/mail/static/src/xml/systray.xml
@@ -6,8 +6,13 @@
             <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Conversations" href="#">
                 <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">
+            <ul t-att-class="'o_mail_navbar_dropdown dropdown-menu ' + (widget.isMobile ? 'o_mail_navbar_mobile' : '')" role="menu">
+                <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" data-filter='chat'> Chat </button>
@@ -16,6 +21,22 @@
                     <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_navbar_mobile_tabs">
+                        <div class="o_mail_navbar_mobile_tab o_filter_button o_selected">
+                            <span class="fa fa-envelope"/>
+                            <span class="o_tab_title">All</span>
+                        </div>
+                        <div class="o_mail_navbar_mobile_tab o_filter_button" data-filter='chat'>
+                            <span class="fa fa-comments"/>
+                            <span class="o_tab_title">Chat</span>
+                        </div>
+                        <div class="o_mail_navbar_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>
@@ -70,8 +91,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..054576ed923 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,22 +133,22 @@
     <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'"
+                <i t-if="!message.display_author and options.display_stars and message.message_type != 'notification'"
                     t-att-class="'fa o_thread_message_star ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
                     t-att-data-message-id="message.id" title="Mark as Todo"/>
             </div>
@@ -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>