[IMP] mail: thread: hide avatar, author and date of consecutive messages
... from the same author, written within 1 minute (restricted to comments). Also: - Display stars and needactions on hover only - Display the date of messages without avatar and info in the margin on hover - Add 'selected' state of messages (mainly for touch screens to replace hover) - Fix typo (msg_type -> message_type) on the computation of the avatar url
This commit is contained in:
Aaron Bohy
committed by
Géry Debongnie
Géry Debongnie
parent
2dfbaceaec
commit
4c7ab52a67
@@ -20,13 +20,20 @@ var Thread = Widget.extend({
|
||||
"click .o_mail_redirect": "on_click_redirect",
|
||||
"click .o_thread_show_more": "on_click_show_more",
|
||||
"click .o_thread_message_needaction": function (event) {
|
||||
event.stopPropagation();
|
||||
var message_id = $(event.currentTarget).data('message-id');
|
||||
this.trigger("mark_as_read", message_id);
|
||||
},
|
||||
"click .o_thread_message_star": function (event) {
|
||||
event.stopPropagation();
|
||||
var message_id = $(event.currentTarget).data('message-id');
|
||||
this.trigger("toggle_star_status", message_id);
|
||||
},
|
||||
"click .o_thread_message": function (event) {
|
||||
var selected = $(event.currentTarget).hasClass('o_thread_selected_message');
|
||||
this.$('.o_thread_message').removeClass('o_thread_selected_message');
|
||||
$(event.currentTarget).toggleClass('o_thread_selected_message', !selected);
|
||||
},
|
||||
},
|
||||
|
||||
init: function (parent, options) {
|
||||
@@ -46,6 +53,19 @@ var Thread = Widget.extend({
|
||||
if (this.options.display_order === ORDER.DESC) {
|
||||
msgs.reverse();
|
||||
}
|
||||
|
||||
// Hide avatar and info of a message if that message and the previous
|
||||
// one are both comments wrote by the same author at the same minute
|
||||
var prev_msg;
|
||||
_.each(msgs, function (msg) {
|
||||
if (!prev_msg || (Math.abs(moment(msg.date).diff(prev_msg.date)) > 60000) ||
|
||||
prev_msg.message_type !== 'comment' || msg.message_type !== 'comment' ||
|
||||
(prev_msg.author_id[0] !== msg.author_id[0])) {
|
||||
msg.display_author = true;
|
||||
}
|
||||
prev_msg = msg;
|
||||
});
|
||||
|
||||
this.$el.html(QWeb.render('mail.ChatThread', {
|
||||
messages: msgs,
|
||||
options: _.extend({}, this.options, options),
|
||||
@@ -78,7 +98,7 @@ var Thread = Widget.extend({
|
||||
// Compute the avatar_url
|
||||
if (msg.author_id && msg.author_id[0]) {
|
||||
msg.avatar_src = "/web/image/res.partner/" + msg.author_id[0] + "/image_small";
|
||||
} else if (msg.msg_type === 'email') {
|
||||
} else if (msg.message_type === 'email') {
|
||||
msg.avatar_src = "/mail/static/src/img/email_icon.png";
|
||||
} else {
|
||||
msg.avatar_src = "/mail/static/src/img/smiley/avatar.jpg";
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
@mail-thread-avatar-size: 36px;
|
||||
@mail-thread-icon-opacity: 0.6;
|
||||
@mail-thread-side-date-opacity: 0.6;
|
||||
|
||||
.o_mail_thread {
|
||||
.o_thread_show_more {
|
||||
@@ -22,18 +24,26 @@
|
||||
|
||||
.o_thread_message {
|
||||
.o-flex-display();
|
||||
margin: 10px 0;
|
||||
padding: 4px 0;
|
||||
|
||||
.o_thread_message_avatar {
|
||||
.o_thread_message_sidebar {
|
||||
.o-flex(0, 0, @mail-thread-avatar-size);
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
|
||||
.o_thread_message_avatar_img {
|
||||
display: block;
|
||||
margin: 0 auto; // center the avatar
|
||||
.o_thread_message_avatar {
|
||||
max-width: @mail-thread-avatar-size;
|
||||
}
|
||||
|
||||
.o_thread_message_side_date {
|
||||
font-size: smaller;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&:hover .o_thread_message_side_date {
|
||||
opacity: @mail-thread-side-date-opacity;
|
||||
}
|
||||
|
||||
|
||||
.o_thread_message_core {
|
||||
.o-flex(1, 1, auto);
|
||||
@@ -60,14 +70,36 @@
|
||||
|
||||
.o_thread_message_star, .o_thread_message_needaction {
|
||||
cursor: pointer;
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
opacity: 0;
|
||||
&.fa-star {
|
||||
opacity: @mail-thread-icon-opacity;
|
||||
color: gold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .o_thread_message_core {
|
||||
.o_thread_message_star, .o_thread_message_needaction {
|
||||
opacity: @mail-thread-icon-opacity;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top: 1px solid transparent;
|
||||
&.o_thread_selected_message {
|
||||
border-bottom: 1px solid @gray-lighter;
|
||||
border-top: 1px solid @gray-lighter;
|
||||
|
||||
.o_thread_message_side_date {
|
||||
opacity: @mail-thread-side-date-opacity;
|
||||
}
|
||||
|
||||
.o_thread_message_star, .o_thread_message_needaction {
|
||||
opacity: @mail-thread-icon-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,8 +32,11 @@
|
||||
|
||||
<t t-name="mail.ChatThread.Message">
|
||||
<div class="o_thread_message" t-att-data-message-id="message.id">
|
||||
<div t-if="options.display_avatar" class="o_thread_message_avatar">
|
||||
<img t-if="message.avatar_src" t-att-src="message.avatar_src" class="o_thread_message_avatar_img"/>
|
||||
<div t-if="options.display_avatar" class="o_thread_message_sidebar">
|
||||
<img t-if="message.avatar_src && message.display_author" t-att-src="message.avatar_src" class="o_thread_message_avatar"/>
|
||||
<span t-if="!message.display_author" t-att-title="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LLL')" class="o_thread_message_side_date">
|
||||
<t t-esc="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('hh:mm')"/>
|
||||
</span>
|
||||
</div>
|
||||
<div class="o_thread_message_core">
|
||||
<span class="pull-right">
|
||||
@@ -44,7 +47,7 @@
|
||||
t-att-class="'fa fa-lg o_thread_message_star ' + (message.is_starred ? 'fa-star' : 'fa-star-o')"
|
||||
t-att-data-message-id="message.id" t-att-title="_t('Mark as Todo')"/>
|
||||
</span>
|
||||
<p class="o_mail_info">
|
||||
<p t-if="message.display_author" class="o_mail_info">
|
||||
<t t-if="message.is_note">
|
||||
Note by
|
||||
</t>
|
||||
|
||||
Reference in New Issue
Block a user