[IMP] mail: mail_thread layout

This commit is contained in:
Aaron Bohy
2015-09-01 21:04:33 +02:00
parent 09b4893e12
commit 9b14aa4648
4 changed files with 48 additions and 32 deletions
@@ -32,10 +32,17 @@
.o_mail_chat_messages {
.o-flex(1, 0, 0);
overflow: auto;
.o-webclient-padding();
.o_mail_chat_help_message {
padding: 25px 0;
text-align: justify;
}
}
.o_mail_chat_composer_wrapper {
.o-flex(0, 0, auto);
.o-webclient-padding(@top: 10px, @bottom: 5px);
}
}
}
@@ -113,17 +120,9 @@
.o_mail_chat_content {
background-color: white;
.o_mail_chat_messages {
.o_mail_chat_help_message{
padding: 25px 0;
text-align: justify;
}
}
.o_mail_chat_composer_wrapper {
border-top: 1px solid @gray-lighter;
background-color: @gray-lighter;
.o-webclient-padding(@top: 10px, @bottom: 5px);
}
}
}
+36 -19
View File
@@ -20,27 +20,44 @@
}
}
}
.o_mail_thread_message_star, .o_mail_thread_message_needaction {
cursor: pointer;
opacity: 0.5;
&:hover {
opacity: 1;
@mail_thread_avatar_size: 50px;
.o_mail_thread_message {
.o-flex-display();
margin: 10px 0;
.o_mail_thread_message_avatar {
.o-flex(0, 0, @mail_thread_avatar_size);
margin-right: 10px;
@media (max-width: @screen-xs-max) {
.o-flex(0, 0, @mail_thread_avatar_size/2);
}
.o_mail_thread_avatar {
display: block;
margin: 0 auto; // center the avatar
max-width: @mail_thread_avatar_size;
@media (max-width: @screen-xs-max) {
max-width: @mail_thread_avatar_size/2;
}
}
}
}
.o_mail_thread_message_star.o_mail_message_starred {
color: gold;
}
.o_mail_thread_avatar {
width: 50px;
@media (max-width: @screen-xs-max) {
display: none;
.o_mail_thread_message_core {
.o-flex(1, 1, auto);
> p {
margin: 0 0 9px; // Required by the old design to override a general rule on p's
}
}
.o_mail_thread_message_star, .o_mail_thread_message_needaction {
cursor: pointer;
opacity: 0.5;
&:hover {
opacity: 1;
}
}
.o_mail_thread_message_star.o_mail_message_starred {
color: gold;
}
.o_mail_redirect {
cursor: pointer;
}
}
.o_mail_thread_message_core {
padding: 5px;
}
.o_mail_redirect {
cursor: pointer;
}
}
@@ -66,7 +66,7 @@
</div>
<!-- Content -->
<div class="o_mail_chat_content">
<div class="container-fluid o_mail_chat_messages"/>
<div class="o_mail_chat_messages"/>
<div class="o_mail_chat_composer_wrapper"/>
</div>
</div>
+4 -4
View File
@@ -89,7 +89,7 @@
<t t-name="mail.Thread.messages">
<t t-set="current_day" t-value="0"/>
<t t-foreach="widget.get('messages')" t-as="message">
<div t-if="current_day != message.date.split(' ')[0]" class="row o_mail_thread_date_separator">
<div t-if="current_day != message.date.split(' ')[0]" class="o_mail_thread_date_separator">
<div class="o_mail_thread_date_wrapper">
<div class="o_mail_thread_date_separator_title">
<t t-raw="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LL')"/>
@@ -97,14 +97,14 @@
</div>
<t t-set="current_day" t-value="message.date.split(' ')[0]"/>
</div>
<div class="row o_mail_thread_message" t-att-data-message-id="message.id">
<div class="col-md-1 col-sm-1 o_mail_thread_message_avatar">
<div class="o_mail_thread_message" t-att-data-message-id="message.id">
<div class="o_mail_thread_message_avatar">
<img t-if="message.message_type == 'email' &amp;&amp; (!message.author_id || !message.author_id[0]) &amp;&amp; message.email_from" src="/mail/static/src/img/email_icon.png" alt="avatar" class="o_mail_thread_avatar img-rounded"/>
<img t-if="message.message_type == 'email' &amp;&amp; (message.author_id &amp;&amp; message.author_id[0]) &amp;&amp; !message.email_from" t-att-src="'/web/image/res.partner/'+message.author_id[0]+'/image_small'" class="o_mail_thread_avatar img-rounded"/>
<img t-if="message.message_type !== 'email' &amp;&amp; (message.author_id &amp;&amp; message.author_id[0])" t-att-src="'/web/image/res.partner/'+message.author_id[0]+'/image_small'" class="o_mail_thread_avatar img-rounded"/>
<img t-if="message.message_type !== 'email' &amp;&amp; (!message.author_id || !message.author_id[0])" src="/mail/static/src/img/smiley/avatar.jpg" class="o_mail_thread_avatar img-rounded"/>
</div>
<div t-att-class="'col-md-11 col-sm-11 o_mail_thread_message_core ' + 'o_mail_thread_message_type_' + message.message_type + ' ' + (message.is_note ? 'o_mail_thread_message_subtype_note' : '')">
<div t-att-class="'o_mail_thread_message_core ' + 'o_mail_thread_message_type_' + message.message_type + ' ' + (message.is_note ? 'o_mail_thread_message_subtype_note' : '')">
<!-- actions -->
<span class="pull-right">
<i t-if="message.is_needaction &amp;&amp; widget.options.display_needaction_button" class="fa fa-check o_mail_thread_message_needaction" t-att-data-message-id="message.id" t-att-title="_t('Mark as Done')"/>