initial commit 2

10 files changed, 1192 insertions, 0 deletions

diff --git a/addons/mail/static/src/scss/activity_view.scss b/addons/mail/static/src/scss/activity_view.scss
new file mode 100644
index 00000000..bbb819eb
--- /dev/null
+++ b/addons/mail/static/src/scss/activity_view.scss
@@ -0,0 +1,132 @@
+.o_activity_view {
+    height: 100%;
+    > table {
+        background-color: white;
+        thead > tr > th:first-of-type {
+            min-width: 300px;
+        }
+        tbody > tr > td, tfoot > tr > td {
+            cursor: pointer;
+        }
+    }
+    .o_activity_summary_cell {
+        background-color: #FFF;
+        &.planned {
+            background-color: theme-color('success');
+        }
+        &.overdue {
+            background-color: theme-color('danger');
+        }
+        &.today {
+            background-color: theme-color('warning');
+        }
+        .o_kanban_inline_block {
+            min-height: 42px;
+        }
+        .dropdown-toggle {
+            cursor: pointer;
+            .o_closest_deadline {
+                height: 42px;
+                width: 100%;
+                color: #FFF;
+                text-align: center;
+                line-height: 42px;
+            }
+        }
+        &.o_activity_empty_cell {
+            > i {
+                display: none;
+            }
+            &:hover {
+                background-color: #eee;
+
+                > i {
+                    color: gray;
+                    display: block;
+                }
+            }
+        }
+        .o_activity_btn > .badge {
+            @include o-position-absolute($bottom: 0, $right: 0);
+
+            &.planned {
+                color: theme-color('success');
+            }
+            &.overdue {
+                color: theme-color('danger');
+            }
+            &.today {
+                color: theme-color('warning');
+            }
+        }
+    }
+
+    // it contains a kanban card representing the record
+    .o_activity_record {
+        display: flex;
+        flex: 1 1 auto;
+        align-items: center;
+        padding: 8px 8px;
+        cursor: pointer;
+
+        > img {
+            width: 32px;
+            max-height: 32px;
+            margin-right: 16px;
+        }
+
+        > div {
+            max-width: 200px;
+
+            .o_text_block {
+                @include o-text-overflow;
+                display: block;
+            }
+        }
+
+        .o_text_bold {
+            font-weight: bold;
+        }
+
+        .o_text_block {
+            display: block;
+        }
+    }
+    .o_activity_filter_planned {
+        background-color: mix(theme-color('success'), $o-webclient-background-color, 5%);
+    }
+    .o_activity_filter_today {
+        background-color: mix(theme-color('warning'), $o-webclient-background-color, 5%);
+    }
+    .o_activity_filter_overdue {
+        background-color: mix(theme-color('danger'), $o-webclient-background-color, 5%);
+    }
+    .o_record_selector {
+        color: $o-enterprise-primary-color;
+    }
+    .o_activity_type_cell {
+        padding:10px;
+        min-width:100px;
+        .fa-ellipsis-v {
+            cursor: pointer;
+        }
+
+        .o_template_element {
+            white-space: nowrap;
+            padding:5px;
+            cursor: pointer;
+            &:hover {
+                color: theme-color('success');
+            }
+        }
+        .o_kanban_counter {
+            margin: 5px 0 0 0;
+            > .o_kanban_counter_progress {
+                width: 100%;
+                > div.active {
+                    border: 1px solid;
+                }
+            }
+        }
+    }
+}
diff --git a/addons/mail/static/src/scss/composer.scss b/addons/mail/static/src/scss/composer.scss
new file mode 100644
index 00000000..b478c0b0
--- /dev/null
+++ b/addons/mail/static/src/scss/composer.scss
@@ -0,0 +1,161 @@
+@font-face {
+    font-family: 'emojifont';
+    src: local('Segoe UI'),
+         local('Apple Color Emoji'),
+         local('Android Emoji'),
+         local('Noto Color Emoji'),
+         local('Twitter Color Emoji'),
+         local('Twitter Color'),
+         local('EmojiOne Color'),
+         local('EmojiOne'),
+         local(EmojiSymbols),
+         local(Symbola);
+}
+
+// Emoji
+.o_mail_emoji {
+    display: inline-block;
+    padding: 0;
+    font-size: 1.3rem;
+    font-family: emojifont;
+}
+.o_mail_preview .o_mail_emoji {
+    font-size: 100%;
+}
+
+@mixin o-viewer-black-btn {
+    background-color: rgba(black, 0.4);
+    color: rgba(theme-color('light'), 0.7);
+
+    &:hover {
+        background-color: rgba(black, 0.6);
+        color: white;
+    }
+
+    &.disabled {
+        color: gray('600');
+        background: none;
+    }
+}
+.o_modal_fullscreen {
+    z-index: $o-mail-thread-window-zindex + 1;
+
+    .o_viewer_content {
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        .o_viewer-header {
+            @include o-position-absolute(0, 0, $left: 0);
+            height: 45px;
+            padding: $grid-gutter-width*0.5;
+            background-color: rgba(black, 0.8);
+            z-index: 1;
+            color: #FFFFFF;
+
+            a {
+                @include o-hover-text-color(rgba(theme-color('light'), 0.6), white);
+            }
+
+            .o_close_btn {
+                @include o-position-absolute(-1px, $grid-gutter-width*0.5);
+                font-size: $h1-font-size;
+                font-weight: 300;
+            }
+
+            .o_image_caption {
+                bottom: 20%;
+                position: absolute;
+            }
+        }
+
+        .o_loading_img {
+            @include o-position-absolute($top: 45%, $right: 0, $left: 0);
+        }
+
+        .o_viewer_img_wrapper {
+            cursor: pointer;
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(black, 0.7);
+
+            .o_viewer_zoomer {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 45px 0;
+
+                img {
+                    image-orientation: from-image; // Only supported in Firefox
+                }
+
+                img, video {
+                    cursor :auto;
+                    max-width: 100%;
+                    max-height: 100%;
+                    transition: 0.2s cubic-bezier(0, 0, 0.49, 1.6) 0s, opacity 0.15s;
+                    box-shadow: 0 0 40px black;
+                }
+
+                .o_viewer_pdf {
+                    width: 80%;
+                    height: 100%;
+                    border: 0px;
+                    box-shadow: 1px 1px 20px 1px #000;
+                }
+
+                @include media-breakpoint-down(sm) {
+                    .o_viewer_pdf, .o_viewer_text {
+                        width: 100%;
+                    }
+                }
+
+                .o_viewer_text {
+                    width: 80%;
+                    height: 100%;
+                    border: 0px;
+                    box-shadow: 1px 1px 20px 1px #000;
+                    background-color: white;
+                }
+
+                .o_viewer_video {
+                    height: 80%;
+                }
+            }
+        }
+
+        .o_viewer_toolbar {
+            @include o-position-absolute($bottom: $grid-gutter-width*0.5);
+            width: 100%;
+            overflow: hidden;
+            justify-content: center;
+            border-radius: 4px;
+
+            > .btn-group {
+                background-color: rgba(black, 0.4);
+            }
+
+            .o_viewer_toolbar_btn {
+                @include o-viewer-black-btn;
+                padding-left: 8px;
+                padding-right: 8px;
+            }
+        }
+    }
+
+    .arrow {
+        @include o-position-absolute(50%, $grid-gutter-width*0.5);
+        border-radius: 100%;
+        padding: 12px 16px 11px 18px;
+        @include o-viewer-black-btn;
+    }
+
+    .arrow-left {
+        left: $grid-gutter-width*0.5;
+        right: auto;
+        padding: 12px 18px 11px 16px;
+    }
+}
diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss
new file mode 100644
index 00000000..22e5e71c
--- /dev/null
+++ b/addons/mail/static/src/scss/discuss.scss
@@ -0,0 +1,191 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_mail_user_status {
+    font-size: 1em;
+    position: relative;
+    &.o_user_online {
+        color: $o-enterprise-primary-color;
+    }
+    &.o_user_idle {
+        color: theme-color('warning');
+    }
+    &.fa-stack {
+        width: 1em;
+        height: 1em;
+        line-height: 1em;
+    }
+}
+
+// ------------------------------------------------------------------
+// Thread preview: shared between discuss (mobile) and systray
+// ------------------------------------------------------------------
+
+.o_mail_preview {
+    display: flex;
+    background-color: theme-color('light');
+    color: $o-main-text-color;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    &:hover {
+        background-color: gray('300');
+        .o_preview_name {
+            color: $headings-color;
+        }
+        .o_discuss_icon {
+            opacity: 1;
+        }
+    }
+    &:not(:last-child) {
+        border-bottom: 1px solid gray('400');
+    }
+    .o_mail_preview_image {
+        display: flex;
+        align-items: center;
+        flex: 0 0 auto;
+        position: relative;
+        width: 40px;
+        height: 40px;
+        object-fit: cover;
+        > img {
+            max-width: 100%;
+            max-height: 100%;
+            border-radius: 50%;
+            object-fit: cover;
+        }
+        &.o_mail_preview_app > img {
+            border-radius: 2px;
+        }
+        .o_mail_user_status {
+            @include o-position-absolute($bottom: 0px, $right: 0px);
+        }
+    }
+    .o_preview_info {
+        flex: 1 1 100%;
+        overflow: hidden;
+        .o_preview_title {
+            align-items: center;
+            display: flex;
+            .o_preview_name {
+                flex: 0 1 auto;
+                @include o-text-overflow;
+            }
+            .o_mail_activity_action_buttons {
+                display: flex;
+                flex: 1 1 auto;
+                flex-flow: row-reverse wrap;
+            }
+            .o_mail_activity_action {
+                padding-top: 0px;
+                padding-bottom: 0px;
+                padding-right: 0px;
+            }
+            .o_preview_counter {
+                flex: 0 1 auto;
+            }
+            .o_thread_window_expand {
+                margin: 0px 6px;
+            }
+            .o_last_message_date {
+                flex: 0 0 auto;
+                color: $o-main-color-muted;
+                font-weight: 500;
+            }
+        }
+        .o_last_message_preview {
+            width: 94%;
+            max-height: 20px;
+            color: $o-main-color-muted;
+            @include o-text-overflow;
+        }
+    }
+    .o_discuss_icon {
+        opacity: 0;
+    }
+    &.o_preview_unread {
+        background-color: transparent;
+        &:hover {
+            background-color: theme-color('light');
+        }
+        .o_preview_info {
+            .o_preview_title {
+                .o_preview_name, .o_preview_counter {
+                    font-weight: 700;
+                }
+                .o_last_message_date {
+                    color: $o-brand-primary;
+                }
+            }
+        }
+    }
+    &.o_systray_activity {
+        background-color: transparent;
+        &:hover {
+            background-color: theme-color('light');
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+
+    .o_main_navbar > ul.o_menu_systray > li .dropdown-menu.show {
+        border: none;
+    }
+
+    .o_mail_preview {
+        padding: $o-mail-chatter-mobile-gap;
+
+        .o_preview_info, .o_last_message_date {
+            margin-left: $o-mail-chatter-mobile-gap;
+        }
+
+        .o_preview_name {
+            font-size: 1.1em;
+        }
+
+        .o_last_message_date {
+            font-size: 0.9em;
+        }
+
+        .o_last_message_preview {
+            margin-top: $o-mail-chatter-mobile-gap*0.5;
+        }
+    }
+
+    .o_mail_mobile_tabs {
+        display: flex;
+        box-shadow: 0 0 8px gray('400');
+
+        .o_mail_mobile_tab {
+            display: flex;
+            flex: 1 1 auto;
+            width: 20%;
+            flex-flow: column nowrap;
+            justify-content: space-between;
+            padding: $o-mail-chatter-mobile-gap $o-mail-chatter-mobile-gap*2;
+            box-shadow: 1px 0 0 gray('400');
+            text-align: center;
+
+            > span {
+               display: block;
+               font-weight: 500;
+               font-size: 10px;
+
+               &.fa {
+                   padding-bottom: $o-mail-chatter-mobile-gap*2;
+                   font-size: 1.3em;
+               }
+            }
+
+            &.active > span {
+                color: $o-brand-primary;
+            }
+        }
+    }
+}
diff --git a/addons/mail/static/src/scss/emojis.scss b/addons/mail/static/src/scss/emojis.scss
new file mode 100644
index 00000000..b2cb71a4
--- /dev/null
+++ b/addons/mail/static/src/scss/emojis.scss
@@ -0,0 +1,67 @@
+// General variable
+$o-mail-emoji-height: 2rem;
+
+.o_mail_add_emoji {
+    float: right;
+    margin-bottom: 1rem;
+    .dropdown-menu {
+        .o_mail_emoji {
+            cursor: pointer;
+            padding: 2px;
+            width: $o-mail-emoji-height;
+            height: $o-mail-emoji-height;
+            @include hover-focus() {
+                background-color: grey('100');
+            }
+        }
+    }
+}
+
+.o_form_view {
+    // Emojis widgets should hide the emoji dropdown button when the field is invisible.
+    // This is necessary because the button is added *after* the main element (and not inside)
+    // (see '_attachEmojisDropdown' for more details)
+    .o_invisible_modifier + .o_mail_add_emoji{
+        display: none !important;
+    }
+}
+
+.o_mail_emojis_dropdown {
+    height: $o-mail-emoji-height;
+    width: 40px;
+    float: right;
+    bottom: 33px;
+    margin-bottom: -$o-mail-emoji-height;
+
+    * {
+        outline: none!important;
+        box-shadow: none!important;
+    }
+
+    .dropdown-toggle:after {
+        display: none;
+    }
+}
+
+.o_mail_emojis_dropdown_translation {
+    // if the button is added to a text field with a button "language"
+    // add margin-right, so the emojis button is placed on the left of the
+    // language button
+    margin-right: 20px;
+}
+
+.o_mail_emojis_dropdown_textarea{
+    bottom: 40px;
+}
+
+
+.o_xxs_form_view {
+    .o_mail_emojis_dropdown {
+        bottom: 50px;
+    }
+    .o_mail_add_emoji {
+        .dropdown-menu {
+            max-width: 320px;
+        }
+    }
+}
diff --git a/addons/mail/static/src/scss/kanban_view.scss b/addons/mail/static/src/scss/kanban_view.scss
new file mode 100644
index 00000000..02e11eb1
--- /dev/null
+++ b/addons/mail/static/src/scss/kanban_view.scss
@@ -0,0 +1,64 @@
+$o-kanban-attachement-image-size: 80px;
+
+.o_kanban_view {
+
+    .o_kanban_record.o_kanban_attachment {
+        padding: 0;
+
+        .o_kanban_image {
+            width: $o-kanban-attachement-image-size;
+
+            + div {
+                padding-left: $o-kanban-attachement-image-size + $o-kanban-inside-hgutter;
+                @include media-breakpoint-down(sm) {
+                    padding-left:  $o-kanban-attachement-image-size + $o-kanban-inside-hgutter-mobile;
+                }
+            }
+
+            .o_kanban_image_wrapper {
+                min-height: $o-kanban-attachement-image-size;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .o_attachment_image {
+                @include size($o-kanban-attachement-image-size);
+            }
+
+            .o_image {
+                @include size($o-kanban-attachement-image-size*0.7);
+            }
+        }
+
+        .o_kanban_details {
+            .o_kanban_details_wrapper {
+                display: flex;
+                flex-direction: column;
+                min-height: $o-kanban-attachement-image-size;
+                padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter;
+
+                .o_kanban_record_title {
+                    margin-bottom: $o-kanban-inside-vgutter*0.5;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    width: 95%;
+                }
+
+                .o_kanban_record_body {
+                    flex: 1 1 auto;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    font-size: smaller;
+                }
+
+                .oe_kanban_avatar {
+                    border-radius: 4px;
+                    border: 1px solid $component-active-color;
+                }
+            }
+        }
+    }
+}
diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
new file mode 100644
index 00000000..2b316232
--- /dev/null
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -0,0 +1,242 @@
+/* Common */
+.o_mail_activity {
+    &.o_field_widget {
+        display: block;
+    }
+
+    .o_thread_date_separator.o_border_dashed {
+        border-bottom-style: dashed;
+
+        &[data-toggle="collapse"] {
+            cursor: pointer;
+
+            .o_chatter_planned_activities_summary {
+                display: none;
+            }
+
+            &.collapsed {
+                margin-bottom: 0;
+                transition: margin 0.8s ease 0s;
+
+                .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 {
+                        width: 31px;
+                        height: 31px;
+                        object-fit: cover;
+                    }
+
+                    .o_avatar_icon {
+                        @include o-position-absolute($right: -5px, $bottom: -5px);
+                        width: 25px;
+                        height: 25px;
+                        object-fit: cover;
+                        padding: 6px 5px;
+                        text-align: center;
+                        line-height: 1.2;
+                        color: white;
+                        border-radius: 100%;
+                        border: 2px solid white;
+                    }
+                }
+            }
+
+            .o_mail_info {
+                .o_activity_summary {
+                    @include o-text-overflow;
+                    max-width: 290px;
+                    vertical-align: middle;
+                }
+                .o_activity_info {
+                    vertical-align: baseline;
+                    padding: 4px 6px;
+                    background: theme-color('light');
+                    border-radius: 2px 2px 0 0;
+                    @include o-hover-opacity(1, 1);
+
+                    &.collapsed {
+                        @include o-hover-opacity(0.5, 1);
+                        background: transparent;
+                    }
+                }
+            }
+
+            .o_thread_message_collapse .dl-horizontal.card {
+                display: inline-block;
+                margin-bottom: 0;
+
+                dt {
+                    max-width: 80px;
+                }
+                dd {
+                    margin-left: 95px;
+                }
+            }
+
+            .o_thread_message_note {
+                margin: 2px 0 5px;
+                padding: 0px;
+            }
+            .o_thread_message_warning {
+                margin: 2px 0 5px;
+            }
+
+            .o_activity_template_preview,.o_activity_template_send {
+                font-weight: bold;
+                color: $o-brand-primary;
+                cursor: pointer;
+                &:hover:not(.active) {
+                    color: darken($o-brand-primary, 15%);
+                    border-color: darken($o-brand-primary, 15%);
+                }
+            }
+
+            .o_thread_message_tools {
+                .o_activity_link {
+                    padding: 0 $input-btn-padding-x;
+                }
+                .o_activity_done {
+                    padding-left: 0;
+                }
+            }
+        }
+    }
+
+    .o_activity_color_default {
+        color: #dddddd;
+    }
+
+    .o_activity_color_planned {
+        color: darken(theme-color('success'), 10%);
+    }
+    .o_activity_color_overdue {
+        color: darken(theme-color('danger'), 10%);
+    }
+    .o_activity_color_today {
+        color: darken(theme-color('warning'), 10%);
+    }
+}
+
+/* Feedback popover (form view) */
+.o_mail_activity_feedback {
+    max-width: 410px;
+    outline: none;
+
+    textarea {
+        min-width: 250px;
+    }
+}
+
+/* list_activity widget */
+.o_list_view {
+    .o_list_table tbody > tr {
+        > td.o_data_cell.o_list_activity_cell {
+            overflow: visible !important; // allow the activity dropdown to overflow
+            .o_mail_activity {
+                display: flex;
+                max-width: 275px;
+                .o_activity_btn {
+                    margin-right: 3px;
+                }
+                .o_activity_summary {
+                    @include o-text-overflow;
+                }
+            }
+        }
+    }
+}
+
+/* Kanban View */
+.o_kanban_record{
+    .o_kanban_inline_block {
+        display: inline-block;
+    }
+}
+
+.o_kanban_record, .o_view_controller{
+    .o_mail_activity {
+        .o_activity_btn {
+            span.fa {
+                overflow: visible;
+                line-height: 1;
+                vertical-align: middle;
+            }
+        }
+
+        div.o_activity {
+            min-width: 290px;
+            padding: 0px 0px;
+
+            .o_activity_log_container {
+                max-height: 300px;
+                overflow-y: auto;
+            }
+
+            ul.o_activity_log {
+                color: $body-color;
+
+                li {
+                    .o_activity_title_entry {
+                        display: flex;
+                        align-items: baseline;
+                        max-width: 275px;
+                        .o_activity_summary {
+                            @include o-text-overflow;
+                        }
+                    }
+
+                    .o_edit_button {
+                        opacity: 0.5;
+                    }
+
+                    &:hover .o_edit_button{
+                        opacity: 1;
+                    }
+
+                    .o_activity_link_kanban {
+                        font-size: 1.5em;
+                        @include o-hover-text-color($text-muted, theme-color('success'));
+                        @include o-hover-opacity(0.5, 1);
+                    }
+
+                    &.o_activity_selected {
+                        border-bottom: 0;
+                    }
+
+                    &.o_activity_form > div {
+                        padding-top: 0.5em;
+                        padding-bottom: 0.7em;
+                    }
+                }
+            }
+
+            .o_no_activity {
+                padding: 10px;
+                cursor: initial;
+            }
+        }
+    }
+}
diff --git a/addons/mail/static/src/scss/many2one_avatar_user.scss b/addons/mail/static/src/scss/many2one_avatar_user.scss
new file mode 100644
index 00000000..cd3fdd38
--- /dev/null
+++ b/addons/mail/static/src/scss/many2one_avatar_user.scss
@@ -0,0 +1,6 @@
+.o_field_many2one_avatar.o_clickable_m2o_avatar {
+    .o_m2o_avatar:hover {
+        cursor: pointer;
+        filter: brightness(0.8);
+    }
+}
diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
new file mode 100644
index 00000000..e198424e
--- /dev/null
+++ b/addons/mail/static/src/scss/systray.scss
@@ -0,0 +1,137 @@
+// Systray icon and dropdown
+.o_mail_systray_item {
+    > a {
+        > i {
+            font-size: larger;
+        }
+    }
+    &.o_no_notification > a {
+        @include o-mail-systray-no-notification-style();
+
+        .o_notification_counter {
+            display: none;
+        }
+    }
+    &.show .o_mail_systray_dropdown {
+        display: flex;
+        flex-flow: column nowrap;
+    }
+    .o_notification_counter {
+        margin-top: -0.8rem;
+        margin-right: 0;
+        margin-left: -0.6rem;
+        background: $o-enterprise-primary-color;
+        color: white;
+        vertical-align: super;
+        font-size: 0.7em;
+    }
+    .o_mail_systray_dropdown {
+        direction: ltr;
+        width: 350px;
+        padding: 0;
+
+        .o_spinner {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: $o-main-text-color;
+            height: 50px;
+        }
+
+        .o_mail_systray_dropdown_top {
+            display: flex;
+            flex: 0 0 auto;
+            justify-content: space-between;
+            border-bottom: 1px solid gray('400');
+            box-shadow: 0 0 2px gray('400');
+            .o_filter_button, .o_new_message {
+                padding: 5px;
+            }
+            .o_filter_button {
+                color: $o-main-color-muted;
+                &:hover, &.active {
+                    color: $o-brand-primary;
+                }
+                &.active {
+                    cursor: default;
+                    font-weight: bold;
+                }
+            }
+        }
+
+        .o_mail_systray_dropdown_items {
+            flex: 0 1 auto;
+            max-height: 400px;
+            min-height: 50px;
+            overflow-y: auto;
+
+            @include media-breakpoint-up(md) {
+                .o_mail_preview {
+                    min-height: 50px;
+                    padding: 5px;
+                    .o_mail_preview_image .fa-circle-o {
+                        display: none;
+                    }
+                    .o_preview_info {
+                        margin-left: 10px;
+                        .o_preview_title {
+                            .o_last_message_date {
+                                padding-top: 2px;
+                                font-size: x-small;
+                                margin-left: 10px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .o_activity_filter_button {
+            padding: 2px;
+        }
+        .o_no_activity {
+            cursor: initial;
+            align-items: center;
+            color: grey;
+            opacity: 0.5;
+            padding: 3px;
+        }
+    }
+}
+
+.o_no_thread_window .o_mail_systray_dropdown .o_new_message {
+    display: none;  // hide 'new message' button if chat windows are disabled
+}
+
+// Mobile rules
+// Goal: mock the design of Discuss in mobile
+@include media-breakpoint-down(sm) {
+    .o_mail_systray_item {
+        .o_notification_counter {
+            top: 10%;
+        }
+        .o_mail_systray_dropdown {
+            position: relative;
+            .o_mail_systray_dropdown_top {
+                padding: 5px;
+            }
+            .o_mail_systray_mobile_header {
+                padding: 5px;
+                height: 44px;
+                border-bottom: 1px solid #ebebeb;
+                box-shadow: 0 0 2px gray('400');
+            }
+            .o_mail_systray_dropdown_items {
+                max-height: none;
+                padding-bottom: 52px; // leave space for tabs
+            }
+            .o_mail_mobile_tabs {
+                position: fixed;
+                bottom: 0px;
+                left: 0px;
+                right: 0px;
+                background-color: white;
+                color: $o-main-text-color;
+            }
+        }
+    }
+}
diff --git a/addons/mail/static/src/scss/thread.scss b/addons/mail/static/src/scss/thread.scss
new file mode 100644
index 00000000..070adb6d
--- /dev/null
+++ b/addons/mail/static/src/scss/thread.scss
@@ -0,0 +1,173 @@
+.o_mail_activity {
+
+    .o_thread_date_separator {
+        margin-top: 15px;
+        margin-bottom: 30px;
+        @include media-breakpoint-down(sm) {
+            margin-top: 0px;
+            margin-bottom: 15px;
+        }
+        border-bottom: 1px solid gray('400');
+        text-align: center;
+
+        .o_thread_date {
+            position: relative;
+            top: 10px;
+            margin: 0 auto;
+            padding: 0 10px;
+            font-weight: bold;
+            background: white;
+        }
+    }
+
+    .o_thread_message {
+        display: flex;
+        padding: 4px $o-horizontal-padding;
+        margin-bottom: 0px;
+
+        .o_thread_message_sidebar {
+            flex: 0 0 $o-mail-thread-avatar-size;
+            margin-right: 10px;
+            margin-top: 2px;
+            text-align: center;
+            font-size: smaller;
+            .o_thread_message_sidebar_image {
+                position: relative;
+                height: $o-mail-thread-avatar-size;
+
+                .o_updatable_im_status {
+                    width: $o-mail-thread-avatar-size;
+                }
+                .o_mail_user_status {
+                    position: absolute;
+                    bottom: 0;
+                    right: 0;
+
+                    &.fa-circle-o {
+                        display: none;
+                    }
+                }
+            }
+
+            @include media-breakpoint-down(sm) {
+                margin-top: 4px;
+                font-size: x-small;
+            }
+
+            .o_thread_message_avatar {
+                width: $o-mail-thread-avatar-size;
+                height: $o-mail-thread-avatar-size;
+                object-fit: cover;
+            }
+        }
+        .o_thread_icon {
+            cursor: pointer;
+            opacity: 0;
+        }
+
+        &:hover {
+            .o_thread_icon {
+                display: inline-block;
+                opacity: $o-mail-thread-icon-opacity;
+                &:hover {
+                    opacity: 1;
+                }
+            }
+        }
+
+        .o_mail_redirect {
+            cursor: pointer;
+        }
+
+        .o_thread_message_core {
+            flex: 1 1 auto;
+            min-width: 0;
+            max-width: 100%;
+            word-wrap: break-word;
+            .o_thread_message_content > pre {
+                white-space: pre-wrap;
+                word-break: break-word;
+            }
+
+            .o_mail_note_title {
+                margin-top: 9px;
+            }
+
+            .o_mail_subject {
+                font-style: italic;
+            }
+
+            .o_mail_notification {
+                font-style: italic;
+                color: gray;
+            }
+
+            [summary~=o_mail_notification] { // name conflicts with channel notifications, but is odoo notification buttons to hide in chatter if present
+                display: none;
+            }
+
+            p {
+                margin: 0 0 9px; // Required by the old design to override a general rule on p's
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+            a {
+                display: inline-block;
+                word-break: break-all;
+            }
+            :not(.o_image_box) > img {
+                max-width: 100%;
+                height: auto;
+            }
+
+            .o_mail_body_long {
+                display: none;
+            }
+
+            .o_mail_info {
+                margin-bottom: 2px;
+
+                strong {
+                    color: $headings-color;
+                }
+            }
+
+            .o_thread_message_needaction, .o_thread_message_reply {
+                padding: 4px;
+            }
+        }
+    }
+    .o_thread_title {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-weight: bold;
+        font-size: 125%;
+
+        &.o_neutral_face_icon:before {
+            @extend %o-nocontent-init-image;
+            @include size(120px, 140px);
+            background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center;
+        }
+    }
+
+    .o_mail_no_content {
+        @include o-position-absolute(30%, 0, 0, 0);
+        text-align: center;
+        font-size: 115%;
+    }
+
+    .o_thread_message .o_thread_message_core .o_mail_read_more {
+        display: block;
+    }
+}
+
+.o_web_client .popover .o_thread_tooltip_icon {
+    min-width: 1rem;
+}
+
+.o_web_client.o_touch_device {
+    .o_mail_thread .o_thread_icon {
+        opacity: $o-mail-thread-icon-opacity;
+    }
+}
diff --git a/addons/mail/static/src/scss/variables.scss b/addons/mail/static/src/scss/variables.scss
new file mode 100644
index 00000000..051a761d
--- /dev/null
+++ b/addons/mail/static/src/scss/variables.scss
@@ -0,0 +1,19 @@
+$o-mail-thread-avatar-size: 36px !default;
+$o-mail-thread-icon-opacity: 0.6 !default;
+$o-mail-thread-side-date-opacity: 0.6 !default;
+$o-mail-thread-window-bg: #FAFAFA !default;
+$o-mail-thread-window-width: 325px !default;
+$o-mail-chatter-gap: 10px !default;
+$o-mail-chatter-mobile-gap: 2% !default;
+$o-mail-chat-header-height: 46px !default;
+$o-mail-attachment-image-size: 100px !default;
+$o-mail-sidebar-icon-opacity: 0.7 !default;
+$o-mail-chat-sidebar-width: 250px !default;
+$o-mail-partner-avatar-size: 24px !default;
+// Needed because $border-radius variations are all set to 0 in enterprise.
+$o-mail-rounded-rectangle-border-radius-sm: .2rem !default;
+$o-mail-rounded-rectangle-border-radius-lg: 3 * $o-mail-rounded-rectangle-border-radius-sm !default;
+
+@mixin o-mail-systray-no-notification-style {
+    opacity: 0.5;
+}