[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)

1 files changed, 110 insertions, 11 deletions

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;
         }