[IMP] mail: improve Discuss UI for mobile devices

- Brand new UI for Discuss client action (with tabs for Inbox,
  chats, channels...)
- In mobile, conversations always open in Chat Windows
- Chat window UI improved (both mobile and desktop)
- Channels preview (used in the systray menu, and now in the mobile
  UI of Discuss) improved
- Other minor less tweaks

6 files changed, 605 insertions, 21 deletions

diff --git a/addons/mail/static/src/less/chat_window.less b/addons/mail/static/src/less/chat_window.less
index 3e93945d194..bafe43e2974 100644
--- a/addons/mail/static/src/less/chat_window.less
+++ b/addons/mail/static/src/less/chat_window.less
@@ -1,7 +1,8 @@
-@o-chat-window-bg: white;
+@o-chat-window-bg: #FAFAFA;
 @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-header-height: 44px;
 
 .o_chat_window {
     .o-flex-display();
@@ -13,13 +14,14 @@
     max-height: 100%;
     font-size: 12px;
     background-color: @o-chat-window-bg;
-    border-radius: 3px 3px 0 0;
+    border-radius: 6px 6px 0 0;
     z-index: 3;
-    box-shadow: -5px -5px 20px fade(black, 28%);
+    box-shadow: -5px -5px 10px fade(black, 18%);
 
     @media (max-width: @screen-xs-max) {
         width: 100%;
         height: 100%!important;
+        box-shadow: none;
         &.o_folded {
             display: none;
         }
@@ -37,16 +39,26 @@
         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: 8px;
 
         @media (max-width: @screen-xs-max) {
-            height: @navbar-height;
-            .o_chat_title, .o_chat_window_close {
-                font-size: 22px;
+            height: @o-chat-header-height;
+            padding-top: 10px;
+            border-radius: 0px;
+            .o_chat_title {
+                font-size: 16px;
+                margin-left: 10px;
+            }
+
+            .o_chat_window_close {
+                font-size: 17px;
+                color: white;
             }
         }
 
         .o_chat_title {
             cursor: pointer;
+            font-weight: bold;
             .o-flex(1, 1, auto);
             .o-text-overflow();
         }
@@ -68,20 +80,112 @@
         overflow: auto;
         border: 1px solid @odoo-color-silver-dark; // cannot use gray-lighter-dark as this file is also frontend
         border-width: 0 1px;
+        font-weight: 400;
 
         .o_thread_date_separator {
             margin-top: 0px;
-            margin-bottom: 15px;
-            border-color: lightgray;
+            margin-bottom: 25px;
+            border-bottom: 1px dashed #cccccc;
             .o_thread_date {
                 background-color: @o-chat-window-bg;
             }
         }
         .o_thread_message {
             .o_thread_message_sidebar {
-                margin-right: 5px;
+                margin-right: 10px;
+
+                .o_thread_message_avatar {
+                    border-radius: 4px;
+                    border: 1px solid #ebebeb;
+                    max-width: 40px;
+                }
+            }
+            padding: 4px 5px 0px 10px;
+
+            .o_mail_info {
+
+                .o_thread_author, strong a.o_mail_mailto, strong a.o_mail_mailto:hover {
+                    font-weight: 500;
+                    color: #111;
+                    font-size: 11px;
+                    @media (max-width: @screen-xs-max) {
+                        font-size: 13px;
+                    }
+                    margin-top: 5px;
+                }
+                .o_mail_timestamp {
+                    font-size: 11px;
+                    color: #aaa;
+                }
+
+                .o_thread_message_star {
+                    opacity: 1;
+                }
+
+                .o_document_link {
+                    display: block;
+                    max-width: 90%;
+                    font-size: 12px;
+                    @media (max-width: @screen-xs-max) {
+                        font-size: 14px;
+                    }
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                    padding-bottom: 0px;
+                    font-weight: 500;
+                }
+            }
+
+            .o_thread_message_content {
+                font-size: 12px;
+                padding-right: 10px;
+                @media (max-width: @screen-xs-max) {
+                    font-size: 14px;
+                }
+                color: #333;
+                p {
+                    margin: 0px 0px 8px;
+                }
+                ul.o_mail_thread_message_tracking {
+                    padding-left: 20px;
+                }
+            }
+        }
+    }
+
+    .o_chat_composer {
+        .o-flex(0, 0, auto);
+        border-left: 1px solid #ebebeb;
+        border-right: 1px solid #ebebeb;
+
+        .o_composer_buttons > button {
+            border: none;
+        }
+
+        .o_composer_button {
+            display: none;
+        }
+
+        .o_composer_mobile_button {
+            display: none;
+        }
+
+
+        @media (max-width: @screen-xs-max) {
+            .o_composer_mobile_button {
+                display: inline-block;
+                background-color: @odoo-brand-optional;
+                color: #fff;
             }
-            padding: 4px 5px;
+        }
+
+        > input {
+            padding: 5px;
+            width: 100%;
+        }
+        .o_composer_input > textarea {
+            border-color: transparent;
         }
     }
 }
diff --git a/addons/mail/static/src/less/client_action.less b/addons/mail/static/src/less/client_action.less
index 78a4f27f21b..367e791295a 100644
--- a/addons/mail/static/src/less/client_action.less
+++ b/addons/mail/static/src/less/client_action.less
@@ -6,9 +6,277 @@
 .o_mail_chat {
     .o-position-absolute(0, 0, 0, 0);
     height: 100%;
+    overflow: hidden;
 
     @media (max-width: @screen-xs-max) {
         height: auto;
+
+        .o_mail_chat_inbox_starred_button {
+            position: absolute;
+            width: 100%;
+            top: 40px;
+            padding-left: 15px;
+            padding-right: 15px;
+            padding-top: 15px;
+            padding-bottom: 10px;
+            text-align: center;
+            background: #ffffff;
+
+            .o_channel_inbox_item {
+                width: 50%;
+                border: 1px solid @odoo-brand-optional;
+
+                &:first-child {
+                    border-radius: 4px 0px 0px 4px;
+                }
+                &:last-child {
+                    border-radius: 0px 4px 4px 0px;
+                }
+            }
+        }
+
+        .o_mail_chat_content {
+            padding-top: 80px;
+            padding-bottom: 55px;
+
+            .o_mail_no_content {
+                padding-top: 30px;
+                display: block;
+                text-align: center;
+                margin: auto 0px;
+                position: absolute;
+                top: 30%;
+                width: 100%;
+            }
+        }
+
+        .o_mail_chat_mobile_tabs {
+            display: block !important;
+        }
+
+        .o_mail_chat_tab_pane {
+            display: none;
+            position: relative;
+            height: 100%;
+            padding-top: 50px;
+            padding-bottom: 55px;
+            overflow-x: scroll;
+            display: block;
+            background: #ffffff;
+
+            .o_mail_mobile_add_channel {
+                width: auto;
+                padding: 5px 0px; // larger padding-left than titles
+                position: relative;
+                margin: 10px;
+                display: none;
+                border: 1px solid #afafaf;
+                border-radius: 4px;
+
+                > input {
+                    width: 100%;
+                    padding: 5px 8px;
+                    padding-left: 20px;
+                    border: none;
+                }
+                > span {
+                    position: absolute;
+                    top: 10px;
+                    left: 10px;
+                }
+            }
+
+            .o_mail_tab_pane_item {
+                padding: 15px;
+                border-bottom: 1px solid #ebebeb;
+                overflow: hidden;
+                max-height: 100px;
+                position: relative;
+
+                &:last-child {
+                    border: none;
+                }
+
+                .item_avatar_status {
+                    display: inline-block;
+                    position: absolute;
+                    top: 15px;
+                    left: 10px;
+                    width: 55px;
+                    vertical-align: top;
+
+                    img {
+                        border-radius: 4px;
+                        max-width: 55px;
+                    }
+
+                    .o_mail_user_status {
+                        position: absolute;
+                        bottom: 5px;
+                        right: -8px;
+                        font-size: 13px;
+                        color: #cc0000;
+                        border-radius: 30px;
+                        background: #fff;
+                        padding: 2px;
+
+                        &.o_user_online {
+                            color: #21b799;
+                        }
+                    }
+                }
+
+                .chat_user_detail {
+                    display: inline-block;
+                    width: 100%;
+                    vertical-align: middle;
+                    padding-top: 5px;
+                    padding-left: 65px;
+
+                    h2 {
+                        font-size: 17px;
+                        display: block;
+                        font-weight: 500;
+                        margin: 0px;
+                        padding: 0px;
+                        color: #414141;
+
+                        small {
+                            float: right;
+                        }
+
+                        &.unread {
+                            font-weight: 700;
+                        }
+                    }
+
+                    p {
+                        display: inline-block;
+                        color: #b3b3b3;
+                        max-height: 27px;
+                        margin-top: 10px;
+                        overflow: hidden;
+                        line-height: 15px;
+
+                        &.unread{
+                            font-weight: 700;
+                            color: #8f8f8f;
+                        }
+                    }
+                }
+            }
+        }
+
+        .o_mail_chat_mobile_control_panel {
+            display: block !important;
+        }
+    }
+
+    .o_mail_chat_mobile_control_panel {
+        display: none;
+        position: absolute;
+        background: #ffffff;
+        top: 0px;
+        left: 0px;
+        width: 100%;
+        padding: 5px;
+        min-height: 44px;
+        box-shadow: 0px 0px 20px #afafaf;
+        border-bottom: 1px solid #ebebeb;
+        height: auto;
+        z-index: 1;
+
+        .o_mail_channel_title {
+            padding: 5px 10px 5px 0px;
+            color: #8f8f8f;
+            font-size: 14px;
+        }
+
+        .o_searchview {
+            color: #414141;
+            background: none;
+            border-color: transparent;
+            padding: 5px 5px 0px 5px;
+
+            .o_searchview_input {
+                width: 250px;
+                font-size: 15px;
+            }
+        }
+
+        .o_enable_searchview, .o_enable_searchview:focus,
+            .o_enable_searchview:hover, .o_enable_searchview:active  {
+                color: #414141;
+                background: none;
+                border-color: transparent;
+                display: inline-block;
+                width: auto;
+                position: absolute;
+                right: 5px;
+                top: 5px;
+
+                &::before {
+                    font-size: 15px;
+                }
+        }
+        .o_searchview_more {
+            display: none;
+        }
+    }
+
+    .o_mail_chat_mobile_tabs {
+        display: none;
+        background: #fff;
+        box-shadow: 0px 0px 20px #afafaf;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        width: 100%;
+
+        .o_mail_chat_mobile_tab {
+            display: inline-block;
+            width: 20%;
+            height: 100%;
+            min-height: 100%;
+            padding: 8px 4px;
+            text-align: center;
+            float: left;
+
+            &:first-child:nth-last-child(4),
+            &:first-child:nth-last-child(4) ~ .o_mail_chat_mobile_tab {
+               width: 25%;
+            }
+
+            &:first-child:nth-last-child(5),
+            &:first-child:nth-last-child(5) ~ .o_mail_chat_mobile_tab {
+               width: 20%;
+            }
+
+            &:not(:last-child) {
+               border-right: 1px solid #d7d7d7;
+            }
+
+            span {
+               display: block;
+               &.fa {
+                   font-size: 16px;
+               }
+
+               &.o_tab_title{
+                   font-size: 8px;
+                   padding-top: 8px;
+               }
+            }
+            &.active {
+               span {
+                   color: @odoo-brand-optional;
+               }
+            }
+        }
+    }
+
+    .o_mail_chat_tab_pane {
+        display: none;
     }
 
     .o_mail_annoying_notification_bar {
@@ -132,6 +400,8 @@
 
         @media (max-width: @screen-xs-max) {
             margin-left: 0;
+            display: block;
+            overflow-x: scroll;
         }
 
         @media (min-width: @screen-lg-min) {
@@ -267,7 +537,6 @@
 .o_mail_user_status {
     font-size: 1em;
     position: relative;
-
     &.o_user_online {
         color: @brand-success;
     }
diff --git a/addons/mail/static/src/less/composer.less b/addons/mail/static/src/less/composer.less
index e32c1167ac2..8144fb860ee 100644
--- a/addons/mail/static/src/less/composer.less
+++ b/addons/mail/static/src/less/composer.less
@@ -171,19 +171,21 @@
         .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);
             }
+            @media (max-width: @screen-xs-max) {
+                .o_composer_button_send {
+                    display: inline-block;
+                }
+            }
         }
-
-        .o_composer_button_send, .o_chatter_avatar, .o_composer_button_add_attachment, .o_composer_attachments_list {
+        .o_composer_button_send, .o_chatter_avatar {
             display: none;
         }
     }
@@ -197,8 +199,8 @@
 // Emoji
 .o_mail_emoji {
     display: inline-block;
-    width: 24px;
-    height: 24px;
+    height: 20px;
+    width: 20px;
 
     > img {
         width: 100%;
diff --git a/addons/mail/static/src/less/extended_chat_window.less b/addons/mail/static/src/less/extended_chat_window.less
index 028befebdf9..618211b7718 100644
--- a/addons/mail/static/src/less/extended_chat_window.less
+++ b/addons/mail/static/src/less/extended_chat_window.less
@@ -24,4 +24,55 @@
             display: none;
         }
     }
+
+    .o_chat_composer {
+        background: #fff;
+        border-top: 1px solid #d9d9d9;
+        position: relative;
+        .o_composer {
+            .o_composer_input {
+                display: inline-block;
+                float: left;
+                width: 70%;
+                textarea {
+                    display: block;
+                    padding: 10px;
+                    font-size: 13px;
+
+                    @media (max-width: @screen-xs-max) {
+                        padding: 15px 10px;
+                    }
+                }
+            }
+
+            .o_chatter_composer_tools {
+                position: absolute;
+                right: 0px;
+                top: 0px;
+
+                button {
+                    padding: 10px;
+                    @media (max-width: @screen-xs-max) {
+                        padding: 13px;
+                    }
+                    &.btn-icon{
+                        font-size: 1.3em;
+                    }
+                }
+            }
+        }
+        .o_composer_tabs_toggle_button {
+            display: none;
+        }
+        .o_composer_attachments_list {
+            margin: 0px;
+        }
+        .o_composer_attachments_list, .o_composer_buttons {
+            .o_composer_button_emoji, .o_composer_button_add_attachment {
+                &:hover, &:focus {
+                    background-color: #FFFFFF !important;
+                }
+            }
+        }
+    }
 }
diff --git a/addons/mail/static/src/less/systray.less b/addons/mail/static/src/less/systray.less
index 1ecb50989aa..584bda51023 100644
--- a/addons/mail/static/src/less/systray.less
+++ b/addons/mail/static/src/less/systray.less
@@ -22,11 +22,12 @@
     .o_notification_counter {
         background: @odoo-brand-optional;
         color: white;
-        padding: 0em 0.3em;
+        padding: 0em 0.5em;
         font-size: 0.7em;
-        top: 19%;
+        top: 0px;
+        right: 0px;
         position: absolute;
-        margin: 0px 0px 0px 6px;
+        margin: 0px;
     }
     .o_mail_navbar_dropdown {
         width: 350px;
@@ -45,7 +46,9 @@
             .o-flex(0, 0, auto);
             justify-content: space-between;
             border-bottom: 1px solid lightgray;
-
+            @media (max-width: @screen-xs-max) {
+                padding: 5px;
+            }
             .o_filter_button, .o_new_message {
                 .btn-link;
                 padding: 5px;
@@ -80,6 +83,10 @@
                 cursor: pointer;
                 font-size: 12px;
                 overflow: hidden;
+                @media (max-width: @screen-xs-max) {
+                    padding: 10px;
+                    height: 85px;
+                }
                 &~.o_mail_channel_preview {
                     border-top: 1px solid lightgray;
                 }
@@ -93,6 +100,12 @@
                 .o_channel_image {
                     .o-flex(0, 0, 36px);
                     max-height: 36px;
+                    @media (max-width: @screen-xs-max) {
+                        .o-flex(0, 0, 50px);
+                        border-radius: 3px;
+                        margin-right: 10px;
+                        max-height: 50px;
+                    }
                 }
                 .o_channel_info {
                     .o-flex(1, 1, 100%);
@@ -105,6 +118,11 @@
                             .o-flex(1, 1, auto);
                             .o-text-overflow();
                             color: @odoo-main-text-color;
+                            @media (max-width: @screen-xs-max) {
+                                font-size: 1.4em;
+                                color: #000;
+                                font-weight: 300;
+                            }
                         }
                         .o_last_message_date {
                             .o-flex(0, 0, auto);
@@ -133,9 +151,86 @@
             opacity: 0.5;
             padding: 3px;
         }
+
+        &.o_mail_navbar_mobile {
+            position: relative;
+
+            .o_mail_navbar_mobile_header {
+                padding: 5px 5px 5px 0px;
+                min-height: 44px;
+                border-bottom: 1px solid #ccc;
+                background: #ffffff;
+            }
+
+            .o_mail_navbar_dropdown_channels {
+                padding-bottom: 55px;
+            }
+
+            .o_mail_navbar_mobile_tabs {
+                background: #fff;
+                box-shadow: 0px 0px 20px #afafaf;
+                position: fixed;
+                bottom: 0px;
+                left: 0px;
+                width: 100%;
+
+                .o_mail_navbar_mobile_tab {
+                    display: inline-block;
+                    width: 20%;
+                    height: 100%;
+                    min-height: 100%;
+                    padding: 8px 4px;
+                    text-align: center;
+                    float: left;
+                    font-size: 1.2em;
+                    color: #666666;
+
+                    &:first-child:nth-last-child(3),
+                    &:first-child:nth-last-child(3) ~ .o_mail_navbar_mobile_tab {
+                        width: 33.33%;
+                    }
+
+                    &:first-child:nth-last-child(4),
+                    &:first-child:nth-last-child(4) ~ .o_mail_navbar_mobile_tab {
+                        width: 25%;
+                    }
+
+                    &:first-child:nth-last-child(5),
+                    &:first-child:nth-last-child(5) ~ .o_mail_navbar_mobile_tab {
+                        width: 20%;
+                    }
+
+                    &:not(:last-child) {
+                        border-right: 1px solid #d7d7d7;
+                    }
+
+                    span {
+                        display: block;
+                        &.fa {
+                           font-size: 16px;
+                        }
+
+                        &.o_tab_title{
+                           font-size: 11px;
+                           padding-top: 8px;
+                        }
+                    }
+                    &.o_selected {
+                        span {
+                           color: @odoo-brand-optional;
+                        }
+                    }
+                }
+            }
+        }
     }
 }
 
 .o_no_chat_window .o_mail_navbar_dropdown .o_new_message {
     display: none;  // hide 'new message' button if chat windows are disabled
 }
+
+// Fix for enterprise nav bar
+.o_main_navbar .o_menu_systray .o_notification_counter {
+    top: 5px;
+}
diff --git a/addons/mail/static/src/less/thread.less b/addons/mail/static/src/less/thread.less
index 16e58a8e285..859e9f32fee 100644
--- a/addons/mail/static/src/less/thread.less
+++ b/addons/mail/static/src/less/thread.less
@@ -96,6 +96,69 @@
             cursor: pointer;
         }
 
+        .o_message_attachments {
+            display: block;
+            position: relative;
+            padding: 0px;
+            margin: 0px;
+
+            .o_attachment {
+                width: initial;
+                height: initial;
+
+                .o_image {
+                    position: initial;
+                    top: initial;
+                    left: initial;
+                    bottom: initial;
+                    right: initial;
+                }
+            }
+
+            .o_message_attachment {
+                display: inline-block;
+                padding: 5px;
+                border-radius: 4px;
+                margin: 5px 5px 5px 5px;
+                position: relative;
+                background-color: #cccccc;
+
+                .download_icon {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    span {
+                        background: rgba(0, 0, 0, 0.5);
+                        position: absolute;
+                        top: 37%;
+                        left: 37%;
+                        padding: 5px;
+                        border-radius: 30px;
+                        color: #fff;
+                    }
+                }
+
+                a.o_image {
+                    width: 80px;
+                    height: 60px;
+                }
+
+                img {
+                    height: 60px;
+                    width: 80px;
+                    opacity: 0.5;
+
+                    &.o_image_view {
+                        cursor: pointer;
+                        background-color: #000;
+                        object-fit: none;
+                    }
+                }
+            }
+        }
+
         .o_thread_message_core {
             .o-flex(1, 1, auto);
             min-width: 0;