[FIX] mail: fix composer style for chat windows

Revision on dd8e95cb1a12603940cc32a3d840b6097515df85

The intent of the commit above was to fix the style of the composer,
which was broken when turning the textarea input into a contenteditable
div. While fixing the style for the composer in Discuss or in the Chatter,
it misplaced the initial position of the caret in a chat window.

This commit fixes the issue on chat windows, while also improving the
previous fix.

Known issues:

    In a chat window with more messages than it could be displayed at once,
    when at the bottom of the thread, the line separator of the composer
    and the thread is off by 1 or 2 pixels (vertically).

    > Fixing this issue breaks a lot the alignment of items in the composer
      of Discuss and Chatter, so this small visual glitch is preferred.
This commit is contained in:
Alexandre Kühn
2018-05-04 17:23:36 +02:00
parent ac63dfc8f4
commit 0275c70f78
+6 -4
View File
@@ -2,7 +2,6 @@
position: relative;
.o-flex(0, 0, auto);
.o-flex-display();
margin: 1px 0;
border-top: none;
background: @gray-lighter;
@@ -37,10 +36,12 @@
cursor: text;
display: inline-block;
height: 100%;
padding: 0px 0px @o-mail-chatter-gap;
white-space: pre-wrap;
word-break: break-all;
}
.o_composer_text_field {
padding: 0 0 @o-mail-chatter-gap;
}
.o_composer_mention_dropdown .o_mention_proposition > a {
.o-text-overflow();
width: 100%;
@@ -147,7 +148,6 @@
.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;
}
@@ -159,6 +159,7 @@
.o-flex-flow(row, wrap);
}
.o_composer_text_field {
padding: @o-mail-chatter-gap;
.o-flex(1, 1, 50%);
}
.o_chatter_composer_tools {
@@ -171,8 +172,8 @@
.o_chatter_composer_tools {
border: none;
border-left: 1px solid @gray-lighter-dark;
padding-top: @o-mail-chatter-gap*0.5;
padding-left: @o-mail-chatter-gap*0.5;
.o-transform(translateY(-@o-mail-chatter-gap*0.5));
}
.o_composer_button_send {
@@ -196,6 +197,7 @@
border-bottom-width: 1px;
}
.o_composer_input {
padding: @o-mail-chatter-gap;
.o-flex-flow(row, nowrap);
.o_chatter_composer_tools {