[REF] Thread and Wall widgets: html/css refactoring, based on MIT first design.
bzr revid: tde@openerp.com-20120308164138-lar56562dibp8q4s
This commit is contained in:
Thibault Delavallée
parent
63a16e7074
commit
0f18e4cf20
|
|
@ -4,8 +4,7 @@
|
|||
|
||||
.oe_mail_wall {
|
||||
overflow: auto;
|
||||
padding: 5px 5px 5px 5px;
|
||||
color: #4C4C4C;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.oe_mail_wall_search {
|
||||
|
|
@ -24,11 +23,14 @@
|
|||
}
|
||||
|
||||
.oe_mail_wall_thread div.oe_mail_thread_act .oe_mail_action_textarea {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.oe_mail_wall_more {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ------------------------------ */
|
||||
/* RecordThread */
|
||||
/* ------------------------------ */
|
||||
|
|
@ -58,64 +60,71 @@
|
|||
|
||||
.oe_mail_recthread_right {
|
||||
float: right;
|
||||
width: 35%;
|
||||
width: 25%;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.oe_mail_button_follow, .oe_mail_button_unfollow, .oe_mail_button_followers {
|
||||
.oe_mail_button_follow, .oe_mail_button_unfollow {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
/* Subscribers */
|
||||
.oe_mail_followers_vignette {
|
||||
float: left;
|
||||
width: 20%%;
|
||||
.oe_mail_button_followers {
|
||||
display: inline;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.oe_mail_followers_vignette img {
|
||||
width: 80%;
|
||||
.oe_mail_followers h4 {
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
/* ------------------------------ */
|
||||
/* ThreadDisplay */
|
||||
/* ------------------------------ */
|
||||
|
||||
.oe_mail_thread {
|
||||
}
|
||||
|
||||
.oe_mail_thread_act {
|
||||
div.oe_mail_thread_act {
|
||||
white-space: normal;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.oe_mail_thread_display {
|
||||
div.oe_mail_thread_display {
|
||||
white-space: normal;
|
||||
margin-bottom: 5px;
|
||||
border-bottom: 1px solid #D2D9E7;
|
||||
}
|
||||
|
||||
.oe_mail_thread_subthread {
|
||||
div.oe_mail_thread_subthread {
|
||||
margin-top: 8px;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.oe_mail_thread_more {
|
||||
margin-left: 20%;
|
||||
margin-right: 40%;
|
||||
border: 1px solid #D2D9E7;
|
||||
text-align: center;
|
||||
div.oe_mail_thread_more {
|
||||
border-bottom: 1px solid #D2D9E7;
|
||||
}
|
||||
|
||||
.notification {
|
||||
div.oe_mail_thread_msg {
|
||||
padding: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
div.notification {
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
.email {
|
||||
div.email {
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
.oe_mail_thread_msg:after, .oe_mail_thread_act:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
div.oe_mail_thread_msg:after, div.oe_mail_thread_act:after {
|
||||
content: "";
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.oe_mail_msg_content {
|
||||
margin-left: 60px;
|
||||
}
|
||||
|
||||
.oe_mail_button_comment {
|
||||
|
|
@ -128,30 +137,21 @@
|
|||
}
|
||||
|
||||
.oe_mail_msg_image {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
width: 45px;
|
||||
height: 40px;
|
||||
height: 45px;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
-o-border-radius: 3px;
|
||||
-ms-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
-moz-border-radius: 4px;
|
||||
-webkit-border-radius: 4px;
|
||||
-o-border-radius: 4px;
|
||||
-ms-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
-o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.oe_mail_msg_image img {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
clip: rect(10px, 100px, 110px, 0px);
|
||||
}
|
||||
|
||||
.oe_mail_msg_content {
|
||||
margin-left: 50px;
|
||||
clip: rect(5px, 40px, 45px, 0px);
|
||||
}
|
||||
|
||||
.oe_mail_msg_p {
|
||||
|
|
@ -167,18 +167,64 @@
|
|||
color: #4E43E7;
|
||||
}
|
||||
|
||||
.oe_mail_msg_author {
|
||||
color: #747474;
|
||||
/* ------------------------------ */
|
||||
/* Styling (should be openerp) */
|
||||
/* ------------------------------ */
|
||||
|
||||
input.oe_mail, textarea.oe_mail {
|
||||
width: 100%;
|
||||
padding: 4px;
|
||||
font-size: 12px;
|
||||
border: 1px solid #cccccc;
|
||||
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.oe_mail_msg_author a {
|
||||
color: #4E43E7;
|
||||
input.oe_mail:focus, textarea.oe_mail:focus {
|
||||
outline: 0;
|
||||
border-color: rgba(82, 168, 236, 0.8);
|
||||
-moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
|
||||
}
|
||||
|
||||
.oe_mail_msg_need_action, .oe_mail_msg_need_action a {
|
||||
p.oe_mail_msg {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.oe_mail_oe_right {
|
||||
float: right;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.oe_mail_oe_left {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.oe_mail_oe_fade {
|
||||
font-size: 12px;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.oe_mail_oe_bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a.oe_mail_oe_intlink {
|
||||
color: #8786b7;
|
||||
}
|
||||
|
||||
.oe_mail_oe_warning, .oe_mail_oe_warning a {
|
||||
color: #C03000;
|
||||
}
|
||||
|
||||
.oe_mail_msg_date {
|
||||
color: #747474;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -221,8 +221,7 @@ openerp.mail = function(session) {
|
|||
},
|
||||
|
||||
display_current_user: function () {
|
||||
return this.$element.find('div.oe_mail_msg_image').empty().html(
|
||||
'<img src="' + this.thread_get_avatar_mini('res.users', 'avatar_mini', this.params.uid) + '"/>');
|
||||
return this.$element.find('img.oe_mail_msg_image').attr('src', this.thread_get_avatar_mini('res.users', 'avatar_mini', this.params.uid));
|
||||
},
|
||||
|
||||
do_comment: function () {
|
||||
|
|
@ -281,7 +280,7 @@ openerp.mail = function(session) {
|
|||
var regex_res = regex_login.exec(string);
|
||||
while (regex_res != null) {
|
||||
var login = regex_res[2];
|
||||
string = string.replace(regex_res[0], '<a href="#" class="intlink" data-res-model="res.users" data-res-login = ' + login + '>@' + login + '</a>');
|
||||
string = string.replace(regex_res[0], '<a href="#" class="intlink oe_mail_oe_intlink" data-res-model="res.users" data-res-login = ' + login + '>@' + login + '</a>');
|
||||
regex_res = regex_login.exec(string);
|
||||
}
|
||||
return string;
|
||||
|
|
@ -345,7 +344,7 @@ openerp.mail = function(session) {
|
|||
|
||||
init: function() {
|
||||
this.is_sub = 0;
|
||||
this.see_sub = 0;
|
||||
this.see_sub = 1;
|
||||
this._super.apply(this, arguments);
|
||||
this.thread = null;
|
||||
/* DataSets */
|
||||
|
|
@ -370,10 +369,9 @@ openerp.mail = function(session) {
|
|||
console.log('set_value');
|
||||
var self = this;
|
||||
this._super.apply(this, arguments);
|
||||
this.see_sub = 0;
|
||||
this.see_sub = 1;
|
||||
/* hide follow/unfollow/see followers buttons */
|
||||
this.$element.find('button.oe_mail_button_followers').html('Display followers')
|
||||
this.$element.find('div.oe_mail_followers_display').hide();
|
||||
this.$element.find('button.oe_mail_button_followers').html('Hide followers')
|
||||
this.$element.find('button.oe_mail_button_follow').hide();
|
||||
this.$element.find('button.oe_mail_button_unfollow').hide();
|
||||
if (! this.view.datarecord.id) { return; }
|
||||
|
|
@ -397,12 +395,13 @@ openerp.mail = function(session) {
|
|||
},
|
||||
|
||||
display_subscribers: function (records) {
|
||||
this.$element.find('div.oe_mail_followers_display').empty();
|
||||
var self = this;
|
||||
var sub_node = this.$element.find('div.oe_mail_followers')
|
||||
sub_node.empty();
|
||||
$('<h4/>').html('Followers (' + records.length + ')').appendTo(sub_node);
|
||||
_(records).each(function (record) {
|
||||
$('<div class="oe_mail_followers_vignette">').html(
|
||||
'<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'));
|
||||
var mini_url = self.thread_get_avatar_mini('res.users', 'avatar_mini', record.id);
|
||||
$('<img class="oe_mail_oe_left oe_mail_msg_image" src="' + mini_url + '" title="' + record.name + '" alt="' + record.name + '"/>').appendTo(sub_node);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -426,7 +425,7 @@ 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_display').toggle();
|
||||
this.$element.find('div.oe_mail_followers').toggle();
|
||||
},
|
||||
|
||||
thread_get_avatar_mini: function(model, field, id) {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="oe_mail_wall_left">
|
||||
<div class="oe_mail_wall_act">
|
||||
<div class="oe_mail_wall_tweet">
|
||||
<textarea class="oe_mail_wall_action_textarea" onfocus="this.value='';">Enter your comment here...</textarea><br />
|
||||
<textarea class="oe_mail oe_mail_wall_action_textarea" placeholder="Add a personnal message here..."/><br />
|
||||
<button class="oe_mail_wall_button_comment" type="button">Post comment</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -33,11 +33,10 @@
|
|||
<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>
|
||||
<button type="button" class="oe_mail_button_followers">Display followers</button>
|
||||
</div>
|
||||
<div class="oe_mail_followers">
|
||||
<div class="oe_mail_followers_actions">
|
||||
<button type="button" class="oe_mail_button_followers">Display followers</button>
|
||||
</div>
|
||||
<h4>Followers</h4>
|
||||
<div class="oe_mail_followers_display">
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,9 +45,9 @@
|
|||
|
||||
<div t-name="Thread" class="oe_mail_thread">
|
||||
<div class="oe_mail_thread_act">
|
||||
<div class="oe_mail_msg_image">User_image</div>
|
||||
<img class="oe_mail_msg_image oe_mail_oe_left" alt="User img"/>
|
||||
<div class="oe_mail_msg_content">
|
||||
<textarea class="oe_mail_action_textarea" onfocus="this.value='';">Enter your comment here...</textarea><br />
|
||||
<textarea class="oe_mail oe_mail_action_textarea" placeholder="Add your comment here..."/><br />
|
||||
<button type="button" class="oe_mail_button_comment">Post comment</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,9 +59,7 @@
|
|||
</div>
|
||||
|
||||
<div t-name="ThreadMsg" t-attf-class="{record.type} oe_mail_thread_msg">
|
||||
<div class="oe_mail_msg_image">
|
||||
<img t-att-src="record.mini_url"/>
|
||||
</div>
|
||||
<img class="oe_mail_msg_image oe_mail_oe_left" t-att-src="record.mini_url"/>
|
||||
<div class="oe_mail_msg_content">
|
||||
<t t-if="record.type == 'email'"><t t-call="EmailDisplay" /></t>
|
||||
<t t-if="record.type == 'notification' || record.type == 'comment'"><t t-call="NoteDisplay" /></t>
|
||||
|
|
@ -71,15 +68,14 @@
|
|||
</div>
|
||||
|
||||
<t t-name="NoteDisplay">
|
||||
<p class="oe_mail_msg_p">
|
||||
<span class="oe_mail_msg_author">
|
||||
<a href="#" class="intlink" data-res-model='res.users' t-attf-data-res-id='{record.user_id[0]}'><t t-raw="record.user_id[1]"/></a>
|
||||
<p class="oe_mail_msg">
|
||||
<span class="oe_mail_oe_fade">
|
||||
<a href="#" class="intlink oe_mail_oe_intlink" data-res-model='res.users' t-attf-data-res-id='{record.user_id[0]}'><t t-raw="record.user_id[1]"/></a>
|
||||
<t t-if="record.type == 'notification'">via OpenERP System Notification</t>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
wrote on <span class="oe_mail_msg_date"><t t-raw="record.date"/></span>
|
||||
- <span class="oe_mail_oe_warning">Need action by <a href="#" class="intlink" data-res-model='res.users' t-attf-data-res-id='{record.need_action_user_id[0]}'><t t-raw="record.need_action_user_id[1]"/></a></span>
|
||||
</t>on <t t-raw="record.date"/></span>
|
||||
<br />
|
||||
<span class="oe_mail_msg_body"><t t-raw="record.body_text"/></span>
|
||||
<t t-if="record.tr_body_text"><span class="oe_mail_msg_body_short"><t t-raw="record.tr_body_text"/></span></t>
|
||||
|
|
@ -87,9 +83,10 @@
|
|||
</t>
|
||||
|
||||
<t t-name="EmailDisplay">
|
||||
<p class="oe_mail_msg_p oe_mail_msg_p_email_header">
|
||||
From: <t t-esc="email_from"/> on <span class="oe_mail_msg_date"><t t-raw="record.date"/></span><br />
|
||||
To: <t t-sec="mail_to"/><br />
|
||||
<p class="oe_mail_msg oe_mail_msg_p_email_header">
|
||||
<span class="oe_mail_oe_bold">From:</span> <t t-esc="email_from"/> on <span class="oe_mail_oe_fade"><t t-raw="record.date"/></span><br />
|
||||
<span>To:</span> <t t-sec="mail_to"/><br />
|
||||
<span>Subject:</span> <t t-sec="subject"/><br />
|
||||
</p>
|
||||
<p class="oe_mail_msg_p">
|
||||
<span class="oe_mail_msg_body"><t t-raw="record.body_text"/></span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue