From 6b7e20da3fd456821863228cc5121152e047b79d Mon Sep 17 00:00:00 2001 From: xO-Tx Date: Mon, 15 Jun 2020 07:39:51 +0000 Subject: [PATCH 1/5] [IMP] mail : improve emoji widget code to ease overrides This commit attempts to improve emoji widget css and code to make it easily overridable by other modules. This is done in preparation for extension by the SmsWidget that will enable the emojis support. To improve the emoji widget, the following changes have been made * remove the spacing after emoji fields by setting widget dropdown height to 0 (emoji dropdown has relative position + (height > 0) which leaves an empty space after widget fields); * hide Emoji widget when field has "invisible modifier"; * move the code that adds the emoji dropdown to another method, allowing to better understand code organization; Task ID-2224393 PR #49096 --- .../mail/static/src/js/text_emojis_fields.js | 59 +++++++++++-------- addons/mail/static/src/scss/emojis.scss | 9 +++ 2 files changed, 42 insertions(+), 26 deletions(-) diff --git a/addons/mail/static/src/js/text_emojis_fields.js b/addons/mail/static/src/js/text_emojis_fields.js index 1ef817faf08..21a94032168 100644 --- a/addons/mail/static/src/js/text_emojis_fields.js +++ b/addons/mail/static/src/js/text_emojis_fields.js @@ -24,34 +24,10 @@ var FieldEmojiCommon = { }, /** - * This will add an emoji button that shows the emojis selection dropdown. - * - * We use 'on_attach_callback' because we need the element to be attached to the form first. - * That's because the $emojisIcon element needs to be rendered outside of this $el - * (which is an text element, that can't 'contain' any other elements). - * * @override */ on_attach_callback: function () { - if (!this.$emojisIcon) { - this.$emojisIcon = $(QWeb.render('mail.EmojisDropdown', {widget: this})); - this.$emojisIcon.find('.o_mail_emoji').on('click', this._onEmojiClick.bind(this)); - - if (this.$el.filter('span.o_field_translate').length) { - // multi-languages activated, place the button on the left of the translation button - this.$emojisIcon.addClass('o_mail_emojis_dropdown_translation'); - } - if (this.$el.filter('textarea').length) { - this.$emojisIcon.addClass('o_mail_emojis_dropdown_textarea'); - } - this.$el.last().after(this.$emojisIcon); - } - - if (this.mode === 'edit') { - this.$emojisIcon.show(); - } else { - this.$emojisIcon.hide(); - } + this._attachEmojisDropdown(); }, //-------------------------------------------------------------------------- @@ -122,6 +98,37 @@ var FieldEmojiCommon = { */ _triggerOnchange: function () { this.$input.trigger('change'); + }, + + /** + * This will add an emoji button that shows the emojis selection dropdown. + * + * Should be used inside 'on_attach_callback' because we need the element to be attached to the form first. + * That's because the $emojisIcon element needs to be rendered outside of this $el + * (which is an text element, that can't 'contain' any other elements). + * + * @private + */ + _attachEmojisDropdown: function () { + if (!this.$emojisIcon) { + this.$emojisIcon = $(QWeb.render('mail.EmojisDropdown', {widget: this})); + this.$emojisIcon.find('.o_mail_emoji').on('click', this._onEmojiClick.bind(this)); + + if (this.$el.filter('span.o_field_translate').length) { + // multi-languages activated, place the button on the left of the translation button + this.$emojisIcon.addClass('o_mail_emojis_dropdown_translation'); + } + if (this.$el.filter('textarea').length) { + this.$emojisIcon.addClass('o_mail_emojis_dropdown_textarea'); + } + this.$el.last().after(this.$emojisIcon); + } + + if (this.mode === 'edit') { + this.$emojisIcon.show(); + } else { + this.$emojisIcon.hide(); + } } }; @@ -138,6 +145,6 @@ var FieldCharEmojis = basicFields.FieldChar.extend(MailEmojisMixin, FieldEmojiCo registry.add('text_emojis', FieldTextEmojis); registry.add('char_emojis', FieldCharEmojis); -return {FieldTextEmojis: FieldTextEmojis, FieldCharEmojis: FieldCharEmojis}; +return {FieldTextEmojis: FieldTextEmojis, FieldCharEmojis: FieldCharEmojis, FieldEmojiCommon: FieldEmojiCommon}; }); diff --git a/addons/mail/static/src/scss/emojis.scss b/addons/mail/static/src/scss/emojis.scss index 1a686e0fae7..f85c0141565 100644 --- a/addons/mail/static/src/scss/emojis.scss +++ b/addons/mail/static/src/scss/emojis.scss @@ -17,6 +17,15 @@ $o-mail-emoji-height: 2rem; } } +.o_form_view { + // Emojis widgets should hide the emoji dropdown button when the field is invisible. + // This is necessary because the button is added *after* the main element (and not inside) + // (see '_attachEmojisDropdown' for more details) + .o_invisible_modifier + .o_mail_add_emoji{ + display: none !important; + } +} + .o_mail_emojis_dropdown { height: $o-mail-emoji-height; width: 40px; From 7a253beab2e2bb3a8eab02fd6d538b4284a747cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thibault=20Delavall=C3=A9e?= Date: Tue, 11 Aug 2020 13:31:25 +0000 Subject: [PATCH 2/5] [REF] mail: split emoji files to ease inheritance Purpose is to clearly distinguish * common: holding common code for emojis-enabled fields; * text emoji field: support of emojis in text fields; * char emoji field: support of emojis in char fields; Task ID-2224393 PR #49096 --- addons/mail/static/src/js/field_char_emojis.js | 18 ++++++++++++++++++ ...emojis_fields.js => field_emojis_common.js} | 18 ++---------------- addons/mail/static/src/js/field_text_emojis.js | 18 ++++++++++++++++++ addons/mail/views/assets.xml | 4 +++- 4 files changed, 41 insertions(+), 17 deletions(-) create mode 100644 addons/mail/static/src/js/field_char_emojis.js rename addons/mail/static/src/js/{text_emojis_fields.js => field_emojis_common.js} (86%) create mode 100644 addons/mail/static/src/js/field_text_emojis.js diff --git a/addons/mail/static/src/js/field_char_emojis.js b/addons/mail/static/src/js/field_char_emojis.js new file mode 100644 index 00000000000..012a68c2ead --- /dev/null +++ b/addons/mail/static/src/js/field_char_emojis.js @@ -0,0 +1,18 @@ +odoo.define('mail.field_char_emojis', function (require) { +"use strict"; + +var basicFields = require('web.basic_fields'); +var registry = require('web.field_registry'); +var FieldEmojiCommon = require('mail.field_emojis_common'); +var MailEmojisMixin = require('mail.emoji_mixin'); + +/** + * Extension of the FieldChar that will add emojis support + */ +var FieldCharEmojis = basicFields.FieldChar.extend(MailEmojisMixin, FieldEmojiCommon); + +registry.add('char_emojis', FieldCharEmojis); + +return FieldCharEmojis; + +}); diff --git a/addons/mail/static/src/js/text_emojis_fields.js b/addons/mail/static/src/js/field_emojis_common.js similarity index 86% rename from addons/mail/static/src/js/text_emojis_fields.js rename to addons/mail/static/src/js/field_emojis_common.js index 21a94032168..79215ac7329 100644 --- a/addons/mail/static/src/js/text_emojis_fields.js +++ b/addons/mail/static/src/js/field_emojis_common.js @@ -1,10 +1,9 @@ -odoo.define('mail.text_emojis_field', function (require) { +odoo.define('mail.field_emojis_common', function (require) { "use strict"; var basicFields = require('web.basic_fields'); var core = require('web.core'); var emojis = require('mail.emojis'); -var registry = require('web.field_registry'); var MailEmojisMixin = require('mail.emoji_mixin'); var _onEmojiClickMixin = MailEmojisMixin._onEmojiClick; var QWeb = core.qweb; @@ -132,19 +131,6 @@ var FieldEmojiCommon = { } }; -/** - * Extension of the FieldText that will add emojis support - */ -var FieldTextEmojis = basicFields.FieldText.extend(MailEmojisMixin, FieldEmojiCommon); - -/** - * Extension of the FieldChar that will add emojis support - */ -var FieldCharEmojis = basicFields.FieldChar.extend(MailEmojisMixin, FieldEmojiCommon); - -registry.add('text_emojis', FieldTextEmojis); -registry.add('char_emojis', FieldCharEmojis); - -return {FieldTextEmojis: FieldTextEmojis, FieldCharEmojis: FieldCharEmojis, FieldEmojiCommon: FieldEmojiCommon}; +return FieldEmojiCommon; }); diff --git a/addons/mail/static/src/js/field_text_emojis.js b/addons/mail/static/src/js/field_text_emojis.js new file mode 100644 index 00000000000..8ed14ecfa03 --- /dev/null +++ b/addons/mail/static/src/js/field_text_emojis.js @@ -0,0 +1,18 @@ +odoo.define('mail.field_text_emojis', function (require) { +"use strict"; + +var basicFields = require('web.basic_fields'); +var registry = require('web.field_registry'); +var FieldEmojiCommon = require('mail.field_emojis_common'); +var MailEmojisMixin = require('mail.emoji_mixin'); + +/** + * Extension of the FieldText that will add emojis support + */ +var FieldTextEmojis = basicFields.FieldText.extend(MailEmojisMixin, FieldEmojiCommon); + +registry.add('text_emojis', FieldTextEmojis); + +return FieldTextEmojis; + +}); diff --git a/addons/mail/views/assets.xml b/addons/mail/views/assets.xml index 4b1877277e0..e3dd42c366e 100644 --- a/addons/mail/views/assets.xml +++ b/addons/mail/views/assets.xml @@ -38,7 +38,9 @@