[FIX] mail: fix emojis button in multi-languages

When using emoji widget in a multi language environment, button for emoji
is displayed twice.

This is due to having in the widget both the input and a translation box
holding the translation button. Emoji button is incorrectly added to both
elements, which is fixed in this commit.

We also adjust vertical position so that button is aligned with the language
button.

Task #2168338

closes odoo/odoo#42827

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

addons/mail/static/src/js/text_emojis_fields.js

@@ -19,7 +19,7 @@ var FieldEmojiCommon = {
      */
     init: function () {
         this._super.apply(this, arguments);
-        this._triggerOnchange =_.throttle(this._triggerOnchange, 1000, {leading: false});
+        this._triggerOnchange = _.throttle(this._triggerOnchange, 1000, {leading: false});
         this.emojis = emojis;
     },
 
@@ -33,11 +33,18 @@ var FieldEmojiCommon = {
      * @override
      */
     on_attach_callback: function () {
-        var self = this;
         if (!this.$emojisIcon) {
             this.$emojisIcon = $(QWeb.render('mail.EmojisDropdown', {widget: this}));
             this.$emojisIcon.find('.o_mail_emoji').on('click', this._onEmojiClick.bind(this));
-            this.$el.after(this.$emojisIcon);
+
+            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') {
@@ -72,7 +79,7 @@ var FieldEmojiCommon = {
      */
     _onEmojiClick: function () {
         _onEmojiClickMixin.apply(this, arguments);
-        self._isDirty = true;
+        this._isDirty = true;
         this.$input.trigger('change');
     },
 

addons/mail/static/src/scss/emojis.scss

@@ -17,7 +17,7 @@
     height: 25px;
     width: 40px;
     float: right;
-    margin-top: -35px;
+    margin-top: -33px;
 
     * {
         outline: none!important;
@@ -28,3 +28,14 @@
         display: none;
     }
 }
+
+.o_mail_emojis_dropdown_translation {
+    // if the button is added to a text field with a button "language"
+    // add margin-right, so the emojis button is placed on the left of the
+    // language button
+    margin-right: 20px;
+}
+
+.o_mail_emojis_dropdown_textarea{
+    margin-top: -40px;
+}