[REF] mail: introduce new chatter/discuss design

- Improve overall design
- Better use of UI colours
- Replace planned activities icon
- Vertically align kanban icons
- Remove the 'bell shtcut' and followers caret
- Use a mixin to style the chatter (inline, not inline, compact)

7 files changed, 423 insertions, 131 deletions

diff --git a/addons/mail/static/src/less/chat_window.less b/addons/mail/static/src/less/chat_window.less
index 131b83fcc05..b7daa8d720f 100644
--- a/addons/mail/static/src/less/chat_window.less
+++ b/addons/mail/static/src/less/chat_window.less
@@ -1,5 +1,5 @@
 @o-chat-window-bg: white;
-@o-chat-window-width: 300px;
+@o-chat-window-width: 325px;
 
 .o_chat_window {
     .o-flex-display();
@@ -11,9 +11,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 +31,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 @gray-lighter-dark;
         background-color: @odoo-brand-primary;
-        padding: 5px;
 
         @media (max-width: @screen-xs-max) {
             height: @navbar-height;
@@ -53,9 +55,7 @@
                 color: white;
                 padding: 3px;
                 margin-left: 5px;
-                &:hover {
-                    background-color: darken(@odoo-brand-primary, 10%);
-                }
+                .o-hover-opacity(0.7, 1);
             }
         }
 
@@ -64,6 +64,8 @@
     .o_mail_thread {
         .o-flex(1, 1, auto);
         overflow: auto;
+        border: 1px solid @gray-lighter-dark;
+        border-width: 0 1px;
 
         .o_thread_date_separator {
             margin-top: 0px;
@@ -82,11 +84,7 @@
     }
 
     .o_chat_composer {
-        .o-flex(0, 0, auto);
-        > input {
-            padding: 5px;
-            width: 100%;
-        }
+        .o-chat-composer-design(@mini-composer: true);
     }
 }
 
@@ -94,13 +92,18 @@
     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 +114,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 +130,6 @@
             }
             &:hover {
                 background-color: darken(@odoo-brand-primary, 10%);
-                color: white;
             }
         }
     }
diff --git a/addons/mail/static/src/less/chatter.less b/addons/mail/static/src/less/chatter.less
index dde2eacbc2b..131990db82e 100644
--- a/addons/mail/static/src/less/chatter.less
+++ b/addons/mail/static/src/less/chatter.less
@@ -1,33 +1,222 @@
-.o_chatter {
-    width: 100%;
+@o-mail-chatter-gap: 10px;
 
-    .o_chat_composer {
-        margin-top: 10px;
+// Define the chat_composer design/layout as a mixin
+.o-chat-composer-design(@inline: false, @mini-composer: false) {
+    // All designs/layouts
+    & {
+        position: relative;
+        .o-flex-display();
+        .o-flex(0, 0, auto);
+        .o-align-items(flex-start);
+        margin: 1px 0;
+        border-top: none;
+        background: @gray-lighter;
+
+        .o_composer, .o_composer_subject {
+            position: relative;
+            background: white;
+
+            textarea, input {
+                border: none;
+            }
+        }
+
+        .o_composer {
+            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 e not-inline design. Mini-composer disabled.
+    & when (@mini-composer = false) {
+        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_chatter_composer_info {
-            display: inline-block;
-            margin-bottom: 5px;
-            color: @odoo-main-color-muted;
-            font-style: italic;
+        .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 {
-            margin-top: 10px;
-            .o_composer_input {
-                width: 100%;
-                .box-sizing(content-box);
-                resize: vertical;
-                margin-bottom: 5px;
+            margin-bottom: @o-mail-chatter-gap;
+            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;
+        }
     }
 
-    .o_mail_thread {
-        margin-top: 10px;
+    // Not-inline design.
+    & when (@inline = false) and (@mini-composer = false) {
+        .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;
+        }
     }
 
+    // Inline design.
+    & when (@inline = true) and (@mini-composer = false) {
+        .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
+    & when (@mini-composer = true) {
+        .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;
+        }
+    }
+
+}
+
+// Default chatter layout.
+// Extended in enterprise by form_view.less to achieve the side-chatter
+.o_chatter {
+    width: 100%;
+    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_chat_composer {
+        .o-chat-composer-design();
+    }
+
+    &.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;
+            }
+        }
+    }
 }
diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index 53ac45d8d3f..df1e3bc8560 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -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,15 @@
                 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_chat_composer:not(.o_chat_composer_extended) {
+            .o-chat-composer-design(@inline: true);
+
         }
+        .o_chat_composer.o_chat_composer_extended {
+            .o-chat-composer-design(@inline: false);
+        }
+
         .o_mail_snackbar {
             .o-position-absolute(15px, 15px);
             padding-top: 10px;
@@ -174,24 +171,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 +199,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 +209,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 +240,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 +272,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;
     }
 }
diff --git a/addons/mail/static/src/less/composer.less b/addons/mail/static/src/less/composer.less
index eb5be1225ac..88418bfb4ef 100644
--- a/addons/mail/static/src/less/composer.less
+++ b/addons/mail/static/src/less/composer.less
@@ -36,15 +36,21 @@
 // Emoji
 .o_mail_emoji {
     display: inline-block;
-    height: 24px;
-    width: 24px;
+    .square(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)
diff --git a/addons/mail/static/src/less/extended_chat_window.less b/addons/mail/static/src/less/extended_chat_window.less
index 99a308241eb..028befebdf9 100644
--- a/addons/mail/static/src/less/extended_chat_window.less
+++ b/addons/mail/static/src/less/extended_chat_window.less
@@ -2,32 +2,25 @@
     &.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;
-        }
-        .o_chat_composer {
-            display: none;
+            background-color: @odoo-webclient-background-color;
         }
-    }
 
-    .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 {
+        .o_chat_composer {
             display: none;
         }
     }
diff --git a/addons/mail/static/src/less/mail_activity.less b/addons/mail/static/src/less/mail_activity.less
index 815fbd381fb..9c08d4c0a24 100644
--- a/addons/mail/static/src/less/mail_activity.less
+++ b/addons/mail/static/src/less/mail_activity.less
@@ -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;
-    }
-
-    .o_activity_link {
-        color: @gray;
-        &:hover {
-            color: @brand-success;
-        }
+        color: @brand-warning;
     }
-
 }
+
 /* 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;
         }
diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less
index 8cb0bbae55f..da06d8fe91d 100644
--- a/addons/mail/static/src/less/thread.less
+++ b/addons/mail/static/src/less/thread.less
@@ -11,7 +11,7 @@
     .o_thread_date_separator {
         margin-top: 15px;
         margin-bottom: 30px;
-        border-bottom: solid @gray-lighter 2px;
+        border-bottom: solid #E5E5E5 1px; // @gray-lighter
         text-align: center;
 
         .o_thread_date {
@@ -102,9 +102,7 @@
             max-width: 100%;
             word-wrap: break-word;
 
-            &.o_mail_note {
-                background-color: @gray-lighter;
-            }
+            &.o_mail_note {}
 
             .o_mail_subject {
                 font-style: italic;
@@ -144,6 +142,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 {