From 6b7e20da3fd456821863228cc5121152e047b79d Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Mon, 15 Jun 2020 07:39:51 +0000
Subject: [PATCH] [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;