[MERGE] web, mail: introduce new chatter/discuss design

This commit is contained in:
qsm-odoo
2017-09-05 12:16:28 +02:00
28 changed files with 650 additions and 291 deletions
+12 -3
View File
@@ -127,9 +127,18 @@ var Activity = AbstractActivityField.extend({
activity.note = utils.parse_and_transform(activity.note, utils.add_link);
}
});
self.$el.html(QWeb.render('mail.activity_items', {
activities: setDelayLabel(self.activities),
}));
var activities = setDelayLabel(self.activities);
if (activities.length) {
var nbActivities = _.countBy(activities, 'state');
self.$el.html(QWeb.render('mail.activity_items', {
activities: activities,
nbPlannedActivities: nbActivities.planned,
nbTodayActivities: nbActivities.today,
nbOverdueActivities: nbActivities.overdue,
}));
} else {
self.$el.empty();
}
});
},
_reset: function (record) {
+7 -7
View File
@@ -122,16 +122,12 @@ var Chatter = Widget.extend(chat_mixin, {
// private
_closeComposer: function (force) {
if (this.composer && (this.composer.is_empty() || force)) {
this.$el.removeClass('o_chatter_composer_active');
this.$('.o_chatter_button_new_message, .o_chatter_button_log_note').removeClass('o_active');
this.composer.do_hide();
this.composer.clear_composer();
this._muteNewMessageButton(false);
}
},
_muteNewMessageButton: function (mute) {
this.$('.o_chatter_button_new_message')
.toggleClass('btn-primary', !mute)
.toggleClass('btn-default', mute);
},
_openComposer: function (options) {
var self = this;
var old_composer = this.composer;
@@ -168,8 +164,12 @@ var Chatter = Widget.extend(chat_mixin, {
});
self.composer.on('need_refresh', self, self.trigger_up.bind(self, 'reload'));
self.composer.on('close_composer', null, self._closeComposer.bind(self, true));
self.$el.addClass('o_chatter_composer_active');
self.$('.o_chatter_button_new_message, .o_chatter_button_log_note').removeClass('o_active');
self.$('.o_chatter_button_new_message').toggleClass('o_active', !self.composer.options.is_log);
self.$('.o_chatter_button_log_note').toggleClass('o_active', self.composer.options.is_log);
});
this._muteNewMessageButton(true);
},
_render: function (def) {
// the rendering of the chatter is aynchronous: relational data of its fields needs to be
@@ -33,6 +33,7 @@ var ChatterComposer = composer.BasicComposer.extend({
this.events = _.extend(this.events, {
'click .o_composer_button_full_composer': 'on_open_full_composer',
});
this.notInline = true;
},
should_send: function () {
@@ -241,4 +242,4 @@ var ChatterComposer = composer.BasicComposer.extend({
return ChatterComposer;
});
});
+7 -4
View File
@@ -285,17 +285,20 @@ var ChatAction = Widget.extend(ControlPanelMixin, {
this.selected_message = message;
var subject = "Re: " + message.record_name;
this.extended_composer.set_subject(subject);
if (this.channel.type !== 'static') {
this.basic_composer.toggle(false);
this.basic_composer.do_hide();
}
this.extended_composer.toggle(true);
this.extended_composer.do_show();
this.thread.scroll_to({id: message_id, duration: 200, only_if_necessary: true});
this.extended_composer.focus('body');
},
unselect_message: function() {
this.basic_composer.toggle(this.channel.type !== 'static' && !this.channel.mass_mailing);
this.extended_composer.toggle(this.channel.type !== 'static' && this.channel.mass_mailing);
this.basic_composer.do_toggle(this.channel.type !== 'static' && !this.channel.mass_mailing);
this.extended_composer.do_toggle(this.channel.type !== 'static' && this.channel.mass_mailing);
if (!config.device.touch) {
var composer = this.channel.mass_mailing ? this.extended_composer : this.basic_composer;
composer.focus();
+8 -4
View File
@@ -417,6 +417,14 @@ var BasicComposer = Widget.extend(chat_mixin, {
// Emojis
this.emoji_container_classname = 'o_composer_emoji';
this.isMini = options.isMini;
this.avatarURL = session.uid > 0 ? session.url('/web/image', {
model: 'res.users',
field: 'image_small',
id: session.uid,
}) : '/web/static/src/img/user_menu_avatar.png';
},
start: function () {
@@ -463,10 +471,6 @@ var BasicComposer = Widget.extend(chat_mixin, {
return this._super.apply(this, arguments);
},
toggle: function(state) {
this.$el.toggle(state);
},
preprocess_message: function () {
// Return a deferred as this function is extended with asynchronous
// behavior for the chatter composer
@@ -28,7 +28,7 @@ return ChatWindow.extend({
})
.focus();
} else if (!self.options.input_less) {
var basic_composer = new composer.BasicComposer(self, {mention_partners_restricted: true});
var basic_composer = new composer.BasicComposer(self, {mention_partners_restricted: true, isMini: true});
basic_composer.on('post_message', self, function (message) {
this.trigger('post_message', message, this.channel_id);
});
+1 -1
View File
@@ -14,7 +14,7 @@ var QWeb = core.qweb;
// chat window management
//----------------------------------------------------------------
var CHAT_WINDOW_WIDTH = 300 + 5; // 5 pixels between windows
var CHAT_WINDOW_WIDTH = 325 + 5; // 5 pixels between windows
var chat_sessions = [];
var new_chat_session;
var display_state = {
+18 -18
View File
@@ -1,5 +1,7 @@
@o-chat-window-bg: white;
@o-chat-window-width: 300px;
@o-chat-window-width: 325px;
@o-mail-chatter-gap: 10px; // has to be defined here as this file is both in
// backend and other assets (livechat)
.o_chat_window {
.o-flex-display();
@@ -11,9 +13,9 @@
max-height: 100%;
font-size: 12px;
background-color: @o-chat-window-bg;
border: 1px solid gray;
border-radius: 3px;
border-radius: 3px 3px 0 0;
z-index: 3;
box-shadow: -5px -5px 20px fade(black, 28%);
@media (max-width: @screen-xs-max) {
width: 100%;
@@ -31,8 +33,10 @@
.o-flex-display();
.o-flex(0, 0, auto);
color: white;
padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
border-radius: 3px 3px 0 0;
border-bottom: 1px solid @odoo-color-silver-dark; // cannot use gray-lighter-dark as this file is also frontend
background-color: @odoo-brand-primary;
padding: 5px;
@media (max-width: @screen-xs-max) {
height: @navbar-height;
@@ -53,9 +57,7 @@
color: white;
padding: 3px;
margin-left: 5px;
&:hover {
background-color: darken(@odoo-brand-primary, 10%);
}
.o-hover-opacity(0.7, 1);
}
}
@@ -64,6 +66,8 @@
.o_mail_thread {
.o-flex(1, 1, auto);
overflow: auto;
border: 1px solid @odoo-color-silver-dark; // cannot use gray-lighter-dark as this file is also frontend
border-width: 0 1px;
.o_thread_date_separator {
margin-top: 0px;
@@ -80,27 +84,24 @@
padding: 4px 5px;
}
}
.o_chat_composer {
.o-flex(0, 0, auto);
> input {
padding: 5px;
width: 100%;
}
}
}
.o_chat_window_dropdown {
width: auto;
height: 28px;
color: white;
background-color: @odoo-brand-primary;
background-color: @gray-dark;
cursor: pointer;
box-shadow: none;
@media (max-width: @screen-xs-max) {
display: none;
}
.o_chat_header {
border-radius: 0;
}
.o_chat_window_dropdown_toggler {
padding: 5px;
@@ -111,7 +112,7 @@
font-size: smaller;
}
}
&.open .o_chat_window_dropdown_toggler .o_total_unread_counter {
&.open .o_chat_window_dropdown_toggler .o_total_unread_counter, .o_chat_window_expand {
display: none;
}
@@ -127,7 +128,6 @@
}
&:hover {
background-color: darken(@odoo-brand-primary, 10%);
color: white;
}
}
}
+37 -25
View File
@@ -1,33 +1,45 @@
// Default chatter layout.
// Extended in enterprise by form_view.less to achieve the side-chatter
.o_chatter {
width: 100%;
.o_chat_composer {
margin-top: 10px;
.o_chatter_composer_info {
display: inline-block;
margin-bottom: 5px;
color: @odoo-main-color-muted;
font-style: italic;
}
.o_composer {
margin-top: 10px;
.o_composer_input {
width: 100%;
.box-sizing(content-box);
resize: vertical;
margin-bottom: 5px;
}
}
}
.o_mail_thread {
margin-top: 10px;
}
padding-top: 0!important;
.o_spinner {
text-align: center;
font-size: large;
}
.o_chatter_topbar {
height: @odoo-statusbar-height;
position: relative;
margin: @grid-gutter-width*0.5 -@grid-gutter-width*0.5 0;
padding: 0 @grid-gutter-width*0.5;
.o-flex-display();
> .btn {
height: @odoo-statusbar-height + 1;
border: 1px solid transparent;
}
> .o_followers {
height: @odoo-statusbar-height + 1;
border-bottom: 1px solid transparent;
.o-flex(1,1,auto);
}
}
&.o_chatter_composer_active .o_chatter_topbar {
> .btn, > .o_followers{
border-radius: @border-radius-small @border-radius-small 0 0;
border-width: 0 0 1px;
border-bottom-color: @gray-lighter-dark;
&.o_active {
color: @odoo-brand-primary;
background-color: @gray-lighter;
border-color: @gray-lighter-dark;
border-width: 1px 1px 0;
}
}
}
}
+59 -66
View File
@@ -2,6 +2,7 @@
// Layout
// ------------------------------------------------------------------
@mail-chat-sidebar-width: 250px;
.o_mail_chat {
.o-position-absolute(0, 0, 0, 0);
height: 100%;
@@ -44,8 +45,7 @@
height: 100%;
float: left;
overflow: auto;
padding: 8px 0;
font-weight: 300;
padding: @odoo-horizontal-padding 0;
@media (max-width: @screen-xs-max) {
width: 100%;
@@ -53,9 +53,13 @@
display: none;
}
@media (min-width: @screen-lg-min) {
width: @mail-chat-sidebar-width + 50px;
}
.o_mail_sidebar_title {
.o-flex-display();
padding: 12px 8px 5px @odoo-horizontal-padding;
padding: 6px @odoo-horizontal-padding 0 @odoo-horizontal-padding;
align-items: center;
justify-content: space-between;
h4 {
@@ -72,7 +76,8 @@
.o_mail_chat_channel_item {
.o-flex-display();
width: 100%;
padding: 2px 8px 2px 1.5*@odoo-horizontal-padding; // larger padding-left than titles
padding: 2px @odoo-horizontal-padding 2px (@odoo-horizontal-padding + 23px); // compensate icon
.o_channel_name {
.o-flex(1, 1, auto);
.o-text-overflow();
@@ -90,21 +95,27 @@
margin-left: 3px;
}
&.o_mail_chat_title_main {
padding: @padding-base-vertical @odoo-horizontal-padding;
margin-bottom: 2px;
}
}
.o_mail_chat_channel_item + .o_mail_sidebar_title {
margin-top: @padding-base-vertical;
}
.o_mail_add_channel {
width: 100%;
padding: 5px 1.5*@odoo-horizontal-padding; // larger padding-left than titles
padding: 5px (@odoo-horizontal-padding + 23px); // compensate icon
position: relative;
> input {
width: 100%;
padding: 2px 5px;
padding-left: 12px;
}
> span {
position: absolute;
top: 7px;
left: 27px;
.o-position-absolute(7px, @left: 27px);
}
}
}
@@ -123,6 +134,10 @@
margin-left: 0;
}
@media (min-width: @screen-lg-min) {
margin-left: @mail-chat-sidebar-width + 50px;
}
.o_mail_thread {
.o-flex(1, 0, 0);
overflow: auto;
@@ -133,33 +148,7 @@
text-align: justify;
}
}
.o_chat_composer {
.o-flex(0, 0, auto);
.o-webclient-padding(@top: 2px, @bottom: 8px);
.o_composer {
.o-flex-display();
.o_composer_input {
.o-flex(1, 1, auto);
margin-right: 5px;
> textarea {
padding: 5px;
border: none;
}
}
&.o_extended_composer .o_composer_input {
margin-right: 0;
}
}
.o_composer_buttons {
.o-flex(0, 0, auto);
.o_composer_button_send {
float: right;
}
}
}
.o_mail_snackbar {
.o-position-absolute(15px, 15px);
padding-top: 10px;
@@ -174,24 +163,27 @@
// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------
@sidebar-icon-opacity: 0.6;
@sidebar-icon-opacity: 0.7;
.o_mail_chat {
.o_mail_chat_sidebar {
background-color: darken(@gray, 8%);
color: lighten(@gray, 60%);
opacity: 0.9;
background-color: @gray-dark;
color: @gray-lighter-dark;
.o_mail_chat_channel_item {
cursor: pointer;
&:hover {
background-color: darken(@gray, 12%);;
background-color: darken(@gray-dark,2%);
.o_mail_partner_unpin {
opacity: @sidebar-icon-opacity;
}
}
&.o_active {
background-color: darken(@gray, 15%);
background-color: @gray-darker;
box-shadow: inset 3px 0 0 @odoo-brand-optional;
}
.o_mail_hash {
@@ -199,10 +191,7 @@
}
.o_mail_partner_unpin {
opacity: 0;
&:hover {
opacity: 1;
}
.o-hover-opacity(@default-opacity: 0, @hover-opacity: 1);
}
&.o_unread_message {
color: white;
@@ -212,7 +201,23 @@
> .badge {
color: white;
background-color: @odoo-brand-optional;
font-size: 10px;
line-height: 16px;
height: 18px;
}
&.o_mail_chat_title_main {
font-size: @font-size-base;
&.o_mail_chat_title_starred > .badge {
background-color: @gray-light;
border-color: @gray-light;
}
}
}
> hr {
border-color: @gray;
}
.o_mail_add_channel {
@@ -227,35 +232,24 @@
.o_mail_sidebar_title {
h4 {
font-size: 13px;
margin: 0;
font-size: @font-size-small;
text-transform: uppercase;
color: @gray-light;
&.o_mail_open_channels:hover {
color: white;
}
}
.o_add {
cursor: pointer;
opacity: @sidebar-icon-opacity;
&:hover {
opacity: 1;
}
.o-hover-opacity(@sidebar-icon-opacity, 1);
.o-hover-text-color(@gray-light, white);
}
}
}
.o_mail_chat_content {
background-color: white;
.o_chat_composer {
border-top: 1px solid @odoo-brand-optional;
background-color: @odoo-brand-optional;
.o_attachment {
.o_attachment_name, .o_attachment_delete {
color: white;
}
}
}
}
&.o_mail_selection_mode {
@@ -270,15 +264,14 @@
}
}
// User status bullet
.o_mail_user_status {
font-size: 10px;
font-size: 1em;
position: relative;
bottom: 1px;
&.o_user_online {
color: @odoo-brand-optional;
color: @brand-success;
}
&.o_user_idle {
color: orange;
color: @brand-warning;
}
}
+195 -27
View File
@@ -1,50 +1,218 @@
.o_composer_subject {
.o_chat_composer {
position: relative;
.o-flex(0, 0, auto);
.o-flex-display();
padding-bottom: 5px;
.o-align-items(flex-start);
margin: 1px 0;
border-top: none;
background: @gray-lighter;
> input {
.o-flex(1, 1, auto);
padding: 5px;
margin-right: 30px;
}
}
.o_composer, .o_composer_subject {
position: relative;
background: white;
.o_composer {
.o_composer_input > textarea {
width: 100%;
resize: none;
}
.o_composer_mention_dropdown .o_mention_proposition > a {
.o-text-overflow();
width: 100%;
padding: 3px 15px;
.o_mention_name {
font-weight: 500;
textarea, input {
border: none;
}
.o_mention_info {
font-style: italic;
color: gray;
}
.o_composer_subject {
.o-flex-display();
padding-bottom: 5px;
> input {
.o-flex(1, 1, auto);
padding: 5px;
margin-right: 30px;
}
}
.o_composer {
.o_composer_input > textarea {
width: 100%;
resize: none;
}
.o_composer_mention_dropdown .o_mention_proposition > a {
.o-text-overflow();
width: 100%;
padding: 3px 15px;
.o_mention_name {
font-weight: 500;
}
.o_mention_info {
font-style: italic;
color: gray;
}
}
textarea {
resize: none;
}
.btn-icon {
.o-hover-opacity(@default-opacity: 0.8, @hover-opacity: 1);
border: none;
}
.o_composer_button_full_composer {
.o-position-absolute(0, 0);
}
}
// Both inline and not-inline design. Mini-composer disabled.
&:not(.o_chat_mini_composer) {
padding: @mail-thread-avatar-size*0.5;
padding-left: @grid-gutter-width*0.5 + @mail-thread-avatar-size + @o-mail-chatter-gap;
border: 1px solid @gray-lighter-dark;
border-top: none;
.o_chatter_avatar {
.o-position-absolute(0, @left: -@mail-thread-avatar-size - @o-mail-chatter-gap);
}
.o_composer_container, .o_composer_send {
.o-flex-display();
}
.o_chatter_composer_info, .o_composer_suggested_partners {
.o-flex(0, 0, 100%);
margin-bottom: @o-mail-chatter-gap*0.5;
}
.o_composer_container {
position: relative;
.o-flex-flow(column, nowrap);
}
.o_composer {
border-radius: 2px;
textarea {
padding-right: @grid-gutter-width; // avoid overlaps betwenn textarea and o_composer_button_full_composer
}
}
.o_composer, .o_composer_subject {
border: 1px solid @gray-lighter-dark;
textarea, input {
padding: 0 0 @o-mail-chatter-gap;
border: none;
}
}
.o_composer_subject {
border-bottom: 0;
border-radius: 2px 2px 0 0;
}
.o_chatter_composer_tools {
border-top: 1px solid @gray-lighter-dark;
}
&:not(.o_chat_inline_composer) {
.o-flex-flow(row, wrap);
.o_composer_container, .o_composer_button_send {
.o-flex(1, 0, 100%);
}
.o_composer, .o_composer_subject {
padding: @o-mail-chatter-gap @o-mail-chatter-gap 0;
}
.o_composer_send {
margin-top: @o-mail-chatter-gap;
}
}
&.o_chat_inline_composer {
.o_composer_container {
.o-flex(1, 0, auto);
}
.o_composer {
padding: @o-mail-chatter-gap @o-mail-chatter-gap*0.5 0 @o-mail-chatter-gap;
border-radius: 2px 0 0 2px;
border-right: 0;
}
.o_composer_input {
.o-flex-display();
.o-flex-flow(row, wrap);
}
.o_composer_text_field {
.o-flex(1, 1, 50%);
margin: 0;
padding: 0;
}
.o_chatter_composer_tools {
.o-flex(0, 1, auto);
}
.o_composer_attachments_list {
.o-flex(1, 0, 100%);
}
.o_chatter_composer_tools {
border: none;
border-left: 1px solid @gray-lighter-dark;
padding-left: @o-mail-chatter-gap*0.5;
.o-transform(translateY(-@o-mail-chatter-gap*0.5));
}
.o_composer_button_send {
.o-flex(0, 0, auto);
border-radius: 0 3px 3px 0;
// Make the button appear as the same size as the subject input
padding: 10px @padding-base-horizontal;
border: 1px solid darken(@odoo-brand-optional, 5%);
border-left-width: 0;
}
}
}
// Mini-composer enabled
&.o_chat_mini_composer {
.o_composer_container {
border-top: 1px solid @gray-lighter-dark;
width: 100%;
}
.o_composer_input {
.o-flex-display();
.o-flex-flow(row, nowrap);
padding: @o-mail-chatter-gap;
textarea.o_composer_text_field {
.o-flex(1, 1, auto);
padding-top: @o-mail-chatter-gap*0.5;
}
.o_chatter_composer_tools {
.o-flex(0, 0, auto);
}
}
.o_composer_button_send, .o_chatter_avatar, .o_composer_button_add_attachment, .o_composer_attachments_list {
display: none;
}
}
}
.o_composer_attachments_list {
margin-bottom: 5px;
.o_composer_attachments_list:not(:empty) {
margin-top: @o-mail-chatter-gap;
text-align: justify;
}
// Emoji
.o_mail_emoji {
display: inline-block;
height: 24px;
width: 24px;
height: 24px;
> img {
width: 100%;
}
}
.o_composer_emoji .o_mail_emoji {
cursor: pointer; // only in the popover
.o_composer_emoji {
.popover-content {
padding: @o-mail-chatter-gap*0.3 0;
}
.o_mail_emoji {
margin: @o-mail-chatter-gap*0.6;
cursor: pointer; // only in the popover
}
}
// Attachment Icons (common for chat thread and chat composer)
@@ -2,33 +2,26 @@
&.o_thread_less {
.o_chat_search_input {
.o-flex-display();
padding: 5px;
.o-align-items(baseline);
padding: @o-mail-chatter-gap*0.5 @o-mail-chatter-gap;
> span {
.o-flex(0, 0, auto);
}
> input {
margin-left: 5px;
padding: @o-mail-chatter-gap*0.5;
.o-flex(1, 1, 100%);
}
}
.o_mail_thread {
background-color: lightgray;
background-color: @odoo-webclient-background-color;
}
.o_chat_composer {
display: none;
}
}
.o_chat_composer {
.o_composer {
border-top: 1px solid lightgray;
.o_composer_input textarea {
display: block;
padding: 5px;
}
}
.o_composer_attachments_list, .o_composer_buttons {
display: none;
}
}
}
+110 -11
View File
@@ -5,7 +5,101 @@
}
.o_thread_date_separator.o_border_dashed {
border-bottom: dashed #eeeeee 2px;
border-bottom-style: dashed;
&[data-toggle="collapse"] {
cursor: pointer;
.o_chatter_planned_activities_summary {
display: none;
}
&.collapsed {
margin-bottom: 0;
.o-transition(margin, 0.8s);
.o_chatter_planned_activities_summary {
display: inline-block;
span {
padding: 0 5px;
border-radius: 100%;
font-size: 11px;
}
}
i.fa-caret-down:before {
content: '\f0da';
}
}
}
}
#o_chatter_planned_activities {
.o_thread_message {
.o_thread_message_sidebar {
.o_avatar_stack {
position: relative;
text-align: left;
margin-bottom: 8px;
img {
.square(31px);
}
.o_avatar_icon {
.o-position-absolute(@right: -5px, @bottom: -5px);
.square(25px);
padding: 6px 5px;
text-align: center;
line-height: 1.2;
color: white;
border-radius: 100%;
border: 2px solid white;
}
}
}
.o_mail_info {
.o_activity_info {
vertical-align: baseline;
padding: 4px 6px;
background: @gray-lighter;
border-radius: 2px 2px 0 0;
.o-hover-opacity(1, 1);
&.collapsed {
.o-hover-opacity(0.5, 1);
background: transparent;
}
}
}
.o_thread_message_collapse .dl-horizontal.well {
display: inline-block;
margin-bottom: 0;
dt {
max-width: 80px;
}
dd {
margin-left: 95px;
}
}
.o_thread_message_note {
margin: 2px 0 5px;
}
.o_thread_message_tools {
.o_activity_link {
padding: 0 @padding-base-horizontal;
}
.o_activity_done {
padding-left: 0;
}
}
}
}
.o_thread_message_core.o_mail_note {
@@ -17,27 +111,24 @@
}
.o_activity_color_planned {
color: @brand-primary;
color: @brand-success;
}
.o_activity_color_overdue {
color: @brand-danger;
}
.o_activity_color_today {
color: @brand-success;
color: @brand-warning;
}
.o_activity_link {
color: @gray;
&:hover {
color: @brand-success;
}
}
}
/* Feedback popover (form view) */
.o_mail_activity_feedback {
max-width: 410px;
outline: none;
textarea {
min-width: 250px;
}
}
/* Kanban View */
@@ -47,6 +138,14 @@
}
.o_mail_activity {
.o_activity_btn {
span.fa {
overflow: visible;
line-height: 1;
vertical-align: middle;
}
}
.o_activity_link_kanban {
visibility: hidden;
}
+6 -2
View File
@@ -3,11 +3,15 @@
> a {
opacity: 1;
> i {
.o-transform(translateY(4px));
font-size: larger;
}
}
&.o_no_notification > a {
opacity: 0.5;
> i {
.o-transform(translateY(0px));
}
.o_notification_counter {
display: none;
}
@@ -21,9 +25,9 @@
color: white;
padding: 0em 0.3em;
font-size: 0.7em;
top: 7%;
top: 19%;
position: absolute;
margin: 0px 0px 0px 8px;
margin: 0px 0px 0px 6px;
}
.o_mail_navbar_dropdown {
width: 350px;
+5 -5
View File
@@ -11,7 +11,7 @@
.o_thread_date_separator {
margin-top: 15px;
margin-bottom: 30px;
border-bottom: solid @gray-lighter 2px;
border-bottom: 1px solid @gray-lighter;
text-align: center;
.o_thread_date {
@@ -102,10 +102,6 @@
max-width: 100%;
word-wrap: break-word;
&.o_mail_note {
background-color: @gray-lighter;
}
.o_mail_subject {
font-style: italic;
}
@@ -144,6 +140,10 @@
.o_mail_mailto, .o_mail_mailto:hover {
.text-muted();
}
strong {
color: @headings-color;
}
}
.o_thread_message_star, .o_thread_message_needaction, .o_thread_message_reply, .o_thread_message_email {
+66 -35
View File
@@ -1,45 +1,76 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="mail.activity_items">
<div t-if="activities.length" class="o_thread_date_separator o_border_dashed">
<span class="o_thread_date">Planned</span>
<div class="o_thread_date_separator o_border_dashed" data-toggle="collapse" data-target="#o_chatter_planned_activities">
<span class="o_thread_date btn">
<i class="fa fa-fw fa-caret-down"/>
Planned activities
<small class="o_chatter_planned_activities_summary ml8">
<span class="label img-circle label-danger"><t t-esc="nbOverdueActivities"/></span>
<span class="label img-circle label-warning"><t t-esc="nbTodayActivities"/></span>
<span class="label img-circle label-success"><t t-esc="nbPlannedActivities"/></span>
</small>
</span>
</div>
<t t-foreach="activities" t-as="activity">
<div class="o_thread_message">
<div class="o_thread_message_sidebar">
<img t-attf-src="/web/image/res.users/#{activity.user_id[0]}/image_small"
class="o_thread_message_avatar mb8"/>
<a href="#" class="o_activity_done o_activity_link" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover"><span class="fa fa-check-circle fa-2x" /></a>
</div>
<div class="o_thread_message_core o_mail_note">
<div class="o_mail_info">
<strong>
<span t-attf-class="fa #{activity.icon}" />
<t t-esc="activity.activity_type_id[1]" />
</strong>
<span class="fa fa-clock-o ml8" />
<strong>
<span t-attf-class="o_activity_date o_activity_color_#{activity.state}"><t t-esc="activity.label_delay" /> (<t t-esc="activity.date_deadline"/>) </span>
</strong>
planned by <t t-esc="activity.create_uid[1]" />
<t t-if="activity.create_uid[0] != activity.user_id[0]">
for <t t-esc="activity.user_id[1]" />
</t>
- <t t-esc="activity.time_ago"/>
<div class="pull-right">
<a href="#" class="o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">Edit</a> |
<a href="#" class="o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">Remove</a>
<div id="o_chatter_planned_activities" class="collapse in">
<t t-foreach="activities" t-as="activity">
<div class="o_thread_message" style="margin-bottom: 10px">
<div class="o_thread_message_sidebar">
<div class="o_avatar_stack">
<img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" class="o_thread_message_avatar img-circle mb8" t-att-title="activity.create_uid[1]"/>
<i t-att-class="'o_avatar_icon fa ' + activity.icon + ' bg-' + (activity.state == 'planned'? 'success' : (activity.state == 'today'? 'warning' : 'danger')) + '-full'"
t-att-title="activity.activity_type_id[1]"/>
</div>
</div>
<div t-if="activity.summary">
<strong><t t-esc="activity.summary"/></strong>
</div>
<div t-if="activity.note">
<t t-raw="activity.note"/>
<div class="o_thread_message_core o_mail_note">
<div class="o_mail_info">
<strong><span t-attf-class="o_activity_date o_activity_color_#{activity.state}"><t t-esc="activity.label_delay" /></span></strong>:
<strong t-if="activity.summary"> &#8220;<t t-esc="activity.summary"/>&#8221;</strong>
<strong t-if="!activity.summary"> <t t-esc="activity.activity_type_id[1]" /></strong>
<em> for </em>
<t t-esc="activity.user_id[1]" />
<a class="btn btn-link btn-info text-muted collapsed o_activity_info ml4" role="button" data-toggle="collapse" t-attf-data-target="#o_chatter_activity_info_#{activity.id}">
<i class="fa fa-info-circle"></i>
</a>
<div class="o_thread_message_collapse collapse" t-attf-id="o_chatter_activity_info_#{activity.id}">
<dl class="dl-horizontal well">
<dt>Activity type</dt>
<dd class="mb8">
<t t-esc="activity.activity_type_id[1]"/>
</dd>
<dt>Created By</dt>
<dd class="mb8">
<img t-attf-src="/web/image#{activity.create_uid[0] >= 0 ? ('/res.users/' + activity.create_uid[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
<b><t t-esc="activity.create_uid[1]"/></b>
<em>, on</em> <t t-esc="moment(activity.create_date)"/>
</dd>
<dt>Assigned to</dt>
<dd class="mb8">
<img t-attf-src="/web/image#{activity.user_id[0] >= 0 ? ('/res.users/' + activity.user_id[0] + '/image_small') : ''}" height="18" width="18" class="img-circle mr4" t-att-title="activity.create_uid[1]"/>
<b><t t-esc="activity.user_id[1]"/></b>
<em>, due to </em><span t-attf-class="o_activity_color_#{activity.state}"><t t-esc="moment(activity.date_deadline)"/></span>
</dd>
</dl>
</div>
</div>
<div t-if="activity.note" class="o_thread_message_note small">
<t t-raw="activity.note"/>
</div>
<div class="o_thread_message_tools btn-group">
<a href="#" class="btn btn-link btn-success text-muted btn-sm o_activity_done o_activity_link mr8" t-att-data-activity-id="activity.id" t-att-data-previous-activity-type-id="activity.activity_type_id[0]" data-toggle="popover">
<i class="fa fa-check"/> Mark Done
</a>
<a href="#" class="btn btn-link btn-default text-muted btn-sm o_activity_edit o_activity_link" t-att-data-activity-id="activity.id">
<i class="fa fa-pencil"/> Edit
</a>
<a href="#" class="btn btn-link btn-sm btn-danger text-muted o_activity_unlink o_activity_link" t-att-data-activity-id="activity.id">
<i class="fa fa-times"/> Cancel
</a>
</div>
</div>
</div>
</div>
</t>
</t>
</div>
</t>
<t t-name="mail.activity_feedback_form">
<div>
@@ -54,4 +85,4 @@
</div>
</div>
</t>
</templates>
</templates>
+1 -1
View File
@@ -12,7 +12,7 @@
</div>
<div class="o_chat_content">
</div>
<div t-if='!widget.options.input_less' class="o_chat_composer">
<div t-if='!widget.options.input_less' class="o_chat_composer o_chat_mini_composer">
<input class="o_composer_text_field" t-att-placeholder="widget.options.placeholder"/>
</div>
</div>
+18 -22
View File
@@ -6,26 +6,22 @@
-->
<t t-name="mail.chatter.ChatComposer" t-extend="mail.ChatComposer">
<!-- Insert information before the composer -->
<t t-jquery=".o_composer_attachments_list" t-operation="before">
<!-- Internal note composer -->
<t t-if="widget.options.is_log">
<span class="o_chatter_composer_info">
Log an internal note which will not be sent to followers, but which can be read
by users accessing this document.
</span>
</t>
<t t-jquery=".o_composer_container" t-operation="before">
<!-- New message composer -->
<t t-if="!widget.options.is_log">
<!-- Text for followers -->
<span class="o_chatter_composer_info">
To: Followers of
<t t-if="widget.options.record_name">
&quot;<t t-esc="widget.options.record_name"/>&quot;
</t>
<t t-if="!widget.options.record_name">
this document
</t>
</span>
<small class="o_chatter_composer_info">
<b class="text-muted">To: </b>
<em class="text-muted">Followers of </em>
<b>
<t t-if="widget.options.record_name">
&#32;&quot;<t t-esc="widget.options.record_name"/>&quot;
</t>
<t t-if="!widget.options.record_name">
this document
</t>
</b>
</small>
<!-- List of followers -->
<div class="o_composer_suggested_partners">
<t t-foreach='widget.suggested_partners' t-as='recipient'>
@@ -43,7 +39,7 @@
<!-- Add a button to open the full composer dialog -->
<t t-jquery=".o_composer_button_add_attachment" t-operation="after">
<button tabindex="6" class="btn btn-sm btn-icon fa fa-pencil-square-o o_composer_button_full_composer" type="button"/>
<button tabindex="6" class="btn btn-sm btn-icon fa fa-expand o_composer_button_full_composer" type="button"/>
</t>
</t>
@@ -51,14 +47,14 @@
Chatter (mail_thread widget) buttons
-->
<t t-name="mail.Chatter.Buttons">
<button t-if="new_message_btn" type="button" class="btn btn-sm btn-primary o_chatter_button_new_message" title="Send a message">
New message
<button t-if="new_message_btn" type="button" class="btn btn-sm btn-link o_chatter_button_new_message" title="Send a message">
Send message
</button>
<button t-if="log_note_btn" class="btn btn-sm btn-link o_chatter_button_log_note" title="Log a note. Followers will not be notified.">
Log an internal note
Log note
</button>
<button t-if="schedule_activity_btn" class="btn btn-sm btn-link o_chatter_button_schedule_activity" title="Lor or schedule an activity">
Log or schedule an activity
<i class="fa fa-clock-o"/> Schedule activity
</button>
</t>
+14 -7
View File
@@ -17,22 +17,24 @@
</t>
<t t-name="mail.chat.Sidebar">
<div class="o_mail_chat_sidebar">
<div t-attf-class="o_mail_chat_channel_item #{(active_channel_id == 'channel_inbox') ? 'o_active': ''}"
<div t-attf-class="o_mail_chat_title_main o_mail_chat_channel_item #{(active_channel_id == 'channel_inbox') ? 'o_active': ''}"
data-channel-id="channel_inbox">
<span class="o_channel_name"> <i class="fa fa-at"/> Inbox </span>
<span class="o_channel_name"><i class="fa fa-inbox mr8"/>Inbox</span>
<t t-set="counter" t-value="needaction_counter"/>
<t t-call="mail.chat.SidebarNeedaction"/>
</div>
<div t-attf-class="o_mail_chat_channel_item #{(active_channel_id == 'channel_starred') ? 'o_active': ''}"
<div t-attf-class="o_mail_chat_title_main o_mail_chat_title_starred o_mail_chat_channel_item #{(active_channel_id == 'channel_starred') ? 'o_active': ''}"
data-channel-id="channel_starred">
<span class="o_channel_name"> <i class="fa fa-star-o"/> Starred </span>
<span class="o_channel_name"><i class="fa fa-star-o mr8"/>Starred</span>
<t t-set="counter" t-value="starred_counter"/>
<t t-call="mail.chat.SidebarNeedaction"/>
</div>
<hr class="mb8"/>
<t t-set="channel_type" t-value="'public'"/>
<t t-call="mail.chat.SidebarTitle">
<t t-set="channel_title">Channels</t>
<t t-set="channel_icon">fa-users</t>
</t>
<t t-call="mail.chat.SidebarItems">
<t t-set="display_hash" t-value="true"/>
@@ -42,18 +44,20 @@
<t t-set="channel_type" t-value="'dm'"/>
<t t-call="mail.chat.SidebarTitle">
<t t-set="channel_title">Direct Messages</t>
<t t-set="channel_icon">fa-user</t>
</t>
<t t-call="mail.chat.SidebarItems">
<t t-set="display_status" t-value="true"/>
<t t-set="input_placeholder">Open chat</t>
<t t-set="input_placeholder">User name</t>
</t>
<t t-set="channel_type" t-value="'private'"/>
<t t-call="mail.chat.SidebarTitle">
<t t-set="channel_title">Private Channels</t>
<t t-set="channel_icon">fa-eye-slash</t>
</t>
<t t-call="mail.chat.SidebarItems">
<t t-set="input_placeholder">Add a channel</t>
<t t-set="input_placeholder">Add a private channel</t>
<t t-set="display_hash" t-value="true"/>
</t>
</div>
@@ -76,7 +80,10 @@
</t>
<t t-if="!disable_add_channel || !empty">
<div class="o_mail_sidebar_title">
<h4 t-att-class="channel_type == 'public' ? 'o_mail_open_channels' : ''"><t t-esc="channel_title"/></h4>
<h4 t-att-class="channel_type == 'public' ? 'o_mail_open_channels' : ''">
<i t-if="channel_icon" t-attf-class="mr4 fa-fw fa #{channel_icon}"></i>
<b><t t-esc="channel_title"/></b>
</h4>
<span t-if="!disable_add_channel" class="fa fa-plus o_add" title="Add" t-attf-data-type="#{channel_type}"/>
</div>
</t>
+17 -22
View File
@@ -1,31 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<div t-name="mail.ChatComposer" class="o_chat_composer">
<div class="o_composer_attachments_list"/>
<t t-if="widget.extended">
<div class="o_composer_subject">
<input tabindex="1" type="text" class="o_input" placeholder="Subject"></input>
<div class="btn-group o_composer_buttons">
<button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
<button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
<button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
</div>
<div t-name="mail.ChatComposer" t-attf-class="o_chat_composer #{widget.extended ? 'o_chat_composer_extended' : (widget.notInline ? '' : 'o_chat_inline_composer')} #{widget.isMini ? 'o_chat_mini_composer' : ''}">
<div class="o_composer_container">
<img t-if="widget.avatarURL" height="36" width="36" class="o_thread_message_sidebar o_chatter_avatar img-circle" t-att-src="widget.avatarURL"/>
<div t-if="widget.extended" class="o_composer_subject">
<input tabindex="1" type="text" placeholder="Subject" class="o_input"/>
</div>
</t>
<div t-attf-class="o_composer #{widget.extended ? 'o_extended_composer' : ''}">
<div class="o_composer_input">
<textarea class="o_input o_composer_text_field" tabindex="2" placeholder="Write something..."/>
<div t-attf-class="o_composer #{widget.extended ? 'o_extended_composer' : ''}">
<div class="o_composer_input">
<textarea class="o_input o_composer_text_field" tabindex="2" placeholder="Write something..."/>
<div class="o_chatter_composer_tools">
<button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
<button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
</div>
</div>
</div>
<t t-if="!widget.extended">
<div class="btn-group o_composer_buttons">
<button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
<button tabindex="4" class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
<button tabindex="5" class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
</div>
</t>
<div class="o_composer_attachments_list"/>
</div>
<div class="o_composer_send">
<button tabindex="3" class="btn btn-sm btn-primary o_composer_button_send" type="button"><t t-esc="widget.options.send_text"/></button>
</div>
<span class="hide">
<t t-call="HiddenInputFile">
<t t-set="fileupload_id" t-value="widget.fileupload_id"/>
@@ -5,7 +5,7 @@
<t t-jquery=".o_chat_header" t-operation="after">
<div t-if="widget.options.thread_less" class="o_chat_search_input">
<span> To: </span>
<input type="text"/>
<input type="text" placeholder="User name"/>
</div>
</t>
</t>
+6 -4
View File
@@ -11,7 +11,6 @@
data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-user"></i>
<span class="o_followers_count"/>
<span class="caret"/>
</button>
<ul class="dropdown-menu o_followers_list" role="menu"></ul>
</div>
@@ -73,9 +72,12 @@
-->
<t t-name="mail.Followers.subtype">
<li class="o_subtype">
<input type="checkbox" t-att-checked="record.followed"
t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
t-att-data-id="record.id" t-att-name="record.name" class="o_subtype_checkbox"/>
<div class="o_checkbox">
<input type="checkbox" t-att-checked="record.followed"
t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
t-att-data-id="record.id" t-att-name="record.name" class="o_subtype_checkbox"/>
<span/>
</div>
<span t-att-for="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')">
<t t-esc="record.name"/>
</span>
+1 -1
View File
@@ -81,7 +81,7 @@
<t t-name="mail.chat.ActivityMenu">
<li class="o_mail_navbar_item">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Activities" href="#">
<i class="fa fa-check-square-o"/> <span class="o_notification_counter badge"/>
<i class="fa fa-clock-o"/> <span class="o_notification_counter badge"/>
</a>
<ul class="o_mail_navbar_dropdown dropdown-menu" role="menu">
<li class="o_mail_navbar_dropdown_channels"/>
+3 -3
View File
@@ -53,12 +53,12 @@
t-att-src="message.avatar_src"
data-oe-model="res.partner"
t-att-data-oe-id="message.author_redirect ? message.author_id[0] : ''"
t-attf-class="o_thread_message_avatar #{message.author_redirect ? 'o_mail_redirect' : ''}"/>
t-attf-class="o_thread_message_avatar img-circle #{message.author_redirect ? 'o_mail_redirect' : ''}"/>
</t>
<t t-if="message.mailto || !message.author_id[0]">
<img t-if="message.avatar_src &amp;&amp; message.display_author"
t-att-src="message.avatar_src"
class="o_thread_message_avatar"/>
class="o_thread_message_avatar img-circle"/>
</t>
<span t-if="!message.display_author" t-att-title="message.date" class="o_thread_message_side_date">
<t t-esc="message.date.format('hh:mm')"/>
@@ -165,7 +165,7 @@
</t>
<t t-name="mail.ChatComposer.Attachments">
<div class="o_attachments">
<div t-if="attachments.length > 0" class="o_attachments">
<t t-foreach="attachments" t-as='attachment'>
<t t-call="mail.Attachment">
<t t-set="editable" t-value="true"/>
@@ -4,7 +4,7 @@
<t t-name="mail.KanbanActivity">
<div class="o_kanban_inline_block dropdown o_kanban_selection o_mail_activity">
<a class="dropdown-toggle o_activity_btn" data-toggle="dropdown">
<span class="fa fa-chevron-circle-right fa-lg fa-fw"/>
<span class="fa fa-clock-o fa-lg fa-fw"/>
</a>
<ul class="dropdown-menu o_activity" role="menu">
</ul>
+34
View File
@@ -108,9 +108,43 @@
}
//== Buttons
// Mixin to define variations for btn-links and muted btn-links
.o-btn-link-variant(@color, @color-active) {
text-transform: none;
.o-hover-text-color(@default-color: @color, @hover-color: @color-active);
&, &:hover, &:focus, &:active, &.active {
border-color: transparent;
background-color: transparent
}
&.text-muted, .text-muted {
.o-hover-opacity();
.o-hover-text-color(@default-color: @text-muted, @hover-color: @color-active);
}
}
.btn-icon {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.btn-link {
font-weight: @btn-font-weight;
&.btn-default {
.o-btn-link-variant(@text-color, @headings-color);
}
&.btn-success, &.text-success {
.o-btn-link-variant(@text-color, @brand-success);
}
&.btn-warning, &.text-warning {
.o-btn-link-variant(@text-color, @brand-warning);
}
&.btn-danger, &.text-danger {
.o-btn-link-variant(@text-color, @brand-danger);
}
&.btn-info, &.text-info {
.o-btn-link-variant(@text-color, darken(@brand-info, 20%));
}
}
//== Printing improvements
@media print {
+11 -2
View File
@@ -122,6 +122,7 @@
.open .dropdown-menu {
max-height: 90vh; // the dropdown should not overstep the viewport
min-width: 100%;
overflow: auto;
margin-top: 0;
@@ -134,8 +135,16 @@
.o-menu-indentation(3);
}
.oe_topbar_avatar {
height: 15px;
.open .dropdown-toggle {
background-color: @odoo-navbar-inverse-link-hover-bg;
}
.o_user_menu {
margin-left: 6px;
.oe_topbar_avatar {
height: 17px;
.o-transform(translateY(-2px));
}
}
@media (max-width: @screen-xs-max) {
+1 -2
View File
@@ -214,7 +214,6 @@
<li class="o_debug_manager">
<a href="#" title="Open Developer Tools" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-bug"/>
<b class="caret"/>
</a>
<ul class="dropdown-menu o_debug_dropdown" role="menu"/>
</li>
@@ -1353,7 +1352,7 @@
<li class="o_user_menu">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
<img class="img-circle oe_topbar_avatar" t-att-src="_s + '/web/static/src/img/user_menu_avatar.png'"/>
<span class="oe_topbar_name"/> <span class="caret"></span>
<span class="oe_topbar_name"/>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#" data-menu="documentation">Documentation</a></li>