[FIX] mail: various ui improvements

- display star/mark as read icon next to the message title instead on
  the far right
- display unstar all message in channel starred
- enable/disable the 'unstar all' and 'mark read' buttons depending on
  the number of messages in the corresponding channels
- display star on the left sidebar in 'squashed messages'
- tweaks to padding in client action
- display hash in channel name in lighter tone
- light opacity in sidebar
- star icon in message sidebar is clickable + small less refactoring
- message sidebar is aligned with the message now
- messages are not squashed in inbox/starred
This commit is contained in:
Géry Debongnie
2015-11-09 16:36:52 +01:00
parent 2bb55ecb04
commit 622bd038e4
8 changed files with 102 additions and 44 deletions
+7
View File
@@ -177,6 +177,13 @@ class Message(models.Model):
self = self.sudo()
return self.write({'needaction_partner_ids': [(3, pid) for pid in partner_ids]})
@api.model
def unstar_all(self):
partner_id = self.env.user.partner_id.id
starred_messages = self.search([('starred_partner_ids', 'in', partner_id)])
starred_messages.write({'starred_partner_ids': [(3, partner_id)]})
@api.multi
def set_message_starred(self, starred):
""" Set messages as (un)starred. Technically, the notifications related
+9 -3
View File
@@ -213,9 +213,6 @@ function make_channel (data, options) {
channel.name = data.direct_partner[0].name;
channel.status = data.direct_partner[0].im_status;
}
if ((channel.type === 'public') || (channel.type === 'private')) {
channel.name = '#' + channel.name;
}
return channel;
}
@@ -368,6 +365,15 @@ var chat_manager = {
});
},
unstar_all: function () {
MessageModel.call('unstar_all', [[]], {}).then(function (ids) {
_.each(messages, function (msg) {
remove_message_from_channel("channel_starred", msg);
chat_manager.bus.trigger('update_message', msg);
});
});
},
get_channels: function () {
return _.clone(channels);
},
+23 -1
View File
@@ -168,6 +168,7 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
self.$('.o_mail_chat_sidebar').slideToggle(200);
});
this.$buttons.on('click', '.o_mail_chat_button_mark_read', chat_manager.mark_all_as_read);
this.$buttons.on('click', '.o_mail_chat_button_unstar_all', chat_manager.unstar_all);
this.thread.on('redirect', this, this.on_redirect);
@@ -319,6 +320,10 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
.find('.o_mail_chat_button_mark_read')
.toggle(channel.id === "channel_inbox");
this.$buttons
.find('.o_mail_chat_button_unstar_all')
.toggle(channel.id === "channel_starred");
this.update_cp();
this.action.context.active_id = channel.id;
@@ -367,6 +372,7 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
display_load_more: !chat_manager.all_history_loaded(this.channel, this.domain),
display_needactions: this.channel.display_needactions,
channel_id: this.channel.id,
squash_close_messages: this.channel.type !== 'static',
};
},
@@ -374,9 +380,23 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
var self = this;
return chat_manager.get_messages({channel_id: this.channel.id, domain: this.domain}).then(function(result) {
self.thread.render(result, self.get_thread_rendering_options());
self.update_button_status(result.length === 0);
});
},
update_button_status: function (disabled) {
if (this.channel.id === "channel_inbox") {
this.$buttons
.find('.o_mail_chat_button_mark_read')
.toggleClass('disabled', disabled);
}
if (this.channel.id === "channel_starred") {
this.$buttons
.find('.o_mail_chat_button_unstar_all')
.toggleClass('disabled', disabled);
}
},
load_more_messages: function () {
var self = this;
var oldest_msg_id = this.$('.o_thread_message').first().data('messageId');
@@ -493,7 +513,9 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
(current_channel_id === "channel_inbox" && !message.is_needaction)) {
chat_manager.get_messages({channel_id: this.channel.id, domain: this.domain}).then(function (messages) {
var options = self.get_thread_rendering_options();
self.thread.remove_message_and_render(message.id, messages, options);
self.thread.remove_message_and_render(message.id, messages, options).then(function () {
self.update_button_status(messages.length === 0);
});
});
} else if (_.contains(message.channel_ids, current_channel_id)) {
this.fetch_and_render_thread();
+7 -1
View File
@@ -46,6 +46,7 @@ var Thread = Widget.extend({
default_username: _t('Anonymous'),
display_document_link: true,
display_avatar: true,
squash_close_messages: true,
});
},
@@ -54,6 +55,7 @@ var Thread = Widget.extend({
if (this.options.display_order === ORDER.DESC) {
msgs.reverse();
}
options = _.extend({}, this.options, options);
// 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
@@ -63,6 +65,8 @@ var Thread = Widget.extend({
prev_msg.message_type !== 'comment' || msg.message_type !== 'comment' ||
(prev_msg.author_id[0] !== msg.author_id[0])) {
msg.display_author = true;
} else {
msg.display_author = !options.squash_close_messages;
}
prev_msg = msg;
});
@@ -131,10 +135,12 @@ var Thread = Widget.extend({
*/
remove_message_and_render: function (message_id, messages, options) {
var self = this;
var done = $.Deferred();
this.$('.o_thread_message[data-message-id=' + message_id + ']').fadeOut({
done: function () { self.render(messages, options); },
done: function () { self.render(messages, options); done.resolve();},
duration: 200,
});
return done;
},
/**
@@ -27,11 +27,12 @@
.o_mail_sidebar_title {
.o-flex-display();
padding: 5px 8px 5px @odoo-horizontal-padding;
padding: 12px 8px 5px @odoo-horizontal-padding;
align-items: center;
justify-content: space-between;
h4 {
text-transform: uppercase;
margin-bottom: 5px;
}
.o_add {
padding: 6px;
@@ -39,7 +40,7 @@
}
.o_mail_chat_channel_item {
width: 100%;
padding: 5px 8px 5px 1.5*@odoo-horizontal-padding; // larger padding-left than titles
padding: 2px 8px 2px 1.5*@odoo-horizontal-padding; // larger padding-left than titles
> .badge {
margin: 0;
}
@@ -110,6 +111,7 @@
.o_mail_chat_sidebar {
background-color: darken(@gray, 8%);
color: lighten(@gray, 50%);
opacity: 0.9;
.o_mail_chat_channel_item {
overflow: hidden;
@@ -125,6 +127,11 @@
&.o_active {
background-color: darken(@gray, 15%);
}
.o_mail_hash {
opacity: 0.6
}
.o_mail_partner_unpin {
opacity: 0;
&:hover {
+34 -28
View File
@@ -29,19 +29,50 @@
.o_thread_message_sidebar {
.o-flex(0, 0, @mail-thread-avatar-size);
margin-right: 10px;
margin-top: 2px;
text-align: center;
font-size: smaller;
@media (max-width: @screen-xs-max) {
margin-top: 4px;
font-size: x-small;
}
.o_thread_message_avatar {
max-width: @mail-thread-avatar-size;
}
.o_thread_message_side_date {
margin-left: -5px;
}
.o_thread_message_star {
margin-right: -5px;
}
.o_thread_message_side_date {
font-size: smaller;
opacity: 0;
}
}
&:hover .o_thread_message_side_date {
opacity: @mail-thread-side-date-opacity;
i.o_thread_message_star, i.o_thread_message_needaction {
cursor: pointer;
opacity: 0;
&.fa-star {
opacity: @mail-thread-icon-opacity;
color: gold;
}
}
&:hover, &.o_thread_selected_message {
.o_thread_message_side_date {
opacity: @mail-thread-side-date-opacity;
}
i.o_thread_message_star, i.o_thread_message_needaction {
opacity: @mail-thread-icon-opacity;
&:hover {
opacity: 1;
}
}
}
.o_mail_redirect {
@@ -76,32 +107,7 @@
}
.o_thread_message_star, .o_thread_message_needaction {
cursor: pointer;
opacity: 0;
padding: 4px;
&.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;
}
}
}
&.o_thread_selected_message {
.o_thread_message_side_date {
opacity: @mail-thread-side-date-opacity;
}
.o_thread_message_star, .o_thread_message_needaction {
opacity: @mail-thread-icon-opacity;
}
}
}
+2 -1
View File
@@ -73,7 +73,7 @@
<t t-foreach="channels" t-as="channel">
<div t-if="channel.type === channel_type" class="o_mail_chat_channel_item" t-att-data-channel-id="channel.id">
<span><i t-if="display_status" t-att-class="'o_user_status fa ' + (channel.status == 'online' ? 'fa-circle' : 'fa-circle-o')"/></span>
<t t-esc="channel.name"/>
<span t-if="display_hash" class="o_mail_hash">#</span> <t t-esc="channel.name"/>
<span class="fa fa-times pull-right o_mail_partner_unpin" t-att-title="_t('Close')" t-att-data-channel-id="channel.id"/>
</div>
</t>
@@ -90,6 +90,7 @@
<button type="button" class="btn btn-primary btn-sm o_mail_chat_button_invite" t-att-title='_t("Invite people")'>Invite</button>
<button type="button" class="btn btn-primary btn-sm o_mail_chat_button_detach hidden-xs" t-att-title='_t("Detach the conversation")'>Detach</button>
<button type="button" class="btn btn-primary btn-sm o_mail_chat_button_mark_read" t-att-title='_t("Mark all as read")'>Mark all read</button>
<button type="button" class="btn btn-primary btn-sm o_mail_chat_button_unstar_all" t-att-title='_t("Unstar all messages")'>Unstar all</button>
<button type="button" class="btn btn-default btn-sm o_mail_chat_button_unsubscribe" t-att-title='_t("Unsubscribe from channel")'>Unsubscribe</button>
<button type="button" class="btn btn-default btn-sm o_mail_chat_button_settings" t-att-title='_t("Open channel settings")'>Settings</button>
</div>
+11 -8
View File
@@ -48,16 +48,11 @@
<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>
<i t-if="!message.display_author &amp;&amp; options.display_stars &amp;&amp; message.message_type != 'notification'"
t-att-class="'fa 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')"/>
</div>
<div class="o_thread_message_core">
<span class="pull-right">
<i t-if="message.is_needaction &amp;&amp; options.display_needactions"
class="fa fa-check o_thread_message_needaction"
t-att-data-message-id="message.id" t-att-title="_t('Mark as Done')"/>
<i t-if="options.display_stars &amp;&amp; message.message_type != 'notification'"
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 t-if="message.display_author" class="o_mail_info">
<t t-if="message.is_note">
Note by
@@ -86,6 +81,14 @@
<t t-if="message.origin_id &amp;&amp; (message.origin_id !== options.channel_id)">
(from <a class="o_channel_redirect" t-att-data-oe-id="message.origin_id" href="#"><t t-esc="message.origin_name"/>)</a>
</t>
<span>
<i t-if="options.display_stars &amp;&amp; message.message_type != 'notification'"
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')"/>
<i t-if="message.is_needaction &amp;&amp; options.display_needactions"
class="fa fa-check o_thread_message_needaction"
t-att-data-message-id="message.id" t-att-title="_t('Mark as Done')"/>
</span>
</p>
<t t-if="message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0">
<t t-call="mail.ChatThread.MessageTracking"/>