odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[REF] Major refactoring of mail widgets (Thread and Wall). Thread display is now a self-contained widget; Thread view shows a thread, the wall shows several threads. Added the possibility to comment each thread in the wall. 

bzr revid: tde@openerp.com-20120223163236-ufn3s8qw3fewwkw1
This commit is contained in:
Thibault Delavallée 2012-02-23 17:32:36 +01:00
parent 44e6b0f079
commit d77a5ad0bf
3 changed files with 244 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
addons/mail/static/src/css/mail.css
View File

@ -1,39 +1,92 @@
/** ThreadView widget **/
/* Wall */
.oe_mail_main {
overflow: auto;
padding: 5px 5px 5px 5px;
}
.oe_mail_wall_main {
.oe_mail_wall {
overflow: auto;
padding: 5px 5px 5px 5px;
}
/* 2 columns view */
.oe_mail_main_left {
.oe_mail_wall_left {
float: left;
width: 65%;
}
.oe_mail_main_right {
.oe_mail_wall_right {
float: right;
width: 34%;
}
.oe_mail_wall_thread_content {
margin-left: 5%;
}
/* Thread */
.oe_mail_thread_main {
overflow: auto;
padding: 5px 5px 5px 5px;
}
/* Left-side CSS */
.oe_mail_actions {
margin-bottom: 10px;
}
.oe_mail_post_comment {
.oe_mail_followers {
margin-bottom: 10px;
}
.oe_mail_followers_action, .oe_mail_followers_display {
}
/* 2 columns view */
.oe_mail_thread_left {
float: left;
width: 65%;
}
.oe_mail_thread_right {
float: right;
width: 34%;
}
.oe_mail_button_follow, .oe_mail_button_unfollow, .oe_mail_button_followers {
width: 120px;
}
/* Subscribers */
.oe_mail_followers_vignette {
float: left;
width: 20%%;
}
.oe_mail_followers_vignette img {
width: 80%;
}
/* ThreadDisplay */
.oe_mail_thread {
}
.oe_mail_thread_act {
}
.oe_mail_thread_display {
}
.oe_mail_thread_msg, .oe_mail_thread_act {
white-space: normal;
margin-bottom: 5px;
}
.oe_mail_thread_msg:after, .oe_mail_thread_act:after {
content: "";
display: block;
clear: both;
}
.oe_mail_button_comment {
width: 150px;
}
@ -44,27 +97,10 @@
padding: 5px;
}
.oe_mail_action_comment {
}
.oe_mail_msg {
}
.oe_mail_comment {
white-space: normal;
margin-bottom: 5px;
}
.oe_mail_comment:after {
content: "";
display: block;
clear: both;
}
.oe_mail_msg_image {
float: left;
width: 100px;
height: 100px;
width: 60px;
height: 60px;
text-align: center;
overflow: hidden;
-moz-border-radius: 3px;
@ -79,14 +115,14 @@
}
.oe_mail_msg_image img {
width: 100px;
width: 60px;
height: auto;
clip: rect(10px, 100px, 110px, 0px);
}
.oe_mail_msg_content {
width: 85%;
margin-left: 15%;
width: 89%;
margin-left: 11%;
}
.oe_mail_msg_p {
@ -108,19 +144,3 @@
.oe_mail_msg_date, .oe_mail_msg_date a {
color: #4E43E7;
}
/* Right-side CSS */
.oe_mail_followers_vignette {
float: left;
width: 20%%;
}
.oe_mail_followers_vignette img {
width: 80%;
}
/* Wall CSS */
.oe_mail_thread_content div.oe_mail_comment {
margin-left: 5%;
}

194
addons/mail/static/src/js/mail.js
View File

@ -2,6 +2,92 @@ openerp.mail = function(session) {
var mail = session.mail = {};
/* Add ThreadDisplay widget to registry */
session.web.form.widgets.add(
'ThreadDisplay', 'openerp.mail.ThreadDisplay');
session.web.page.readonly.add(
'ThreadDisplay', 'openerp.mail.ThreadDisplay');
/* ThreadDisplay widget: display a thread of comments */
mail.ThreadDisplay = session.web.Widget.extend({
// QWeb template to use when rendering the object
template: 'ThreadDisplay',
init: function(parent, params) {
this._super(parent);
this.res_model = params['res_model'];
this.res_id = params['res_id'];
this.uid = params['uid'];
/* DataSets */
this.ds = new session.web.DataSet(this, this.res_model);
this.ds_users = new session.web.DataSet(this, 'res.users');
},
start: function() {
var self = this;
this._super.apply(this, arguments);
/* bind buttons */
this.$element.find('button.oe_mail_button_comment').bind('click', function () { self.do_comment(); });
/* display user, fetch comments */
this.display_current_user();
this.fetch_comments();
},
stop: function () {
this._super.apply(this, arguments);
},
fetch_comments: function () {
var load_res = this.ds.call('message_load', [[this.res_id]]).then(
this.proxy('display_comments'));
return load_res;
},
display_current_user: function () {
$('<div>').html(
'<img src="' + this.thread_get_avatar_mini('res.users', 'avatar_mini', this.uid) + '"/>'
).appendTo(this.$element.find('div.oe_mail_msg_image'));
},
display_comments: function (records) {
this.$element.find('div.oe_mail_thread_display').empty();
var self = this;
_(records).each(function (record) {
record.mini_url = self.thread_get_avatar_mini('res.users', 'avatar_mini', record.user_id[0]);
record.body_text = self.do_replace_internal_links(record.body_text);
var render_res = session.web.qweb.render('ThreadMsg', {
'record': record,
});
$('<div class="oe_mail_thread_msg">').html(render_res).appendTo(self.$element.find('div.oe_mail_thread_display'));
});
},
do_comment: function () {
var body_text = this.$element.find('textarea').val();
return this.ds.call('message_append_note', [[this.res_id], 'Reply comment', body_text, type='comment']).then(
this.proxy('fetch_comments'));
},
do_replace_internal_links: function (string) {
var self = this;
var regex = new RegExp(/(^|\s)@(\w*[a-zA-Z_]+\w*)\.(\w+[a-zA-Z_]+\w*),(\d+)/g);
var regex_res = regex.exec(string);
while (regex_res != null) {
var class_name = regex_res[2] + '_' + regex_res[3] + '_' + regex_res[4];
string = string.replace(regex_res[0], '' + regex_res[1] + '<a href="#" class="oe_mail_link_' + class_name + '">' + class_name + '</a>');
regex_res = regex.exec(string);
}
return string;
},
thread_get_avatar_mini: function(model, field, id) {
id = id || '';
var url = this.session.prefix + '/web/binary/image?session_id=' + this.session.session_id + '&model=' + model + '&field=' + field + '&id=' + id;
return url;
},
});
/* Add ThreadView widget to registry */
session.web.form.widgets.add(
'ThreadView', 'openerp.mail.ThreadView');
@ -11,31 +97,27 @@ openerp.mail = function(session) {
/* ThreadView widget: thread of comments */
mail.ThreadView = session.web.form.Field.extend({
// QWeb template to use when rendering the object
form_template: 'ThreadView',
form_template: 'Thread',
init: function() {
this.is_sub = 0;
this.see_sub = 1;
this.user_init = 0;
this.see_sub = 0;
this._super.apply(this, arguments);
this.thread_display = null;
/* DataSets */
this.ds = new session.web.DataSet(this, this.view.model);
this.ds_users = new session.web.DataSet(this, 'res.users');
},
start: function() {
var self = this;
this._super.apply(this, arguments);
/* bind buttons */
self.$element.find('button.oe_mail_button_comment').bind('click', function () { self.do_comment(); });
/* bind and hide buttons */
self.$element.find('button.oe_mail_button_followers').bind('click', function () { self.do_toggle_followers(); });
self.$element.find('button.oe_mail_button_follow').bind('click', function () { self.do_follow(); });
self.$element.find('button.oe_mail_button_unfollow').bind('click', function () { self.do_unfollow(); });
/* hide follow/unfollow buttons */
self.$element.find('button.oe_mail_button_follow').hide();
self.$element.find('button.oe_mail_button_unfollow').hide();
self.$element.find('button.oe_mail_button_follow').bind('click', function () { self.do_follow(); }).hide();
self.$element.find('button.oe_mail_button_unfollow').bind('click', function () { self.do_unfollow(); }).hide();
},
stop: function () {
this._super.apply(this, arguments);
},
@ -43,7 +125,7 @@ openerp.mail = function(session) {
set_value: function() {
var self = this;
this._super.apply(this, arguments);
/* hide follow/unfollow buttons */
/* hide follow/unfollow/see followers buttons */
self.$element.find('button.oe_mail_button_follow').hide();
self.$element.find('button.oe_mail_button_unfollow').hide();
if (! this.view.datarecord.id) { return; }
@ -52,59 +134,28 @@ openerp.mail = function(session) {
if (records == true) { self.is_sub = 1; self.$element.find('button.oe_mail_button_unfollow').show(); }
else { self.is_sub = 0; self.$element.find('button.oe_mail_button_follow').show(); }
});
console.log(this);
/* fetch comments and subscribers */
if (this.user_init == 0) {
this.fetch_current_user();
this.user_init = 1;
}
/* fetch subscribers */
this.fetch_subscribers();
return this.fetch_comments();
},
fetch_current_user: function () {
return this.ds_users.read_ids([this.session.uid], ['id', 'name', 'avatar_mini']).then(
this.proxy('display_current_user'));
},
fetch_comments: function () {
var load_res = this.ds.call('message_load', [[this.view.datarecord.id]]).then(
this.proxy('display_comments'));
return load_res;
/* create ThreadDisplay widget and render it */
this.$element.find('div.oe_mail_thread_left').empty();
this.thread_display = new mail.ThreadDisplay(this, {'res_model': this.view.model, 'res_id': this.view.datarecord.id, 'uid': this.session.uid});
this.thread_display.appendTo(this.$element.find('div.oe_mail_thread_left'));
},
fetch_subscribers: function () {
var follow_res = this.ds.call('message_get_subscribers', [[this.view.datarecord.id]]).then(
this.proxy('display_followers'));
this.proxy('display_subscribers'));
this.$element.find('div.oe_mail_followers_display').hide();
return follow_res;
},
display_current_user: function (records) {
$('<div>').html(
'<img src="' + this.thread_get_mini('res.users', 'avatar_mini', records[0].id) + '" title="' + records[0].name + '" alt="' + records[0].name + '"/>'
).appendTo(this.$element.find('div.oe_mail_msg_image'));
},
display_comments: function (records) {
this.$element.find('div.oe_mail_msg').empty();
var self = this;
_(records).each(function (record) {
record.mini_url = self.thread_get_mini('res.users', 'avatar_mini', record.user_id[0]);
var template = 'ThreadMsgView';
var render_res = session.web.qweb.render(template, {
'record': record,
});
$('<div class="oe_mail_comment">').html(render_res).appendTo(self.$element.find('div.oe_mail_msg'));
});
},
display_followers: function (records) {
this.$element.find('div.oe_mail_followers').empty();
display_subscribers: function (records) {
this.$element.find('div.oe_mail_followers_display').empty();
var self = this;
_(records).each(function (record) {
$('<div class="oe_mail_followers_vignette">').html(
'<img src="' + self.thread_get_mini('res.users', 'avatar_mini', record.id) + '" title="' + record.name + '" alt="' + record.name + '"/>'
).appendTo(self.$element.find('div.oe_mail_followers'));
'<img src="' + self.thread_get_avatar_mini('res.users', 'avatar_mini', record.id) + '" title="' + record.name + '" alt="' + record.name + '"/>'
).appendTo(self.$element.find('div.oe_mail_followers_display'));
});
},
@ -118,12 +169,6 @@ openerp.mail = function(session) {
return this.ds.call('message_unsubscribe', [[this.view.datarecord.id]]).then();
},
do_comment: function () {
var body_text = this.$element.find('textarea').val();
return this.ds.call('message_append_note', [[this.view.datarecord.id], 'Reply comment', body_text, type='comment']).then(
this.proxy('fetch_comments'));
},
do_toggle_follow: function () {
this.is_sub = 1 - this.is_sub;
this.$element.find('button.oe_mail_button_unfollow').toggle();
@ -134,23 +179,24 @@ openerp.mail = function(session) {
this.see_sub = 1 - this.see_sub;
if (this.see_sub == 1) { this.$element.find('button.oe_mail_button_followers').html('Hide followers'); }
else { this.$element.find('button.oe_mail_button_followers').html('Display followers'); }
this.$element.find('div.oe_mail_followers').toggle();
this.$element.find('div.oe_mail_followers_display').toggle();
},
thread_get_mini: function(model, field, id) {
thread_get_avatar_mini: function(model, field, id) {
id = id || '';
var url = this.session.prefix + '/web/binary/image?session_id=' + this.session.session_id + '&model=' + model + '&field=' + field + '&id=' + id;
return url;
},
});
/* Add WallView widget to registry */
session.web.client_actions.add('mail.all_feeds', 'session.mail.WallView');
/* WallView widget: a wall of messages */
mail.WallView = session.web.Widget.extend({
// QWeb template to use when rendering the object
template: 'WallView',
template: 'Wall',
init: function (parent, params) {
this._super(parent);
@ -178,25 +224,19 @@ openerp.mail = function(session) {
},
display_comments: function (records) {
this.$element.find('div.oe_mail_msg').empty();
this.$element.find('div.oe_mail_wall_threads').empty();
sorted_records = this.sort_comments(records);
var self = this;
_(sorted_records).each(function (rec_models, model) { // each model
_(rec_models).each(function (record_id, id) { // each record
var template = 'WallThreadView';
var template = 'WallThreadContainer';
var render_res = session.web.qweb.render(template, {
'record_model': model,
'record_id': id,
});
$('<div class="oe_mail_thread">').html(render_res).appendTo(self.$element.find('div.oe_mail_msg'));
_(record_id).each(function (record) { // each record
record.mini_url = self.thread_get_mini('res.users', 'avatar_mini', record.user_id[0]);
var template = 'ThreadMsgView';
var render_res = session.web.qweb.render(template, {
'record': record,
});
$('<div class="oe_mail_comment">').html(render_res).appendTo(self.$element.find('div.oe_mail_thread_content:last'));
});
$('<div class="oe_mail_wall_thread">').html(render_res).appendTo(self.$element.find('div.oe_mail_wall_threads'));
self.thread_display = new mail.ThreadDisplay(self, {'res_model': model, 'res_id': parseInt(id), 'uid': self.session.uid});
self.thread_display.appendTo(self.$element.find('div.oe_mail_wall_thread_content:last'));
});
});
},

105
addons/mail/static/src/xml/mail.xml
View File

@ -1,66 +1,69 @@
<?xml version="1.0" encoding="UTF-8"?>
<template>
<div t-name="ThreadView" class="oe_mail_main">
<div class="separator horizontal">OpenSocial</div>
<div class="oe_mail_main_left">
<div class="oe_mail_comment">
<div class="oe_mail_msg_image">
</div>
<div class="oe_mail_msg_content">
<div class="oe_mail_post_comment">
<textarea class="oe_mail_action_textarea" onfocus="this.value='';">Enter your comment here...</textarea><br />
<button type="button" class="oe_mail_button_comment">Post comment</button>
</div>
<div t-name="Wall" class="oe_mail_wall">
<div class="oe_mail_wall_left">
<div class="oe_mail_wall_act">
<div class="oe_mail_wall_tweet">
<textarea class="oe_mail_action_textarea" onfocus="this.value='';">Enter your comment here...</textarea><br />
<button class="oe_mail_button_comment" type="button">Post comment</button>
</div>
</div>
<div class="oe_mail_msg">
<div class="oe_mail_comment">
<div class="oe_mail_wall_threads">
</div>
</div>
<div class="oe_mail_wall_right">
<div class="oe_mail_followers">
<div class="oe_mail_followers_actions">
<button class="oe_mail_button_followers" type="button">Display followers</button>
</div>
<div class="oe_mail_followers_display">
</div>
</div>
</div>
<div class="oe_mail_main_right">
</div>
<t t-name="WallThreadContainer">
<div class="oe_mail_wall_thread_header">
Discussion about document <t t-raw="record_model"/> (id: <t t-raw="record_id"/>)
</div>
<div class="oe_mail_wall_thread_content">
</div>
</t>
<div t-name="Thread" class="oe_mail_thread_main">
<div class="separator horizontal">OpenSocial</div>
<div class="oe_mail_thread_left">
</div>
<div class="oe_mail_thread_right">
<div class="oe_mail_actions">
<button type="button" class="oe_mail_button_follow">Follow</button>
<button type="button" class="oe_mail_button_unfollow">Unfollow</button>
</div>
<div class="oe_mail_followers_actions">
<button type="button" class="oe_mail_button_followers">Hide followers</button>
</div>
<div class="oe_mail_followers">
</div>
</div>
</div>
<div t-name="WallView" class="oe_mail_wall_main">
<div class="oe_mail_main_left">
<div class="oe_mail_post_comment">
<textarea class="oe_mail_action_textarea" onfocus="this.value='';">Enter your comment here...</textarea><br />
<button type="button" class="oe_mail_button_comment">Post comment</button>
</div>
<div class="oe_mail_msg">
<div class="oe_mail_comment">
<div class="oe_mail_followers_actions">
<button type="button" class="oe_mail_button_followers">Display followers</button>
</div>
<div class="oe_mail_followers_display">
</div>
</div>
</div>
<div class="oe_mail_main_right">
<div class="oe_mail_followers_actions">
<button type="button" class="oe_mail_button_followers">See followers</button>
</div>
<div t-name="ThreadDisplay" class="oe_mail_thread">
<div class="oe_mail_thread_act">
<div class="oe_mail_msg_image">
</div>
<div class="oe_mail_followers">
<div class="oe_mail_msg_content">
<textarea class="oe_mail_action_textarea" onfocus="this.value='';">Enter your comment here...</textarea><br />
<button type="button" class="oe_mail_button_comment">Post comment</button>
</div>
</div>
<div class="oe_mail_thread_display">
</div>
</div>
<t t-name="WallThreadView">
<div class="oe_mail_thread_header">
Discussion about document <t t-raw="record_model"/> (id: <t t-raw="record_id"/>)
</div>
<div class="oe_mail_thread_content">
</div>
</t>
<t t-name="ThreadMsgView">
<t t-name="ThreadMsg">
<div class="oe_mail_msg_image">
<img t-att-src="record.mini_url"/>
</div>
@ -75,12 +78,22 @@
<t t-if="record.type == 'email'">
<span class="oe_mail_msg_author"><t t-raw="record.user_id[1]"/></span>
</t>
<t t-if="record.need_action_user_id != false">- <span class="oe_mail_msg_need_action">Need action by <a href="#"><t t-raw="record.need_action_user_id[1]"/></a></span></t>
<t t-if="record.need_action_user_id != false">
- <span class="oe_mail_msg_need_action">Need action by <a href="#"><t t-raw="record.need_action_user_id[1]"/></a></span>
</t>
<br />
<span class="oe_mail_msg_body"><t t-raw="record.body_text"/></span><br />
<span class="oe_mail_msg_date"><a href="#"><t t-raw="record.date"/></a></span>
<span class="oe_mail_msg_date"><t t-raw="record.date"/></span>
</p>
</div>
</t>
<t t-name="WallHeader">
<div class="tmp_oe_mail_thread_header">
Discussion about document <t t-raw="record_model"/> (id: <t t-raw="record_id"/>)
</div>
<div class="tmp_oe_mail_thread_content">
</div>
</t>
</template>