From 4685e4bc7f19f964697bf0dbd7dfdf254b6c5628 Mon Sep 17 00:00:00 2001 From: Dharmang Soni Date: Wed, 26 Apr 2017 10:51:15 +0530 Subject: [PATCH] [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 --- addons/mail/models/mail_channel.py | 5 + addons/mail/static/src/js/chat_manager.js | 3 + addons/mail/static/src/js/chat_window.js | 13 +- addons/mail/static/src/js/client_action.js | 237 ++++++++++++--- addons/mail/static/src/js/composer.js | 2 + addons/mail/static/src/js/systray.js | 5 + addons/mail/static/src/less/chat_window.less | 124 +++++++- .../mail/static/src/less/client_action.less | 271 +++++++++++++++++- addons/mail/static/src/less/composer.less | 14 +- .../static/src/less/extended_chat_window.less | 51 ++++ addons/mail/static/src/less/systray.less | 103 ++++++- addons/mail/static/src/less/thread.less | 63 ++++ addons/mail/static/src/xml/chat_window.xml | 5 +- addons/mail/static/src/xml/client_action.xml | 96 ++++++- addons/mail/static/src/xml/composer.xml | 1 + .../static/src/xml/extended_chat_window.xml | 2 +- addons/mail/static/src/xml/systray.xml | 29 +- addons/mail/static/src/xml/thread.xml | 53 ++-- .../mail/static/tests/client_action_tests.js | 89 ++++++ addons/mail/views/mail_templates.xml | 1 + 20 files changed, 1073 insertions(+), 94 deletions(-) create mode 100644 addons/mail/static/tests/client_action_tests.js diff --git a/addons/mail/models/mail_channel.py b/addons/mail/models/mail_channel.py index 31e03b99081..e9e9969a017 100644 --- a/addons/mail/models/mail_channel.py +++ b/addons/mail/models/mail_channel.py @@ -354,6 +354,11 @@ class Channel(models.Model): .channel_partner_ids .filtered(lambda p: p.id != self.env.user.partner_id.id) .read(['id', 'name', 'im_status'])) + + last_message = channel.channel_fetch_preview() + if last_message: + info['last_message'] = last_message[0].get('last_message') + # add user session state, if available and if user is logged if partner_channels.ids: partner_channel = partner_channels.filtered(lambda c: channel.id == c.channel_id.id) diff --git a/addons/mail/static/src/js/chat_manager.js b/addons/mail/static/src/js/chat_manager.js index 807d5352180..128309bc77d 100644 --- a/addons/mail/static/src/js/chat_manager.js +++ b/addons/mail/static/src/js/chat_manager.js @@ -82,6 +82,8 @@ function add_message (data, options) { _.each(msg.channel_ids, function (channel_id) { var channel = chat_manager.get_channel(channel_id); if (channel) { + // For mobile tabs view, we show recent message for channel. + channel.last_message = msg; add_to_cache(msg, []); if (options.domain && options.domain !== []) { add_to_cache(msg, options.domain); @@ -288,6 +290,7 @@ function make_channel (data, options) { group_based_subscription: data.group_based_subscription, needaction_counter: data.message_needaction_counter || 0, unread_counter: 0, + last_message: data.last_message, last_seen_message_id: data.seen_message_id, cache: {'[]': { all_history_loaded: false, diff --git a/addons/mail/static/src/js/chat_window.js b/addons/mail/static/src/js/chat_window.js index 9f91baee764..9d54a6df0b2 100644 --- a/addons/mail/static/src/js/chat_window.js +++ b/addons/mail/static/src/js/chat_window.js @@ -11,7 +11,7 @@ var QWeb = core.qweb; var _t = core._t; var HEIGHT_OPEN = '400px'; -var HEIGHT_FOLDED = '28px'; +var HEIGHT_FOLDED = '34px'; return Widget.extend({ template: "mail.ChatWindow", @@ -43,6 +43,7 @@ return Widget.extend({ this.status = this.options.status; this.unread_msgs = unread_msgs || 0; this.is_hidden = false; + this.isMobile = config.isMobile; }, start: function () { this.$input = this.$('.o_composer_text_field'); @@ -76,6 +77,13 @@ return Widget.extend({ this.unread_msgs = counter; this.render_header(); }, + + /** + * When user status (online/offline/away) changed, this method update + * user status with last seen and render header again. + * + * @param {string} status + */ update_status: function (status) { this.status = status; this.render_header(); @@ -84,13 +92,14 @@ return Widget.extend({ this.$header.html(QWeb.render('mail.ChatWindowHeaderContent', { status: this.status, title: this.title, + isMobile: this.isMobile, unread_counter: this.unread_msgs, })); }, fold: function () { this.$el.animate({ height: this.folded ? HEIGHT_FOLDED : HEIGHT_OPEN - }); + }, 200); }, toggle_fold: function (fold) { this.folded = _.isBoolean(fold) ? fold : !this.folded; diff --git a/addons/mail/static/src/js/client_action.js b/addons/mail/static/src/js/client_action.js index a27790f9629..4058fbc0924 100644 --- a/addons/mail/static/src/js/client_action.js +++ b/addons/mail/static/src/js/client_action.js @@ -16,6 +16,7 @@ var dom = require('web.dom'); var pyeval = require('web.pyeval'); var SearchView = require('web.SearchView'); var Widget = require('web.Widget'); +var session = require('web.session'); var QWeb = core.qweb; var _t = core._t; @@ -149,10 +150,13 @@ var ChatAction = Widget.extend(ControlPanelMixin, { on_reverse_breadcrumb: this.on_reverse_breadcrumb, }); }, + "click .o_mail_chat_mobile_tab": '_onMobileTabClick', + "click .o_channel_inbox_item": '_onMobileChannelItemClick', + "click .o_mail_tab_pane_item": '_onMobileTabPaneItemClick', }, on_attach_callback: function () { - chat_manager.bus.trigger('client_action_open', true); + chat_manager.bus.trigger('client_action_open', !this.isMobile); if (this.channel) { this.thread.scroll_to({offset: this.channels_scrolltop[this.channel.id]}); } @@ -174,6 +178,8 @@ var ChatAction = Widget.extend(ControlPanelMixin, { this.notification_bar = (window.Notification && window.Notification.permission === "default"); this.selected_message = null; this.composerStates = {}; + this.isMobile = config.isMobile; + this.activeMobileTab = "channel_inbox"; }, willStart: function () { @@ -196,29 +202,26 @@ var ChatAction = Widget.extend(ControlPanelMixin, { action: this.action, disable_groupby: true, }; - var default_channel_id = this.options.active_id || + var defaultChannelId = this.options.active_id || this.action.context.active_id || this.action.params.default_active_id || 'channel_inbox'; - var default_channel = chat_manager.get_channel(default_channel_id) || + var defaultChannel = chat_manager.get_channel(defaultChannelId) || chat_manager.get_channel('channel_inbox'); - + this.activeMobileTab = defaultChannelId; this.searchview = new SearchView(this, this.dataset, this.fields_view, options); this.basic_composer = new composer.BasicComposer(this, {mention_partners_restricted: true}); this.extended_composer = new composer.ExtendedComposer(this, {mention_partners_restricted: true}); this.thread = new ChatThread(this, { - display_help: true, + display_help: true }); - this.$buttons = $(QWeb.render("mail.chat.ControlButtons", {})); + this.$buttons = $(QWeb.render("mail.chat.ControlButtons", {'debug': session.debug})); 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_unsubscribe', this.on_click_button_unsubscribe); this.$buttons.on('click', '.o_mail_chat_button_settings', this.on_click_button_settings); - this.$buttons.on('click', '.o_mail_toggle_channels', function () { - self.$('.o_mail_chat_sidebar').slideToggle(200); - }); this.$buttons.on('click', '.o_mail_chat_button_mark_read', function () { chat_manager.mark_all_as_read(self.channel, self.domain); }); @@ -254,10 +257,13 @@ var ChatAction = Widget.extend(ControlPanelMixin, { self.$searchview_buttons = self.searchview.$buttons.contents(); }); + if (this.isMobile) { + this._initMobileView(); + } this.renderSidebar(); return $.when(def1, def2, def3, def4) - .then(this.set_channel.bind(this, default_channel)) + .then(this.set_channel.bind(this, defaultChannel)) .then(function () { chat_manager.bus.on('open_channel', self, self.set_channel); chat_manager.bus.on('new_message', self, self.on_new_message); @@ -309,7 +315,14 @@ var ChatAction = Widget.extend(ControlPanelMixin, { this.selected_message = null; }, + /** + * Rendering main side bar with channels + */ renderSidebar: function () { + if (this.isMobile) { + this._renderTabPanes(); + } + var self = this; var $sidebar = this._renderSidebar({ active_channel_id: this.channel ? this.channel.id: undefined, @@ -452,27 +465,7 @@ var ChatAction = Widget.extend(ControlPanelMixin, { } // Update control panel - self.set("title", '#' + channel.name); - // Hide 'unsubscribe' button in state channels and DM and channels with group-based subscription - self.$buttons - .find('.o_mail_chat_button_unsubscribe') - .toggle(channel.type !== "dm" && channel.type !== 'static' && ! channel.group_based_subscription); - // Hide 'invite', 'unsubscribe' and 'settings' buttons in static channels and DM - self.$buttons - .find('.o_mail_chat_button_invite, .o_mail_chat_button_settings') - .toggle(channel.type !== "dm" && channel.type !== 'static'); - self.$buttons - .find('.o_mail_chat_button_mark_read') - .toggle(channel.id === "channel_inbox"); - self.$buttons - .find('.o_mail_chat_button_unstar_all') - .toggle(channel.id === "channel_starred"); - - self.$('.o_mail_chat_channel_item') - .removeClass('o_active') - .filter('[data-channel-id=' + channel.id + ']') - .removeClass('o_unread_message') - .addClass('o_active'); + self._updateControlPanelButtons(channel); var $new_messages_separator = self.$('.o_thread_new_messages_separator'); if ($new_messages_separator.length) { @@ -578,7 +571,23 @@ var ChatAction = Widget.extend(ControlPanelMixin, { $searchview_buttons: this.$searchview_buttons, }, searchview: this.searchview, + hidden: this.isMobile }); + + if (this.isMobile) { + var self = this; + var $enable_searchview = $(' +
- - + + - + + +
@@ -143,4 +144,87 @@
+ + +
+ +
+ + + +
+ + + +
+
+ + Inbox +
+
+ + Chat +
+
+ + Channels +
+
+ + Private Channels +
+
+ + + + +
+
+ # + Add a channel + Open chat + +
+ + + + + +
+ + + + +
+
+ + + + + +
+ + +
+

+

+ + + + + + attachment(s) + + + + + : + + + + +

+
+
+ 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 @@
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 @@ - 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 @@ -