From 03e7a99e91628350ff4cd4f060aef0a4dd032b15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Debauche=20St=C3=A9phane?= <std@odoo.com>
Date: Tue, 7 Jan 2020 09:59:18 +0000
Subject: [PATCH] [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 | 15 +++++++++++----
 addons/mail/static/src/scss/emojis.scss         | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/addons/mail/static/src/js/text_emojis_fields.js b/addons/mail/static/src/js/text_emojis_fields.js
index 1a30751c19c..1ef817faf08 100644
--- a/addons/mail/static/src/js/text_emojis_fields.js
+++ b/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');
     },
 
diff --git a/addons/mail/static/src/scss/emojis.scss b/addons/mail/static/src/scss/emojis.scss
index daa1cc38ace..fca7c5fdb5d 100644
--- a/addons/mail/static/src/scss/emojis.scss
+++ b/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;
+}