[REF] mail, *: refactor messaging with OWL

This commit is a significant rewriting of client-side discuss, chatter,
chat window, and messaging menu using OWL. The behavior should be broadly
the same, with some slight functional changes here and there.

From a technical standpoint, the code of messaging is mainly organized in 2
main groups of modules:

- models, which are logical entities that depict the client-side state of
  messaging as a whole.
- components, which are in charge of displaying information from models.

This refactoring also introduces new JS guidelines regarding folder structure
(/static) and naming rules for JS modules.

Community PR: https://github.com/odoo/odoo/pull/39023
Enterprise PR: https://github.com/odoo/enterprise/pull/6249

Task-1914207

This PR is a collaborative work by Alexandre, Julien, Sébastien and Xavier,
with the precious help of Lucas to speed it up towards the end.

closes odoo/odoo#39023

Related: odoo/enterprise#6249
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
Co-authored-by: Alexandre Kühn <aku@odoo.com>
Co-authored-by: Julien Giannone <jgi@odoo.com>
Co-authored-by: Lucas Perais <lpe@odoo.com>
Co-authored-by: Sébastien Theys <seb@odoo.com>
Co-authored-by: Xavier Dubuc <xdu@odoo.com>

1 files changed, 174 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/activity/activity.scss b/addons/mail/static/src/components/activity/activity.scss
new file mode 100644
index 00000000000..96117afd9ea
--- /dev/null
+++ b/addons/mail/static/src/components/activity/activity.scss
@@ -0,0 +1,174 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_Activity {
+    display: flex;
+    flex: 0 0 auto;
+    padding: map-get($spacers, 2);
+}
+
+.o_Activity_detailsUserAvatar {
+    margin-inline-end: map-get($spacers, 2);
+    object-fit: cover;
+    height: 18px;
+    width: 18px;
+}
+
+.o_Activity_dueDateText, .o_Activity_summary {
+    margin-inline-end: map-get($spacers, 2);
+}
+
+.o_Activity_iconContainer {
+    @include o-position-absolute($top: auto, $left: auto, $bottom: -5px, $right: -5px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 25px;
+    height: 25px;
+    border-width: 2px;
+}
+
+.o_Activity_info {
+    display: flex;
+    align-items: baseline;
+}
+
+.o_Activity_sidebar {
+    display: flex;
+    flex: 0 0 36px;
+    margin-right: map-get($spacers, 3);
+    justify-content: center;
+}
+
+.o_Activity_toolButton {
+    padding-top: map-get($spacers, 0);
+}
+
+.o_Activity_tools {
+    display: flex;
+}
+
+.o_Activity_user {
+    height: 36px;
+    margin-left: map-get($spacers, 2);
+    margin-right: map-get($spacers, 2);
+    position: relative;
+    width: 36px;
+}
+
+.o_Activity_userAvatar {
+    height: map-get($sizes, 100);
+    width: map-get($sizes, 100);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+$o-mail-activity-default-color: gray('300') !default;
+$o-mail-activity-overdue-color: darken(theme-color('danger'), 10%) !default;
+$o-mail-activity-planned-color: darken(theme-color('success'), 10%) !default;
+$o-mail-activity-today-color: darken(theme-color('warning'), 10%) !default;
+
+
+.o_Activity_deadlineDateText {
+   &.o-default {
+       color: $o-mail-activity-default-color;
+   }
+
+   &.o-overdue {
+       color: $o-mail-activity-overdue-color;
+   }
+
+   &.o-planned {
+       color: $o-mail-activity-planned-color;
+   }
+
+   &.o-today {
+    color: $o-mail-activity-today-color;
+   }
+}
+
+.o_Activity_details {
+    color: gray('500');
+}
+
+.o_Activity_detailsCreatorAvatar {
+    margin-inline-start: map-get($spacers, 2);
+}
+
+.o_Activity_detailsUserAvatar {
+    border-radius: 50%;
+}
+
+.o_Activity_dueDateText {
+    font-weight: bolder;
+
+   &.o-default {
+       color: $o-mail-activity-default-color;
+   }
+
+   &.o-overdue {
+       color: $o-mail-activity-overdue-color;
+   }
+
+   &.o-planned {
+       color: $o-mail-activity-planned-color;
+   }
+
+   &.o-today {
+    color: $o-mail-activity-today-color;
+   }
+}
+
+/* Needed specifity to counter default bootstrap style */
+a:not([href]):not([tabindex]).o_Activity_detailsButton {
+    background: transparent;
+    opacity: 0.5;
+    color: gray('500');
+
+    &:hover {
+        opacity: 1;
+        color: gray('600');
+    }
+}
+
+.o_Activity_detailsCreator {
+    font-weight: bold;
+}
+
+.o_Activity_iconContainer {
+    color: white;
+    border-color: white;
+    border-radius: 100%;
+    border-style: solid;
+}
+
+.o_Activity_sidebar {
+    font-size: smaller;
+}
+
+.o_Activity_summary {
+    font-weight: bolder;
+    color: gray('900');
+}
+
+.o_Activity_toolButton {
+    opacity: 0.5;
+    color: gray('500');
+
+    &:hover {
+        opacity: 1;
+        color: gray('600');
+    }
+}
+
+.o_Activity_userAvatar {
+    border-radius: 50%;
+}
+
+.o_Activity_userName {
+    color: gray('500');
+}
+