[IMP] mail : display mentions in green color in edit mode

When someone mentions another person in discuss/chat window, the
mentioned name was displayed just as a text, which may be unclear.  With
this commit, we display mentions with the same style as mentions in a
message.

To do that, the main idea is to change the input by a div with
contenteditable set to true.  This allows us to add <a>...</a> inside.

1 files changed, 39 insertions, 44 deletions

diff --git a/addons/mail/static/src/less/composer.less b/addons/mail/static/src/less/composer.less
index ec3b156af2a..9df25c895a3 100644
--- a/addons/mail/static/src/less/composer.less
+++ b/addons/mail/static/src/less/composer.less
@@ -10,7 +10,7 @@
         position: relative;
         background: white;
 
-        textarea, input {
+        input {
             border: none;
         }
     }
@@ -27,9 +27,15 @@
     }
 
     .o_composer {
-        .o_composer_input > textarea {
-            width: 100%;
-            resize: none;
+        .o_composer_input[contenteditable=true]:empty:before {
+            content: attr(placeholder);
+            opacity: 0.75;
+        }
+        .o_composer_input {
+            display: inline-block;
+            height: 100%;
+            white-space: pre-wrap;
+            word-break: break-all;
         }
         .o_composer_mention_dropdown .o_mention_proposition > a {
             .o-text-overflow();
@@ -58,17 +64,16 @@
                 color: @odoo-brand-optional;
             }
         }
+    }
 
-        .o_mail_emoji_container {
-            padding: 0 @o-mail-chatter-gap @o-mail-chatter-gap 0;
-            border: 1px solid @gray-lighter-dark;
-            border-width: 1px 0 0 0;
-            background-color: @gray-lighter;
+   .o_mail_emoji_container {
+        padding: 0 @o-mail-chatter-gap @o-mail-chatter-gap 0;
+        border: 1px solid @gray-lighter-dark;
+        background-color: @gray-lighter;
 
-            .o_mail_emoji {
-                margin: @o-mail-chatter-gap 0 0 @o-mail-chatter-gap;
-                cursor: pointer; // only in the popover
-            }
+        .o_mail_emoji {
+            margin: @o-mail-chatter-gap 0 0 @o-mail-chatter-gap;
+            cursor: pointer; // only in the popover
         }
     }
 
@@ -94,19 +99,13 @@
 
         .o_composer {
             border-radius: 2px;
-            textarea {
-                padding-right: @grid-gutter-width; // avoid overlaps betwenn textarea and o_composer_button_full_composer
-            }
 
-            .o_mail_emoji_container {
-                margin: 0 -@o-mail-chatter-gap;
-            }
         }
 
         .o_composer, .o_composer_subject {
             border: 1px solid @gray-lighter-dark;
 
-            textarea, input {
+            input {
                 padding: 0 0 @o-mail-chatter-gap;
                 border: none;
             }
@@ -118,6 +117,9 @@
 
         .o_chatter_composer_tools {
             border-top: 1px solid @gray-lighter-dark;
+            @media (max-width: @screen-xs-max) {
+                margin-top: 10px;
+            }
         }
 
         &:not(.o_chat_inline_composer) {
@@ -136,26 +138,26 @@
 
         &.o_chat_inline_composer {
             .o_composer_container {
-                .o-flex(1, 0, auto);
+                .o-flex(1, 1, auto);
             }
             .o_composer {
+                display: flex;
+                min-height: 40px;
                 padding: @o-mail-chatter-gap @o-mail-chatter-gap 0 @o-mail-chatter-gap;
                 border-radius: 2px 0 0 2px;
                 border-right-width: 0;
-
-                .o_mail_emoji_container {
-                    text-align: right;
-                    border-right-width: 1px;
-                }
+            }
+            .o_mail_emoji_container {
+                text-align: right;
+                border-width: 1px;
             }
             .o_composer_input {
-                .o-flex-display();
                 .o-flex-flow(row, wrap);
             }
             .o_composer_text_field {
                 .o-flex(1, 1, 50%);
-                margin: 0;
-                padding: 0;
+                margin: -4px 7px 5px 0px;
+                padding: 2.5px 0px 0px 5px;
             }
             .o_chatter_composer_tools {
                 .o-flex(0, 1, auto);
@@ -187,32 +189,25 @@
             border-top: 1px solid @gray-lighter-dark;
             width: 100%;
         }
-        .o_composer {
-            .o_mail_emoji_container {
-                .o-position-absolute(auto, 0, 100%, 0);
-                border-bottom-width: 1px;
-            }
+        .o_mail_emoji_container {
+            .o-position-absolute(auto, 0, 100%, 0);
+            border-bottom-width: 1px;
         }
         .o_composer_input {
-            .o-flex-display();
             .o-flex-flow(row, nowrap);
 
-            textarea.o_composer_text_field {
-                .o-flex(1, 1, auto);
-            }
-
             .o_chatter_composer_tools {
                 .o-flex(0, 0, auto);
             }
-            @media (max-width: @screen-xs-max) {
-                .o_composer_button_send {
-                    display: inline-block;
-                }
-            }
         }
         .o_composer_button_send, .o_chatter_avatar {
             display: none;
         }
+        @media (max-width: @screen-xs-max) {
+            .o_composer_button_send {
+                display: inline-block;
+            }
+        }
     }
 }