[IMP] mass_mailing, web_editor: improve themes/snippets/templates

1 files changed, 98 insertions, 12 deletions

diff --git a/addons/mass_mailing/static/src/less/mass_mailing.ui.less b/addons/mass_mailing/static/src/less/mass_mailing.ui.less
index 63336f77c99..fd16ddb4ca2 100644
--- a/addons/mass_mailing/static/src/less/mass_mailing.ui.less
+++ b/addons/mass_mailing/static/src/less/mass_mailing.ui.less
@@ -1,6 +1,24 @@
 .o_mail_theme_selector {
     > a {
-        .o-position-absolute(6px, 6px);
+        .o-position-absolute(0, 0, auto, 0);
+        height: 34px;
+        line-height: 31px;
+        border-radius: 0;
+        background-color: @o-we-color-darker;
+        color: @o-we-color-text-normal;
+
+        &:hover, &:focus, &:active {
+            color: @o-we-color-text-light;
+        }
+
+        i {
+            margin-right: 10px;
+        }
+    }
+
+    &.open > a {
+        color: white;
+        background-color: @o-we-color-dark;
     }
 
     .dropdown-menu {
@@ -11,27 +29,95 @@
         background-color: @o-we-color-dark;
 
         > li {
+            margin: 0;
+
+            > a {
+                padding: 10px 10px;
+
+                .o_thumb {
+                    display: none;
+                    background-size: cover;
+                    padding-top: 50%;
+                    border: 1px solid @o-we-color-light;
+                    border-top: 1px solid @o-we-color-text-normal;
+
+                    &.logo {
+                        display: block;
+                    }
+                }
+            }
+
             &:hover > a {
                 background-color: @o-we-color-darker;
+
+                .o_thumb {
+                    border: 1px solid white;
+                }
             }
-            &.selected {
+
+            &.selected > a .o_thumb {
                 border: 2px solid @odoo-brand-primary;
+                background-color: @o-we-color-dark;
             }
         }
     }
 }
 
 body.o_force_mail_theme_choice {
-    .o_mail_theme_selector {
-        .dropdown-toggle {
-            display: none;
-        }
-        .dropdown-menu {
-            display: block;
+    #oe_snippets {
+        width: 100%;
+
+        .o_mail_theme_selector {
+            .dropdown-toggle {
+                display: none;
+            }
+
+            .dropdown-menu {
+                display: block;
+
+                > li {
+                    margin: 0;
+                    float: left;
+                    width: 100%;
+                    max-width: 25%;
+
+                    > a {
+                        .o-transition(all, 0.3s, ease);
+
+                        .o_thumb {
+                            display: none;
+                            padding-top: 107%;
+                            border: 1px solid @o-we-color-light;
+                            border-top: 1px solid @o-we-color-text-normal;
+                            box-shadow: 0 5px 10px fade(black, 80%);
+                            will-change: transform;
+                            .backface-visibility(hidden);
+                            .o-transition(all, 0.3s);
+
+                            &.small {
+                                display: block;
+                            }
+
+                            @media screen and (min-width: 900px) {
+                                &.small {
+                                    display: none;
+                                }
+                                &.large {
+                                    display: block;
+                                }
+                            }
+                        }
+                    }
+
+                    &:hover > a {
+                        background-color: @o-we-color-dark;
+
+                        .o_thumb {
+                            box-shadow: 0 5px 30px 1px fade(black, 60%);
+                        }
+                    }
+                }
+            }
         }
     }
-    #editable_area::after {
-        content: "";
-        .o-position-absolute(0, 0, 0, 0);
-    }
 }