[FIX] mail: "is typing..." notification sticky top for DESC threads

Before this commit, the 'is typing...' notification bar was sticky
to the bottom of the thread, independently of the ASC or DESC mode
order of threads.

This is okay for ASC, but not for DESC: it should stick to the
visible top of the thread for DESC.

As a result, this notification bar was always at the top of the
thread, without the 'sticky' behaviour:

        +--------[top]--------+
        |   X is typing...    |
        |                     |
        |  (newer messages)   |
        |                     |
        |- - - - - - - - - - -|   <---- visible top
        |                     |
        | ...                 |
        | message i + 1       |
        | message i           |
        | ...                 |
        |                     |
        |- - - - - - - - - - -|   <---- visible bottom
        |                     |
        |  (older messages)   |
        |                     |
        +------[bottom]-------+

With this commit, the 'is typing...' notification bar sticks
to the visible top of DESC threads:

        +--------[top]--------+
        |                     |
        |  (newer messages)   |
        |                     |
        |- - - - - - - - - - -|   <---- visible top
        |   X is typing...    |
        | ...                 |
        | message i + 1       |
        | message i           |
        | ...                 |
        |                     |
        |- - - - - - - - - - -|   <---- visible bottom
        |                     |
        |  (older messages)   |
        |                     |
        +------[bottom]-------+
This commit is contained in:
Alexandre Kühn
2018-08-21 16:57:51 +02:00
parent 7e7e72edfd
commit 4fa071339a
2 changed files with 19 additions and 7 deletions
+9 -2
View File
@@ -3,7 +3,7 @@
text-align: center;
}
.o_mail_thread_content_asc, .o_mail_thread_content_desc {
.o_mail_thread_content {
display: flex;
flex-direction: column;
min-height: 100%;
@@ -19,11 +19,18 @@
.o_thread_typing_notification_bar {
flex: 0, 0, 20px;
@include o-position-sticky($bottom: 0px);
@include o-transparent-background-color(0.75, white);
padding: 5px;
text-align: center;
color: gray('600');
&.o_thread_order_asc {
@include o-position-sticky($bottom: 0px);
}
&.o_thread_order_asc {
@include o-position-sticky($top: 0px);
}
}
.o_thread_tooltip_container {
+10 -5
View File
@@ -167,7 +167,7 @@
ASC Order
-->
<t t-name="mail.widget.Thread.Content.ASC">
<div class="o_mail_thread_content_asc">
<div class="o_mail_thread_content">
<t t-if="options.displayLoadMore" t-call="mail.widget.Thread.LoadMore"/>
<t t-call="mail.widget.Thread.Messages"/>
<t t-if="options.displayBottomThreadFreeSpace">
@@ -196,7 +196,7 @@
-->
<t t-name="mail.widget.Thread.Content.DESC">
<div class="o_mail_thread_content_desc">
<div class="o_mail_thread_content">
<t t-if="options.messagesSeparatorPosition == 'top'" t-call="mail.MessagesSeparator"/>
<t t-set="messages" t-value="messages.slice().reverse()"/>
<t t-if="thread.hasTypingNotification()" t-call="mail.widget.Thread.TypingNotificationBar"/>
@@ -209,9 +209,14 @@
@param {mail.model.AbstractThread} thread
-->
<t t-name="mail.widget.Thread.TypingNotificationBar">
<div class="o_thread_typing_notification_free_space" t-if="options.displayOrder === ORDER.ASC"/>
<div class="o_thread_typing_notification_bar"/>
<div class="o_thread_typing_notification_free_space" t-if="options.displayOrder === ORDER.DESC"/>
<t t-if="options.displayOrder === ORDER.ASC">
<div class="o_thread_typing_notification_free_space"/>
<div class="o_thread_typing_notification_bar o_thread_order_asc"/>
</t>
<t t-else="">
<div class="o_thread_typing_notification_free_space"/>
<div class="o_thread_typing_notification_bar o_thread_order_desc"/>
</t>
</t>
<!--