[REF] mail: chatter

DOM and LESS simplification
New design integration
This commit is contained in:
Aaron Bohy
2015-09-01 21:04:29 +02:00
parent 238a17ada8
commit 0d7083f766
5 changed files with 102 additions and 197 deletions
+4 -5
View File
@@ -44,6 +44,7 @@ var ChatterMailComposeMessage = mail_thread.MailComposeMessage.extend({
},
start: function(){
this.$input = this.$('.o_mail_compose_message_input');
autosize(this.$input);
this.$input.focus();
return this._super.apply(this, arguments);
},
@@ -359,8 +360,7 @@ var ChatterMailThread = form_common.AbstractField.extend(mail_thread.MailThreadM
// composer toggle
on_open_composer: function(event){
var self = this;
this.$('.o_mail_chatter_compose_buttons').hide();
this.$('.o_mail_chatter_compose_message_wrap').show();
this.$('.o_mail_chatter_compose_message').show();
// destroy existing composer
if(this.message_composer){
this.message_composer.destroy();
@@ -373,7 +373,7 @@ var ChatterMailThread = form_common.AbstractField.extend(mail_thread.MailThreadM
'context': this.context,
'record_name': this.record_name,
});
this.message_composer.appendTo(this.$('.o_mail_chatter_compose_message_wrap'));
this.message_composer.appendTo(this.$('.o_mail_chatter_compose_message'));
this.message_composer.on('message_sent', this, this.on_message_post);
this.message_composer.on('need_refresh', this, function(){
self.message_refresh();
@@ -382,8 +382,7 @@ var ChatterMailThread = form_common.AbstractField.extend(mail_thread.MailThreadM
},
on_close_composer: function(){
if(this.message_composer && this.message_composer.is_empty() && !this.stay_open){
this.$('.o_mail_chatter_compose_buttons').show();
this.$('.o_mail_chatter_compose_message_wrap').hide();
this.$('.o_mail_chatter_compose_message').hide();
}
},
/**
@@ -3,11 +3,7 @@
// Layout
// ------------------------------------------------------------------
.o_mail_chat {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
.o-position-absolute(0, 0, 0, 0);
height: 100%;
@media (max-width: @screen-xs-max) {
@@ -21,6 +17,7 @@
.o_mail_chat_sidebar {
.o-flex(0, 0, 15%);
overflow: auto;
padding: 1%;
}
.o_mail_chat_content {
@@ -49,7 +46,6 @@
.o_mail_chat {
.o_mail_chat_sidebar {
background-color: @gray;
padding: 1%;
> .nav-pills {
> li {
@@ -122,75 +118,16 @@
padding: 25px 0;
text-align: justify;
}
.o_mail_thread_date_separator, .o_mail_thread_message {
margin: auto; // override the margin-{left,right}: -15px defined on .row
}
.o_mail_thread_date_separator{
.o_mail_thread_date_wrapper {
border-bottom: solid @gray-lighter 2px;
margin-bottom: 15px;
.o_mail_thread_date_separator_title {
display: table;
position: relative;
top: 10px;
margin: 0 auto;
padding: 0 10px 0 10px;
font-weight: bold;
background: white;
}
}
}
}
.o_mail_thread_message{
//border-bottom: solid WhiteSmoke 1px;
}
/*
.o_mail_chat_messages {
.o_slack_message {
.o_slack_message_avatar {
> img {
}
}
.o_slack_message_content {
.o_slack_message_author {
font-weight: bold;
.o_slack_message_time {
font-weight: normal;
color: @gray-light;
}
}
}
}
}
*/
.o_mail_chat_composer_wrapper {
border-top: 1px solid @gray-lighter;
background-color: @gray-lighter;
.o-webclient-padding(@top: 10px, @bottom: 5px);
/*
> img {
background-image: url(/web/static/src/img/placeholder.png);
}
> input {
padding-left: 15px;
resize: none;
border: 0;
outline: none;
}
*/
}
}
}
// ------------------------------------------------------------------
// Other components
// ------------------------------------------------------------------
+17 -46
View File
@@ -1,54 +1,25 @@
.o_mail_chatter {
width: 100%;
.o_mail_chatter{
/* Layout for chatter header (buttons and compose message) */
.o_mail_chatter_compose_buttons, .o_mail_chatter_compose_message_wrap{
padding-left:15px;
margin-bottom:20px;
//background-color: lightGrey;
}
/* Specific message style for chatter */
.o_mail_chatter_messages{
.o_mail_thread_message{
.o_mail_thread_message_type_comment{ // message comment
&:not(.o_mail_thread_message_subtype_note){
background-color: white;
box-shadow: 0px 1px #CACACA;
}
}
.o_mail_thread_message_type_email{ // message email
background-color: white;
box-shadow: 0px 1px #CACACA;
}
.o_mail_thread_message_type_notification{ // message notification
}
.o_mail_chatter_compose_message {
display: none;
margin-top: 10px;
.o_mail_chatter_compose_message_suggested_partners label {
vertical-align: middle;
display: block;
line-height: 14px;
}
.o_mail_thread_date_separator{
.o_mail_thread_date_wrapper {
height: 20px;
.o_mail_thread_date_separator_title {
text-align: center;
font-weight: bold;
color: @gray-light;
}
}
.o_mail_compose_message_buttons > button {
.btn-sm;
}
}
.o_mail_chatter_show_more_message{
.o_mail_chatter_messages {
margin-top: 10px;
}
.o_mail_chatter_show_more_message {
text-align: center;
cursor: pointer;
}
}
.o_mail_chatter_compose_message{
.o_mail_chatter_compose_message_suggested_partners label{
vertical-align: middle;
display: block;
line-height: 14px;
}
}
+23 -1
View File
@@ -2,6 +2,24 @@
// Mail Thread 'Mixin'
// ------------------------------------------------------------------
.o_mail_thread {
.o_mail_thread_date_separator, .o_mail_thread_message {
margin: auto; // override the margin-{left,right}: -15px defined on .row
}
.o_mail_thread_date_separator {
.o_mail_thread_date_wrapper {
border-bottom: solid @gray-lighter 2px;
margin-bottom: 15px;
.o_mail_thread_date_separator_title {
display: table;
position: relative;
top: 10px;
margin: 0 auto;
padding: 0 10px 0 10px;
font-weight: bold;
background: white;
}
}
}
.o_mail_thread_message_star, .o_mail_thread_message_needaction {
cursor: pointer;
opacity: 0.5;
@@ -42,11 +60,15 @@
}
.o_mail_compose_message {
width: 100%;
.o_mail_compose_message_input {
input.o_mail_compose_message_input {
border: none;
padding: 5px;
margin-right: 5px;
}
textarea.o_mail_compose_message_input {
width: 100%;
margin: 5px 0;
}
}
.o_mail_mention_partner_tags {
margin-top: 5px;
+56 -80
View File
@@ -2,98 +2,74 @@
<templates>
<t t-name="mail.chatter.ComposeMessage">
<div class="o_mail_chatter_compose_message">
<!-- Log a Note (subtypes)-->
<t t-if="widget.options.is_log">
<div class="form-group col-md-8">
<span class="text-muted">
Log an internal note which will not be sent to followers.<br/>
Note that users reading the document can read internal notes.
</span>
<!-- Log a Note (subtypes)-->
<t t-if="widget.options.is_log">
<span class="text-muted">
Log an internal note which will not be sent to followers.<br/>
Note that users reading the document can read internal notes.
</span>
<!-- Internal subtypes -->
<div t-att-class="'form-group col-md-8 ' + (widget.options.internal_subtypes.length &lt;= 1 ? ' hide' : '')">
<label class="col-sm-2 control-label">Activity</label>
<div class="col-sm-4">
<select class="form-control o_mail_chatter_compose_message_subtype_select">
<t t-foreach="widget.options.internal_subtypes" t-as="subtype">
<option t-att-value="subtype['id']"><t t-raw="subtype['name']"/></option>
</t>
</select>
</div>
<!-- Internal subtypes -->
<div t-att-class="'form-group col-md-8 ' + (widget.options.internal_subtypes.length &lt;= 1 ? ' hide' : '')">
<label class="col-sm-2 control-label">Activity</label>
<div class="col-sm-4">
<select class="form-control o_mail_chatter_compose_message_subtype_select">
<t t-foreach="widget.options.internal_subtypes" t-as="subtype">
<option t-att-value="subtype['id']"><t t-raw="subtype['name']"/></option>
</t>
</select>
</div>
</t>
<!-- New Message (list of followers)-->
<t t-if="!widget.options.is_log">
<!-- Text for followers -->
<span class="text-muted">
To: Followers of
<t t-if="widget.options.record_name">
<t t-raw="'&quot;' + widget.options.record_name + '&quot;'"/>
</t>
<t t-if="!widget.options.record_name">
this document
</t>
</span>
<!-- List of followers -->
<div class="o_mail_chatter_compose_message_suggested_partners">
<t t-foreach='widget.suggested_partners' t-as='recipient'>
<div t-attf-title="Add as recipient and follower (reason: #{recipient.reason})">
<input type="checkbox"
t-att-checked="recipient.checked ? 'checked' : undefined"
t-att-data-fullname="recipient.full_name"/>
<t t-esc="recipient.name"/>
<t t-if="recipient.email_address">(<t t-esc="recipient.email_address"/>)</t>
<t t-if="!recipient.email_address">(no email address)</t>
</div>
</div>
</t>
<!-- New Message (list of followers)-->
<t t-if="!widget.options.is_log">
<!-- Text for followers -->
<div class="form-group col-md-8 o_mail_chatter_compose_message_all_followers">
<span class="text-muted">
To:
<t t-if="widget.options.record_name">
Followers of
<t t-raw="'&quot;' + widget.options.record_name + '&quot;'"/>
</t>
<t t-if="!widget.options.record_name">
Followers of this document
</t>
</span>
<!-- List of followers -->
<div class="o_mail_chatter_compose_message_suggested_partners">
<t t-foreach='widget.suggested_partners' t-as='recipient'>
<div class="checkbox">
<label t-attf-title="Add as recipient and follower (reason: #{recipient.reason})">
<input type="checkbox"
t-att-checked="recipient.checked ? 'checked' : undefined"
t-att-data-fullname="recipient.full_name"/>
<t t-esc="recipient.name"/>
<t t-if="recipient.email_address">(<t t-esc="recipient.email_address"/>)</t>
<t t-if="!recipient.email_address">(no email address)</t>
</label>
</div>
</t>
</div>
</div>
</t>
<!-- Composer Message -->
<t t-call="mail.ComposeMessage"/>
</div>
</t>
</div>
</t>
<!-- Composer Message -->
<t t-call="mail.ComposeMessage"/>
</t>
<t t-name="mail.chatter.ChatterMailThread">
<div class="container-fluid o_mail_chatter o_mail_thread">
<div class="o_mail_chatter o_mail_thread">
<!-- Compose buttons ('new message' and 'log a note') -->
<div class="row o_mail_chatter_compose_buttons">
<div class="col-md-7">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary o_mail_chatter_button_new_message" title="Send a message">
New message
</button>
</div>
<t t-if="widget.options.display_log_button">
<span class="text-muted">or</span>
<div class="btn-group btn-group-sm">
<button class="btn btn-link btn-small o_mail_chatter_button_log_note" title="Log a note. Followers will not be notified.">
Log an internal note
</button>
</div>
</t>
</div>
<div class="o_mail_chatter_compose_buttons">
<button type="button" class="btn btn-sm btn-primary o_mail_chatter_button_new_message" title="Send a message">
New message
</button>
<button t-if="widget.options.display_log_button" class="btn btn-sm btn-link o_mail_chatter_button_log_note" title="Log a note. Followers will not be notified.">
Log an internal note
</button>
</div>
<!-- wrap div for ChatterMailComposeMessage -->
<div class="row o_mail_chatter_compose_message_wrap" style="display:none;">
</div>
<div class="o_mail_chatter_compose_message"/>
<!-- Message list -->
<div class="row">
<div class="col-md-10 col-md-offset-1 o_mail_chatter_messages">
<t t-call="mail.chatter.ChatterMailThread.messages"/>
</div>
</div>
<div class="o_mail_chatter_messages"/>
<div t-if="widget.options.display_show_more_message" class="o_mail_chatter_show_more_message text-muted">
----------- Show more message -----------
----------- Show more messages -----------
</div>
</div>
</t>