[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

1 files changed, 90 insertions, 6 deletions

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>