[REF] mail: activities list, ‘mark as done’ sliding panel

Refactor ‘mark as done’ popup JS in order to use a sliding panel layout instead.
Sliding panels are currently needed in kanban views, where activities are listed in a dropdown that can't handle popups because of CSS overflow and lack of space.

Since this new system check for default bootstrap data-toggle attributes, it could be easily used elsewhere changing the buttons's data-toggle and providing the necessary container for the “mark as done” form.

1 files changed, 30 insertions, 47 deletions

diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss
index cdd8bbe1cb5..16ad01a83b0 100644
--- a/addons/mail/static/src/scss/mail_activity.scss
+++ b/addons/mail/static/src/scss/mail_activity.scss
@@ -123,13 +123,13 @@
     }
 
     .o_activity_color_planned {
-        color: theme-color('success');
+        color: darken(theme-color('success'), 10%);
     }
     .o_activity_color_overdue {
-        color: theme-color('danger');
+        color: darken(theme-color('danger'), 10%);
     }
     .o_activity_color_today {
-        color: theme-color('warning');
+        color: darken(theme-color('warning'), 10%);
     }
 }
 
@@ -160,62 +160,45 @@
             }
         }
 
-        .o_activity_link_kanban {
-            visibility: hidden;
-            @include media-breakpoint-down(sm) {
-                visibility: visible;
-            }
-        }
-
-        .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%);
-            }
-        }
-
         div.o_activity {
             min-width: 290px;
             padding: 0px 0px;
 
-            > :last-child {
-                background-color: $o-brand-lightsecondary;
-                line-height: 3em;
-            }
-            ul.o_activity_log {
+            .o_activity_log_container {
                 max-height: 300px;
                 overflow-y: auto;
+            }
+
+            ul.o_activity_log {
                 color: $body-color;
 
                 li {
-                    width: 100%;
-                    display: inline-block;
+                    .o_activity_title_entry {
+                        display: flex;
+                        align-items: baseline;
+                    }
+
+                    .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_label {
-                        line-height: 2.5em;
-                        padding: 0px 5px;
-                        background-color: $o-brand-lightsecondary;
+                    &.o_activity_selected {
+                        border-bottom: 0;
                     }
 
-                    &.o_log_activity {
-                        padding: 8px 10px 8px 0px;
-                        vertical-align: middle;
-                        &:hover {
-                            background-color: theme-color('light');
-                            .o_activity_link_kanban {
-                                visibility: visible;
-                            }
-                        }
-
-                        .o_activity_title {
-                            width: 85%;
-                            padding: 0px 5px 0px 10px;
-                            white-space: nowrap;
-                            text-overflow: ellipsis;
-                        }
+                    &.o_activity_form > div {
+                        padding-top: 0.5em;
+                        padding-bottom: 0.7em;
                     }
                 }
             }