From 569d35bc2dd3f2071c084e81331af0afad981202 Mon Sep 17 00:00:00 2001
From: xO-Tx <mou@odoo.com>
Date: Wed, 6 May 2020 11:54:37 +0000
Subject: [PATCH] [FIX] mail: fix emoji menu position/overflow issues (on
 mobile screen) and emojis display (for different OSes > browsers)

This commit attempts to fix the emoji widget position issue (only in enterprise versions) on mobile screen.
The emoji dropdown overflow & emojis font display issues (on mobile screen) are also fixed in this commit.

The following changes have been made :

1- Add css media-breakpoint to override widget position in small breakpoint and narrower.
2- Add position-relative + bottom css on widgets to avoid negative margins.
3- Set a max-width for the dropdown on mobile screen.
4- Add width/height on emoji icons to solve emojis position issue for some fonts (on different OSes > browsers).

This fix was made with the 'smallest possible changes' taking in consideration effects on :

- "text_emojis" widgets, since they use same class : "o_mail_emojis_dropdown".
- Emoji widget position in community (This fix won't break widget position in community version).

Task ID 2224393

closes odoo/odoo#52182

X-original-commit: 405e113e897b914eed41b34a66b5a7f740dcd336
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 addons/mail/static/src/scss/emojis.scss    | 23 +++++++++++++++++++---
 addons/mail/static/src/xml/text_emojis.xml |  2 +-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/addons/mail/static/src/scss/emojis.scss b/addons/mail/static/src/scss/emojis.scss
index fca7c5fdb5d..077dfd37d58 100644
--- a/addons/mail/static/src/scss/emojis.scss
+++ b/addons/mail/static/src/scss/emojis.scss
@@ -5,7 +5,8 @@
         .o_mail_emoji {
             cursor: pointer;
             padding: 2px;
-
+            width: 25px;
+            height: 25px;
             @include hover-focus() {
                 background-color: grey('100');
             }
@@ -17,7 +18,7 @@
     height: 25px;
     width: 40px;
     float: right;
-    margin-top: -33px;
+    bottom: 33px;
 
     * {
         outline: none!important;
@@ -37,5 +38,21 @@
 }
 
 .o_mail_emojis_dropdown_textarea{
-    margin-top: -40px;
+    bottom: 40px;
+}
+
+@include media-breakpoint-down(sm) {
+    // This will fix the position issue for emoji widget on mobile screen.
+    .o_mail_emojis_dropdown {
+        bottom: 50px;
+    }
+    .o_mail_emojis_dropdown_textarea {
+        bottom: 40px;
+    }
+    .o_mail_add_emoji {
+        .dropdown-menu {
+            // This will fix the overflow issue for emoji dropdown on mobile screen by setting a max-width.
+            max-width: 320px;
+        }
+    }
 }
diff --git a/addons/mail/static/src/xml/text_emojis.xml b/addons/mail/static/src/xml/text_emojis.xml
index 0343d86b7b7..56a74a54fd3 100644
--- a/addons/mail/static/src/xml/text_emojis.xml
+++ b/addons/mail/static/src/xml/text_emojis.xml
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
-    <div t-name="mail.EmojisDropdown" class="o_mail_emojis_dropdown o_mail_add_emoji dropdown">
+    <div t-name="mail.EmojisDropdown" class="o_mail_emojis_dropdown o_mail_add_emoji dropdown position-relative">
         <button class="btn btn-block dropdown-toggle px-3 py-1"
             type="button"
             data-toggle="dropdown"