From cfc18172a53ec550299aa9902cc226050f75bc6f Mon Sep 17 00:00:00 2001 From: Aaron Bohy Date: Mon, 19 Oct 2015 15:43:57 +0200 Subject: [PATCH] [IMP] mail: composer: use textarea in client action ... allowing multi-line edition, like in the chatter. Shortcuts: - in the client action: ENTER sends, SHIFT+ENTER goes to newline - in the chatter: SHIFT+ENTER sends, ENTER goes to newline Don't use autosize anymore to resize the textarea according to its content as it didn't fit well within the flex layout of the client action ('height: auto' didn't increase the height of the flex-item with 'flex-grow: 0'). We perform the resizing ourselves instead. --- addons/mail/static/src/js/chatter.js | 27 ++++++++--------- addons/mail/static/src/js/composer.js | 35 +++++++++++++++++++++-- addons/mail/static/src/less/chatter.less | 2 ++ addons/mail/static/src/less/composer.less | 4 +++ addons/mail/static/src/xml/chatter.xml | 5 ---- addons/mail/static/src/xml/composer.xml | 2 +- 6 files changed, 51 insertions(+), 24 deletions(-) diff --git a/addons/mail/static/src/js/chatter.js b/addons/mail/static/src/js/chatter.js index 56e5c2e7ff9..a4899696747 100644 --- a/addons/mail/static/src/js/chatter.js +++ b/addons/mail/static/src/js/chatter.js @@ -6,6 +6,7 @@ var ChatComposer = require('mail.ChatComposer'); var ChatThread = require('mail.ChatThread'); var ajax = require('web.ajax'); +var config = require('web.config'); var core = require('web.core'); var data = require('web.data'); var Dialog = require('web.Dialog'); @@ -469,13 +470,6 @@ var ChatterComposer = ChatComposer.extend({ return $.when(this._super.apply(this, arguments), this.message_get_suggested_recipients()); }, - start: function () { - var self = this; - return this._super.apply(this, arguments).then(function () { - autosize(self.$input); - }); - }, - preprocess_message: function () { var self = this; var def = $.Deferred(); @@ -519,13 +513,10 @@ var ChatterComposer = ChatComposer.extend({ }, /** - * Override keydown event handler to go to next line on ENTER and send message on CTRL+ENTER - */ - on_keydown: function (event) { - if (!event.ctrlKey && (event.keyCode === $.ui.keyCode.ENTER) && !this.get('mention_partners').length) { - return; - } - this._super(event); + * Send the message on SHIFT+ENTER, but go to new line on ENTER + */ + prevent_send: function (event) { + return !event.shiftKey; }, message_get_suggested_recipients: function () { @@ -844,9 +835,12 @@ var Chatter = form_common.AbstractField.extend({ var old_composer = this.composer; // create the new composer this.composer = new ChatterComposer(this, this.thread_dataset, { + context: this.context, + input_min_height: 50, + input_max_height: Number.MAX_VALUE, // no max_height limit for the chatter + input_baseline: 14, internal_subtypes: this.options.internal_subtypes, is_log: options && options.is_log, - context: this.context, record_name: this.record_name, }); this.composer.insertBefore(this.$('.o_mail_thread')).then(function () { @@ -854,6 +848,9 @@ var Chatter = form_common.AbstractField.extend({ if (old_composer) { old_composer.destroy(); } + if (!config.device.touch) { + self.composer.focus(); + } self.composer.on('post_message', self, self.on_post_message); self.composer.on('need_refresh', self, self.refresh_followers); }); diff --git a/addons/mail/static/src/js/composer.js b/addons/mail/static/src/js/composer.js index dc2b47bf582..1d5b75bbbab 100644 --- a/addons/mail/static/src/js/composer.js +++ b/addons/mail/static/src/js/composer.js @@ -30,6 +30,9 @@ var Composer = Widget.extend({ this._super.apply(this, arguments); this.options = _.defaults(options || {}, { context: {}, + input_baseline: 18, + input_max_height: 150, + input_min_height: 28, mention_delimiter: '@', mention_min_length: 2, mention_typing_speed: 400, @@ -56,7 +59,7 @@ var Composer = Widget.extend({ this.$mention_partner_tags = this.$('.o_composer_mentioned_partners'); this.$mention_dropdown = this.$('.o_composer_mention_dropdown'); this.$input = this.$('.o_composer_input'); - this.$input.focus(); + this.resize_input(); // Attachments $(window).on(this.fileupload_id, this.on_attachment_loaded); @@ -107,6 +110,7 @@ var Composer = Widget.extend({ // Empty input, selected partners and attachments self.$input.val(''); + self.resize_input(); self.set('mention_selected_partners', []); self.set('attachment_ids', []); @@ -114,6 +118,19 @@ var Composer = Widget.extend({ }); }, + /** + * Resizes the textarea according to its scrollHeight + * @param {Boolean} [force_resize] if not true, only reset the size if empty + */ + resize_input: function (force_resize) { + if (this.$input.val() === '') { + this.$input.css('height', this.options.input_min_height); + } else if (force_resize) { + var height = this.$input.prop('scrollHeight') + this.options.input_baseline; + this.$input.css('height', Math.min(this.options.input_max_height, height)); + } + }, + // Events on_click_add_attachment: function () { this.$('input.o_form_input_file').click(); @@ -125,6 +142,13 @@ var Composer = Widget.extend({ this.$input.focus(); }, + /** + * Send the message on ENTER, but go to new line on SHIFT+ENTER + */ + prevent_send: function (event) { + return event.shiftKey; + }, + on_keydown: function (event) { switch(event.which) { // UP, DOWN: prevent moving cursor if navigation in mention propositions @@ -141,9 +165,13 @@ var Composer = Widget.extend({ break; // ENTER: submit the message only if the dropdown mention proposition is not displayed case $.ui.keyCode.ENTER: - event.preventDefault(); - if (!this.get('mention_partners').length) { + if (this.get('mention_partners').length) { + event.preventDefault(); + } else if (!this.prevent_send(event)) { + event.preventDefault(); this.send_message(); + } else { + this.resize_input(true); } break; } @@ -174,6 +202,7 @@ var Composer = Widget.extend({ } else { this.set('mention_partners', []); // close the dropdown } + this.resize_input(); } }, diff --git a/addons/mail/static/src/less/chatter.less b/addons/mail/static/src/less/chatter.less index 143bcbcfcbb..b0eda543c85 100644 --- a/addons/mail/static/src/less/chatter.less +++ b/addons/mail/static/src/less/chatter.less @@ -29,6 +29,8 @@ .o_composer_input { width: 100%; + .box-sizing(content-box); + resize: vertical; margin-bottom: 5px; } } diff --git a/addons/mail/static/src/less/composer.less b/addons/mail/static/src/less/composer.less index a53ffd34f70..f44d8b381d4 100644 --- a/addons/mail/static/src/less/composer.less +++ b/addons/mail/static/src/less/composer.less @@ -1,3 +1,7 @@ +.o_composer .o_composer_input { + resize: none; +} + .o_composer_mentioned_partners, .o_composer_attachments_list { margin-top: 5px; text-align: justify; diff --git a/addons/mail/static/src/xml/chatter.xml b/addons/mail/static/src/xml/chatter.xml index 72a1c7aaeae..17f4c51749f 100644 --- a/addons/mail/static/src/xml/chatter.xml +++ b/addons/mail/static/src/xml/chatter.xml @@ -52,11 +52,6 @@ - - -