[IMP] web_editor: change design of transparent colors palette

* Add a "transparent" button
* Add a special background for transparent background buttons

+ Some minor colorpicker design change

4 files changed, 49 insertions, 18 deletions

diff --git a/addons/web_editor/static/src/js/snippets.options.js b/addons/web_editor/static/src/js/snippets.options.js
index cd5c5de71b4..7905da76895 100644
--- a/addons/web_editor/static/src/js/snippets.options.js
+++ b/addons/web_editor/static/src/js/snippets.options.js
@@ -263,12 +263,14 @@ odoo.define('web_editor.snippets.options', function (require) {
             }
 
             var classes = [];
-            this.$el.find(".colorpicker button").map(function () {
+            this.$el.find(".colorpicker button").each(function () {
                 var $color = $(this);
-                var className = 'bg-' + $color.data('color');
+                if (!$color.data("color")) {
+                    return;
+                }
 
+                var className = 'bg-' + $color.data('color');
                 $color.addClass(className);
-
                 if (self.$target.hasClass(className)) {
                     self.color = className;
                     $color.addClass("selected");
@@ -285,14 +287,19 @@ odoo.define('web_editor.snippets.options', function (require) {
             var $colors = this.$el.find(".colorpicker button");
             $colors
                 .mouseenter(function (e) {
-                    self.$target.removeClass(self.classes).addClass('bg-' + $(this).data("color"));
+                    self.$target.removeClass(self.classes);
+                    var color = $(this).data("color");
+                    if (color) {
+                        self.$target.addClass('bg-' + color);
+                    }
                     self.$target.trigger("background-color-event", e.type);
                 })
                 .mouseleave(function (e) {
                     self.$target.removeClass(self.classes);
                     var $selected = $colors.filter(".selected");
-                    if ($selected.length) {
-                        self.$target.addClass('bg-' + $selected.data("color"));
+                    var color = $selected.length && $selected.data("color");
+                    if (color) {
+                        self.$target.addClass('bg-' + color);
                     }
                     self.$target.trigger("background-color-event", e.type);
                 })
diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less
index 73707a19d1d..a2445e55fea 100644
--- a/addons/web_editor/static/src/less/web_editor.common.less
+++ b/addons/web_editor/static/src/less/web_editor.common.less
@@ -156,7 +156,7 @@ div.oe_menu_buttons {
     right: -8px;
 }
 
-ul.oe_menu_editor { 
+ul.oe_menu_editor {
     .fa-home {
         display: none;
     }
@@ -296,4 +296,4 @@ a.o_underline {
 .o-create-color-classes(~'black-75', @color-black-75);
 .o-create-color-classes(~'white-25', @color-white-25);
 .o-create-color-classes(~'white-50', @color-white-50);
-.o-create-color-classes(~'white-75', @color-white-75);
\ No newline at end of file
+.o-create-color-classes(~'white-75', @color-white-75);
diff --git a/addons/web_editor/static/src/less/web_editor.ui.components.less b/addons/web_editor/static/src/less/web_editor.ui.components.less
index 0c03c2cbb8e..31d2ce07dac 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.components.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.components.less
@@ -1,4 +1,3 @@
-
 // INPUTS
 .o_switch {
     .o-flex-display();
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index bbf8b6ce764..2870742fec7 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -835,6 +835,7 @@ html[lang] > body.editor_enable{
                 float: left;
                 margin: 1px 1px 0 0;
                 border-color: black;
+                .o_alpha_button_preview();
 
                 &.o_small {
                     width: 16px;
@@ -846,6 +847,10 @@ html[lang] > body.editor_enable{
                 &.o_clear {
                     clear: both;
                 }
+
+                &.o_btn_transparent {
+                    display: none;
+                }
             }
         }
     }
@@ -973,26 +978,26 @@ table.colorpicker {
             font-size: 12px;
             font-weight: bold;
             text-align: left;
+            .o_alpha_button_preview();
+
             &:hover, &.selected {
                 box-shadow: 0px 0px 2px 2px @o-we-color-light;
             }
-            &.selected:before {
-                content: "\f00c";
-                font-family: "FontAwesome";
-                color: @odoo-brand-optional;
-                .o-position-absolute(@top: 0, @left: 3px);
-                font-size: 13px;
-                line-height: 28px;
-            }
 
             &:after {
                 content: "A";
                 .o-position-absolute(0, 0);
                 width: 25px;
                 text-align: center;
+                font-size: 13px;
                 line-height: 28px;
                 font-weight: normal;
             }
+            &.selected:after {
+                content: "\f00c";
+                font-family: "FontAwesome";
+                color: @brand-success;
+            }
 
             &[data-event="foreColor"] {
                 background-color: @o-we-color-normal;
@@ -1008,6 +1013,10 @@ table.colorpicker {
                 padding: 0;
                 margin-right: 5px;
             }
+
+            &.o_btn_transparent::before {
+                background-color: transparent;
+            }
         }
     }
     .note-palette-title {
@@ -1022,7 +1031,7 @@ table.colorpicker {
         .note-color-reset {
             font-size: 20px!important;
             color: desaturate(fade(@o-we-color-danger, 60%), 40%);
-            margin: 3px 0 0;
+            margin: 1px 0 0;
             padding: 0;
             cursor: pointer;
             &:hover {
@@ -1075,3 +1084,19 @@ body.editor_enable {
         display: none;
     }
 }
+
+// Mixins for buttons with alpha bg-color
+.o_alpha_button_preview () {
+    position: relative;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpivHnzJgMSUFNTQ+YyMeAFNJVm/P//PzL/1q1bg8VpAAEGAMiICJs4Ce8uAAAAAElFTkSuQmCC');
+    background-size: 10px auto;
+    z-index: 1;
+
+    // Place an overlay that inherit the button's bg-color.
+    &::before {
+        content: "";
+        .o-position-absolute(0, 0, 0, 0);
+        z-index: -1;
+        background-color: inherit;
+    }
+}